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

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>