componised ImageRow from /feed

src/lib/media/a11y-img.ts

@@ -0,0 +1,4 @@
+export interface A11yImage {
+    src: string;
+    alt: string;
+}

src/lib/media/image-row.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { type A11yImage } from "./a11y-img";
+
+    let {
+        images,
+
+        // path in which all images lie. this must be the same for all images. if left blank, "./" is used instead
+        path,
+    }: {
+        images: A11yImage[];
+        path?: string;
+    } = $props();
+</script>
+
+<div class="image-gallery">
+    {#each images as i}
+        <a class="image-gallery-link" href="{path ?? "./"}/{i.src}">
+            <img class="image-gallery-img" loading="lazy" src="{path ?? "./"}/{i.src}" alt={i.alt}>
+        </a>
+    {/each}
+</div>
+
+<style>
+    .image-gallery {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 4px;
+    }
+
+    .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);
+        scale: 1.04;
+    }
+
+    .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 {
+        filter: brightness(100%) saturate(100%);
+        scale: 1.0;
+    }
+
+    .image-gallery-link:hover {
+        outline-color: var(--color-highlight);
+    }
+
+    @media screen and (max-width: 800px) {
+        .image-gallery-link:hover {
+            outline-color: transparent;
+        }
+
+        .image-gallery-img {
+            border-radius: 0;
+            scale: 1.0;
+            filter: brightness(100%) saturate(100%);
+        }
+    }
+</style>