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

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>

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

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