styled new image gallery component; added description and index texts

src/lib/lists/image-gallery.svelte

@@ -31,28 +31,86 @@
     }
 </script>
 
-<div class="gallery-container">
+<div class="gallery-container blurred-background">
     <div class="gallery-button-container">
-        <button onclick={galleryBack}>&lt;</button>
-        <button onclick={galleryForward}>&gt;</button>
+        <button class="gallery-button" onclick={galleryBack}>&lt;</button>
+        <div class="gallery-text-container">
+            <p class="gallery-index">{currentIndex + 1} / {images.length}</p>
+            <p>{@html images[currentIndex].desc}</p>
+        </div>
+        <button class="gallery-button" onclick={galleryForward}>&gt;</button>
+    </div>
+    <div class="gallery-img-container">
+        <img class="gallery-img" src={images[currentIndex].src} alt={images[currentIndex].alt}>
     </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);
+        margin: 12px auto;
+        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        border-radius: var(--border-radius);
     }
 
-    .gallery-container img {
-        width: 100%;
+    .gallery-img-container {
+        width: fit-content;
+        position: relative;
+        margin: 0 auto;
+    }
+
+    .gallery-img {
         object-fit: contain;
+        width: 100%;
+        margin: 0;
+        filter: brightness(100%) saturate(100%);
+        transition: filter var(--duration-animation) var(--anim-curve);
+    }
+
+    .gallery-button-container,
+    .gallery-text-container {
+        opacity: 0%;
+        transition: opacity var(--duration-animation) var(--anim-curve);
+    }
+
+    .gallery-container:hover .gallery-button-container,
+    .gallery-container:hover .gallery-text-container
+    {
+        opacity: 100%;
+    }
+
+    .gallery-container:hover .gallery-img {
+        filter: brightness(50%) saturate(50%);
+    }
+
+    .gallery-text-container {
+        /* position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0; */
+
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin: 8px 32px;
+    }
+
+    .gallery-index {
+        font-family: var(--font-mono);
+        font-weight: 600;
+    }
+    
+    .gallery-text-container p {
+        height: fit-content;
+        font-size: 1.0rem;
+        line-height: 1.4rem;
     }
 
     .gallery-button-container {
+        z-index: 1;
         position: absolute;
         display: flex;
         justify-content: space-between;
@@ -60,12 +118,32 @@
         width: 100%;
         height: 100%;
     }
-    .gallery-button-container button {
-        background-color: aqua;
+
+    .gallery-button {
+        color: var(--color-text);
+        /* background-color: var(--color-background-highlight-alt); */
         height: fit-content;
         cursor: pointer;
         font-size: 2.4rem;
         line-height: 2.4rem;
         padding: 8px;
+
+        border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+
+        transition: background-color var(--duration-animation) var(--anim-curve);
+    }
+    .gallery-button:first-child {
+        border-top-right-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+
+    }
+    .gallery-button:last-child {
+        border-top-left-radius: var(--border-radius);
+        border-bottom-left-radius: var(--border-radius);
+    }
+
+    .gallery-button:hover {
+        background-color: var(--color-highlight-alt);
     }
 </style>

src/routes/test/+page.svelte

@@ -8,7 +8,7 @@
         {
             src: "/projects/projectn5/devlog/2025/0523/birds_eye.webp",
             alt: "gawk",
-            desc: "gawk gawk gawk",
+            desc: "gawk gawk gawk longer text lmao asdf gawk gawk gawk longer text lmao asdf gawk gawk gawk longer text aasdf asalmao asdf gawk gvxcvawk gawk longer text lmao avxvsdf gawk gawk gawk lxvxonger text lmao at lmao asdf gawk gawk gawk longer text lmao asdf gawk gawk gawk longer text aasdf asalmao asdf gawk gvxcvawk gawk longer text lmao avxvsdf gawk gawk gawk lxvxonger text lmao asdf",
         },
         {
             src: "/blog/robert.webp",
@@ -34,4 +34,6 @@
     test page go brr
 
     <ImageGallery images={i} />
+
+    the preceding element was a cool new gallery component
 </Content>