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>