From da62a57bfb7145f1aadc88d779da85c2dec734a9 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Mon, 6 Apr 2026 17:53:40 +0200
Subject: [PATCH] added image gallery component; moved blurred background to
 separate CSS class

---
 src/lib/components/callout.svelte           |  7 +-
 src/lib/components/scroll-top-button.svelte |  3 +-
 src/lib/components/subtitled-image.svelte   | 11 ++--
 src/lib/components/table-of-contents.svelte |  3 +-
 src/lib/lists/blog-gallery.svelte           |  3 +-
 src/lib/lists/gallery-row.svelte            |  3 +-
 src/lib/lists/gallery.svelte                |  3 +-
 src/lib/lists/image-gallery.svelte          | 71 +++++++++++++++++++++
 src/lib/viewport/footer.svelte              |  3 +-
 src/routes/+layout.svelte                   | 19 ++----
 src/routes/+page.svelte                     |  3 +-
 src/routes/projects/+page.svelte            |  3 +-
 src/routes/test/+page.svelte                | 38 ++++++++++-
 13 files changed, 131 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/lists/image-gallery.svelte

diff --git a/src/lib/components/callout.svelte b/src/lib/components/callout.svelte
index 5de75bf..e6827d7 100644
--- a/src/lib/components/callout.svelte
+++ b/src/lib/components/callout.svelte
@@ -32,15 +32,15 @@
 {/snippet}
 
 {#if type == "quote"}
-    <div class="callout-container callout-quote">
+    <div class="callout-container blurred-background callout-quote">
         {@render calloutContent()}
     </div>
 {:else if type == "info"}
-    <div class="callout-container callout-info">
+    <div class="callout-container blurred-background callout-info">
         {@render calloutContent()}
     </div>
 {:else}
-    <div class="callout-container callout-warn">
+    <div class="callout-container blurred-background callout-warn">
         {@render calloutContent()}
     </div>
 {/if}
@@ -67,7 +67,6 @@
         align-items: center;
         border: var(--border-style) var(--border-dash-size) var(--color-callout);
         background-color: var(--color-callout-background);
-        backdrop-filter: blur(var(--blur-radius-background));
         border-radius: var(--border-radius);
         padding: 16px;
         gap: 16px;
diff --git a/src/lib/components/scroll-top-button.svelte b/src/lib/components/scroll-top-button.svelte
index f7212bf..2284370 100644
--- a/src/lib/components/scroll-top-button.svelte
+++ b/src/lib/components/scroll-top-button.svelte
@@ -9,7 +9,7 @@
 <svelte:window bind:scrollY={y} />
 
 {#if y > 2400}
-    <button class="scroll-top-button" onclick={scrollToTop}>↑</button>
+    <button class="scroll-top-button blurred-background" onclick={scrollToTop}>↑</button>
 {/if}
 
 <style>
@@ -22,7 +22,6 @@
         border: var(--border-style) var(--border-dash-size) var(--color-highlight);
         color: var(--color-highlight);
         background-color: var(--color-background-highlight);
-        backdrop-filter: blur(var(--blur-radius-background));
         padding: 12px;
         transition: background-color var(--duration-animation) var(--anim-curve);
         z-index: 10;
diff --git a/src/lib/components/subtitled-image.svelte b/src/lib/components/subtitled-image.svelte
index 04c52a5..cebf15e 100644
--- a/src/lib/components/subtitled-image.svelte
+++ b/src/lib/components/subtitled-image.svelte
@@ -44,17 +44,17 @@
 <!-- this structure is ugly as fuck. there must be a better way of doing this -->
 {#if alignment && alignment == "left"}
     {#if smaller}
-        <a class="subtitled-img-container subtitled-img-container-left subtitled-img-reduced-size" href="{image}">
+        <a class="subtitled-img-container blurred-background subtitled-img-container-left subtitled-img-reduced-size" href="{image}">
             {@render subtitledImageContent()}
         </a>
     {:else}
-        <a class="subtitled-img-container subtitled-img-container-left" href="{image}">
+        <a class="subtitled-img-container blurred-background subtitled-img-container-left" href="{image}">
             {@render subtitledImageContent()}
         </a>
     {/if}
 {:else if alignment && alignment == "right"}
     {#if smaller}
-        <a class="subtitled-img-container subtitled-img-container-right subtitled-img-reduced-size" href="{image}">
+        <a class="subtitled-img-container blurred-background subtitled-img-container-right subtitled-img-reduced-size" href="{image}">
             {@render subtitledImageContent()}
         </a>
     {:else}
@@ -64,11 +64,11 @@
     {/if}
 {:else}
     {#if smaller}
-        <a class="subtitled-img-container subtitled-img-container-centred subtitled-img-reduced-size" href="{image}">
+        <a class="subtitled-img-container blurred-background subtitled-img-container-centred subtitled-img-reduced-size" href="{image}">
             {@render subtitledImageContent()}
         </a>
     {:else}
-        <a class="subtitled-img-container subtitled-img-container-centred" href="{image}">
+        <a class="subtitled-img-container blurred-background subtitled-img-container-centred" href="{image}">
             {@render subtitledImageContent()}
         </a>
     {/if}
@@ -81,7 +81,6 @@
         border: var(--border-dash-size) var(--color-highlight) var(--border-style);
         text-decoration: none;
         box-sizing: border-box;
-        backdrop-filter: blur(var(--blur-radius-background));
         transition: background-color var(--duration-animation) var(--anim-curve);
     }
 
diff --git a/src/lib/components/table-of-contents.svelte b/src/lib/components/table-of-contents.svelte
index d9e5f74..d966b38 100644
--- a/src/lib/components/table-of-contents.svelte
+++ b/src/lib/components/table-of-contents.svelte
@@ -63,7 +63,7 @@
 {/snippet}
 
 {#if tocEntries.length > 0}
-    <div class="toc-container">
+    <div class="toc-container blurred-background">
         <ul class="toc-list">
             {#each tocEntries as entry}
                 {@render tocEntryLine({ entry })}
@@ -88,7 +88,6 @@
             background-color: var(--color-background-highlight);
             padding: 16px 0;
             border: var(--border-style) var(--border-dash-size) var(--color-highlight);
-            backdrop-filter: blur(var(--blur-radius-background));
         }
 
         .toc-list {
diff --git a/src/lib/lists/blog-gallery.svelte b/src/lib/lists/blog-gallery.svelte
index 3e50475..41077cf 100644
--- a/src/lib/lists/blog-gallery.svelte
+++ b/src/lib/lists/blog-gallery.svelte
@@ -10,7 +10,7 @@
 
 <div class="entry-container">
     {#each posts as post}
-        <a class="entry" href="{post.key}">
+        <a class="entry blurred-background-hover" href="{post.key}">
             <div class="entry-banner-container">
                 <img class="entry-banner" src="{post.key}/{post.post.banner}" alt="{post.post.bannerAlt}">
             </div>
@@ -55,7 +55,6 @@
     .entry:hover {
         background-color: var(--color-background-highlight-alt);
         border-color: var(--color-highlight-alt);
-        backdrop-filter: blur(var(--blur-radius-background));
     }
 
     .entry:hover .entry-banner {
diff --git a/src/lib/lists/gallery-row.svelte b/src/lib/lists/gallery-row.svelte
index 064305a..6991eb1 100644
--- a/src/lib/lists/gallery-row.svelte
+++ b/src/lib/lists/gallery-row.svelte
@@ -16,7 +16,7 @@
 
 <div class="row-container">
     {#each entries as entry}
-        <a class="row-entry" href="{entry.link}">
+        <a class="row-entry blurred-background-hover" href="{entry.link}">
             <div class="row-img-container">
                 <img class="row-img" src="{entry.img}" alt="{entry.altText}">
             </div>
@@ -49,7 +49,6 @@
     .row-entry:hover {
         background-color: var(--color-background-highlight);
         border-color: var(--color-highlight);
-        backdrop-filter: blur(var(--blur-radius-background));
     }
 
     .row-entry:hover .row-img {
diff --git a/src/lib/lists/gallery.svelte b/src/lib/lists/gallery.svelte
index bcdc31c..9556b5f 100644
--- a/src/lib/lists/gallery.svelte
+++ b/src/lib/lists/gallery.svelte
@@ -22,7 +22,7 @@
 </div>
 
 {#snippet galleryEntry({entry}: {entry: GalleryEntry})}
-    <a class="gallery-container" href="{entry.link}">
+    <a class="gallery-container blurred-background-hover" href="{entry.link}">
         {#if entry.img && entry.img !== ""}
             <img class="gallery-img" src="{entry.img}" alt="{entry.imgAlt}">
         {:else}
@@ -111,7 +111,6 @@
     .gallery-container:hover {
         border-color: var(--color-highlight);
         background-color: var(--color-background-highlight);
-        backdrop-filter: blur(var(--blur-radius-background));
     }
     .gallery-container:hover p {
         color: var(--color-highlight);
diff --git a/src/lib/lists/image-gallery.svelte b/src/lib/lists/image-gallery.svelte
new file mode 100644
index 0000000..12d5a94
--- /dev/null
+++ b/src/lib/lists/image-gallery.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+
+    export interface GalleryImage {
+        src: string;
+        alt: string;
+        desc: string;
+    }
+
+    let {
+        images,
+    }: {
+        images: GalleryImage[];
+    } = $props();
+
+    let currentIndex: number = $state(0);
+
+    function galleryBack() {
+        if (currentIndex == 0) {
+            currentIndex = images.length - 1;
+        } else {
+            currentIndex -= 1;
+        }
+    }
+
+    function galleryForward() {
+        if (currentIndex == images.length - 1) {
+            currentIndex = 0;
+        } else {
+            currentIndex += 1;
+        }
+    }
+</script>
+
+<div class="gallery-container">
+    <div class="gallery-button-container">
+        <button onclick={galleryBack}>&lt;</button>
+        <button onclick={galleryForward}>&gt;</button>
+    </div>
+    <img src={images[currentIndex].src} alt={images[currentIndex].alt}>
+</div>
+
+<style>
+    .gallery-container {
+        position: relative;
+        max-width: var(--media-width);
+        margin: 0 auto;
+        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);border-radius: var(--border-radius);
+    }
+
+    .gallery-container img {
+        width: 100%;
+        object-fit: contain;
+    }
+
+    .gallery-button-container {
+        position: absolute;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+    .gallery-button-container button {
+        background-color: aqua;
+        height: fit-content;
+        cursor: pointer;
+        font-size: 2.4rem;
+        line-height: 2.4rem;
+        padding: 8px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/viewport/footer.svelte b/src/lib/viewport/footer.svelte
index b9a72f4..96e3a03 100644
--- a/src/lib/viewport/footer.svelte
+++ b/src/lib/viewport/footer.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <footer>
-    <div class="background">
+    <div class="background blurred-background">
         <hr>
         <div class="content-container">
             <div class="content-box center-box">
@@ -92,7 +92,6 @@
 
     .background {
         background-color: var(--color-background-highlight);
-        backdrop-filter: blur(var(--blur-radius-background));
         margin-top: 32px;
     }
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c92edde..e48dedd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -310,9 +310,14 @@
             max-width: var(--media-width);
             margin-top: 12px;
             margin-bottom: 12px;
-            /* padding: 8px;
+        }
+
+        .blurred-background {
+            backdrop-filter: blur(var(--blur-radius-background));
+        }
+
+        .blurred-background-hover:hover {
             backdrop-filter: blur(var(--blur-radius-background));
-            border: var(--border-dash-size) var(--border-style) var(--color-highlight); */
         }
 
         .lightyears-text {
@@ -448,15 +453,5 @@
             font-family: var(--font-sans-serif);
             padding: 4px;
         }
-
-        .callout-warning {
-            margin: 12px auto;
-            max-width: var(--width-toc);
-            padding: 12px 20px;
-            box-sizing: border-box;
-            backdrop-filter: blur(var(--blur-radius-background));
-            background-color: var(--color-background-highlight-alt);
-            border: var(--border-dash-size) var(--border-style) var(--color-highlight-alt);
-        }
     }
 </style>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a5791e5..f6c302a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -112,7 +112,7 @@
         </div>
 
         <div>
-            <div class="sidebox-container">
+            <div class="sidebox-container blurred-background">
                 <h4 class="sidebox-header">heads-up</h4>
                 <p>This website works best on Firefox and other Gecko-based browsers! All pages <i>should</i> be responsive and work on mobile.</p>
                 <p>This website is 100% mobile-friendly – or at least trying to be!</p>
@@ -216,7 +216,6 @@
 
     .sidebox-container {
         padding: 8px 16px;
-        backdrop-filter: blur(var(--blur-radius-background));
         border-width: var(--border-dash-size);
         border-style: var(--border-style);
         border-color: var(--color-highlight-alt);
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 8dca22d..31e1bb8 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -79,7 +79,7 @@
         </div>
     {/if}
 
-    <p class="project-info project-status-c-{getStatusCode(project)}">
+    <p class="project-info blurred-background project-status-c-{getStatusCode(project)}">
         {#if project.date}
             {project.date} | 
         {/if}
@@ -134,7 +134,6 @@
         background-color: color-mix(in srgb, var(--color-status) 6%, transparent);
         border: var(--border-style) var(--border-dash-size) var(--color-status);
         padding: 2px 8px;
-        backdrop-filter: blur(var(--blur-radius-background));
 
         font-family: var(--font-mono);
         font-size: 1.0rem;
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
index 5e40c08..bc9ef09 100644
--- a/src/routes/test/+page.svelte
+++ b/src/routes/test/+page.svelte
@@ -1 +1,37 @@
-asdf
\ No newline at end of file
+<script lang="ts">
+    import Content from "$lib/viewport/content.svelte";
+    import ImageGallery, {
+        type GalleryImage,
+    } from "$lib/lists/image-gallery.svelte";
+
+    let i: GalleryImage[] = [
+        {
+            src: "/projects/projectn5/devlog/2025/0523/birds_eye.webp",
+            alt: "gawk",
+            desc: "gawk gawk gawk",
+        },
+        {
+            src: "/blog/robert.webp",
+            alt: "ROOOOBEEERT",
+            desc: "ROOOOBEEERT",
+        },
+        {
+            src: "/blog/2026/0208/sadstick.webp",
+            alt: ":(",
+            desc: ":(",
+        },
+        {
+            src: "/art/drawings/2026/0310.webp",
+            alt: "girl",
+            desc: "girl girl girl girl girlgirlgirl vgirl",
+        },
+    ];
+</script>
+
+<Content>
+    <h1>TEST</h1>
+
+    test page go brr
+
+    <ImageGallery images={i} />
+</Content>