From 6d1a38775d4b081dab05d14ade1347ffef639b3f Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Mon, 6 Apr 2026 19:23:22 +0200
Subject: [PATCH] styled new image gallery component; added description and
 index texts

---
 src/lib/lists/image-gallery.svelte | 98 +++++++++++++++++++++++++++---
 src/routes/test/+page.svelte       |  4 +-
 2 files changed, 91 insertions(+), 11 deletions(-)

diff --git a/src/lib/lists/image-gallery.svelte b/src/lib/lists/image-gallery.svelte
index 12d5a94..1973c23 100644
--- a/src/lib/lists/image-gallery.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
index bc9ef09..601cfdd 100644
--- a/src/routes/test/+page.svelte
+++ b/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>