removed blur effect from projects page to counteract performance drop on that page

src/routes/drawings/+page.svelte

@@ -62,20 +62,32 @@
     }
 
     .selected-img-link {
-        margin: 0;
+        width: fit-content;
+        height: 400px;
+        margin: 0 auto;
+        overflow: hidden;
+    }
+
+    .selected-img-link:hover .selected-img {
+        scale: 1.06;
     }
 
     .selected-img {
         object-fit: contain;
         width: 100%;
-        height: 400px;
+        height: 100%;
         max-height: initial;
+        scale: 1.0;
+        transition: scale var(--duration-animation) var(--anim-curve);
     }
 
     .selected-text-container {
         display: flex;
         flex-direction: column;
         gap: 8px;
+        overflow: scroll;
+        padding-right: 12px;
+        max-height: var(--media-height);
     }
 
     .selected-text-header p {
@@ -106,21 +118,18 @@
         width: 100%;
         overflow: hidden;
         border-radius: var(--border-radius);
-        filter: brightness(70%) saturate(60%);
+        /* filter: brightness(70%) saturate(60%); */
         outline: var(--border-style) var(--border-dash-size) transparent;
-        transition: filter var(--duration-animation) var(--anim-curve),
+        transition: outline-color var(--duration-animation) var(--anim-curve);
-                    outline-color var(--duration-animation) var(--anim-curve);
-    }
-    .img-button:hover {
-        filter: brightness(100%) saturate(100%);
-        outline-color: var(--color-highlight);
     }
 
     .img-button img {
         width: 100%;
         height: 200px;
         object-fit: cover;
-        transition: scale var(--duration-animation) var(--anim-curve);
+        filter: brightness(100%) saturate(80%);
+        transition: scale var(--duration-animation) var(--anim-curve),
+                    filter var(--duration-animation) var(--anim-curve);
     }
     .img-button:hover img {
         scale: 1.12;
@@ -128,4 +137,16 @@
     .img-button:active img {
         scale: 1.08;
     }
+
+    .img-button-container:hover img {
+        filter: brightness(70%) saturate(60%);
+    }
+    
+    .img-button:hover {
+        outline-color: var(--color-highlight);
+    }
+
+    .img-button:hover img {
+        filter: brightness(100%) saturate(100%);
+    }
 </style>

src/routes/projects/+page.svelte

@@ -34,13 +34,12 @@
 <Content>
     <Banner2
         title="My Disordered Projects"
-        banner="/projects/banner.webp"
+        banner="banner.webp"
         bannerAlt="An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging."
         subtitle="things I have worked on" />
 
     <p>Welcome to my 💫new💫 projects page! Here I show off all the things I have done. Projects are ordered reverse-chronologically and have some other neat information displayed. have fun browsing~!</p>
 
-    <!-- TODO it would be nice if these were green here to separate them from the red tags on the blog page -->
     <div class="tag-filters">
         <p class="tag-filter-header"># filter projects by category:</p>
         <div class="tag-filter-container">
@@ -123,14 +122,14 @@
         width: 100%;
         height: 100%;
         z-index: -1;
-        filter: brightness(40%) saturate(40%) blur(1px);
+        filter: brightness(40%) saturate(40%);
         transition: filter var(--duration-animation) var(--anim-curve),
                     scale var(--duration-animation) var(--anim-curve);
         scale: 1.05;
     }
 
     .project-wrapper:hover .project-banner {
-        filter: brightness(60%) saturate(100%) blur(0);
+        filter: brightness(60%) saturate(100%);
         scale: 1.0;
     }