fancied up feed images

src/routes/feed/+page.svelte

@@ -32,13 +32,13 @@
 
 <Content>
     <Banner2
-        title="Art & Project Feed"
+        title="Creative Feed"
         banner="banner.webp"
         bannerAlt="Mirror picture of me, pixelated beyond recognition"
-        subtitle="subtitle missing"
+        subtitle="minor things I have worked on"
     />
 
-    <p>Welcome to my (new) art feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his page!</p>
+    <p>Welcome to my creative feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his website!</p>
 
     <p>This page is intended to be a contrasting companion to the <a href="/projects"><code>projects</code> page</a>; I'll use this page for smaller things that don't fit the dedicated-page-format.</p>
 
@@ -54,8 +54,8 @@
         {#if entry.images && entry.images.length > 0}
             <div class="image-gallery">
                 {#each entry.images as i, index}
-                    <a href="{entry.path}/{i}.webp">
-                        <img loading="lazy" src="{entry.path}/{i}.webp" alt={entry.imageAlts[index]}>
+                    <a class="image-gallery-link" href="{entry.path}/{i}.webp">
+                        <img class="image-gallery-img" loading="lazy" src="{entry.path}/{i}.webp" alt={entry.imageAlts[index]}>
                     </a>
                 {/each}
             </div>
@@ -116,19 +116,36 @@
         gap: 4px;
     }
 
-    .image-gallery img {
+    .image-gallery-img {
         width: 100%;
         height: 100%;
         display: block;
         object-fit: cover;
         filter: brightness(60%) saturate(80%);
+        max-height: 320px;
         transition: filter var(--duration-animation) var(--anim-curve),
+                    scale var(--duration-animation) var(--anim-curve),
                     border-radius var(--duration-animation) var(--anim-curve);
+        scale: 1.04;
     }
 
-    .image-gallery img:hover {
+    .image-gallery-link {
+        outline: var(--border-style) var(--border-dash-size) transparent;
+        border-radius: var(--border-radius);
+        z-index: 10;
+        transition: outline-color var(--duration-animation) var(--anim-curve);
+        overflow: hidden;
+        margin: 0;
+    }
+
+    .image-gallery-link:hover .image-gallery-img {
         border-radius: var(--border-radius);
         filter: brightness(100%) saturate(100%);
+        scale: 1.0;
+    }
+
+    .image-gallery-link:hover {
+        outline-color: var(--color-highlight);
     }
 
     .subtitle {
@@ -150,12 +167,18 @@
     }
 
     @media screen and (max-width: 800px) {
-        .image-gallery img {
-            filter: brightness(100%) saturate(100%);
+        .image-gallery-link, .image-gallery-link:hover .image-gallery-img {
+            border-radius: 0;
         }
 
-        .image-gallery img:hover {
+        .image-gallery-link:hover {
+            outline-color: transparent;
+        }
+
+        .image-gallery-img {
             border-radius: 0;
+            scale: 1.0;
+            filter: brightness(100%) saturate(100%);
         }
     }
 </style>

src/routes/feed/feed.ts

@@ -1,9 +1,4 @@
 export let entries: string[] = [
-    // 2026
-    // "misc/lightyears-font",
     "electronics/trans-phone",
     "drawings/lecturer-gender",
-    // 2024
-    // "electronics/3ds-usb-c",
-    // "electronics/deej0461",
 ];