added image gallery component; moved blurred background to separate CSS class

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;

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;

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);
     }
 

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 {

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 {

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 {

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);

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>

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;
     }
 

src/lib/viewport/water-background.svelte

@@ -0,0 +1,19 @@
+<div class="waters"></div>
+
+<style>
+    .waters {
+        --color-waters: #242424;
+
+        position: fixed;
+        z-index: -99;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: var(--color-waters);
+        mask-image: url('/bremen-waters-white.svg');
+        mask-position: center;
+        background-position: center;
+        background-attachment: fixed;
+    }
+</style>

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script>
     import Header from "$lib/viewport/header.svelte";
     import Footer from "$lib/viewport/footer.svelte";
+    import WaterBackground from "$lib/viewport/water-background.svelte";
 
 	let { children } = $props();
 </script>
@@ -9,7 +10,7 @@
     <meta name="robots" content="noai, noimageai">
 </svelte:head>
 
-<div class="waters"></div>
+<WaterBackground />
 <div class="all-content-container">
     <Header />
 
@@ -113,8 +114,6 @@
             --color-background-highlight-hover: color-mix(in srgb, var(--color-highlight) 60%, transparent);
             --color-background-highlight-hover-alt: color-mix(in srgb, var(--color-highlight-alt) 66%, transparent);
             --color-background-highlight-hover-dark: color-mix(in srgb, var(--color-highlight-dark) 60%, transparent);
-            
-            --color-waters: #242424;
 
             --color-link-unvisited: #c2e8ff;
             --color-link-visited: #ffd7f0;
@@ -197,20 +196,6 @@
             /* max-width: 100%; */
         }
 
-        .waters {
-            position: fixed;
-            z-index: -99;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 100%;
-            background-color: var(--color-waters);
-            mask-image: url('/bremen-waters-white.svg');
-            mask-position: center;
-            background-position: center;
-            background-attachment: fixed;
-        }
-
         p, span, li, pre, a {
             color: var(--color-text);
             font-size: var(--font-size-sans-serif);
@@ -325,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 {
@@ -463,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>

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);

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;

src/routes/test/+page.svelte

@@ -0,0 +1,37 @@
+<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>