From d13e4516da00f3735383bc99b41f036e82ad846a Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Sun, 12 Apr 2026 12:40:12 +0200
Subject: [PATCH] updated image gallery to use side-to-side view

---
 src/lib/lists/image-gallery.svelte | 64 +++++++++++++++---------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/lib/lists/image-gallery.svelte b/src/lib/lists/image-gallery.svelte
index e2b6b8e..e9f66ed 100644
--- a/src/lib/lists/image-gallery.svelte
+++ b/src/lib/lists/image-gallery.svelte
@@ -31,14 +31,13 @@
     }
 </script>
 
-<div class="gallery-zone">
+<!-- <div class="gallery-zone">
     <div class="gallery-container blurred-background">
         <div class="gallery-button-container">
             <button class="gallery-button" onclick={galleryBack}>&lt;</button>
             <div class="gallery-text-container">
                 <p class="gallery-index">{currentIndex + 1} / {images.length} :: <a href={images[currentIndex].src}>full-size</a></p>
                 <div class="gallery-desc-container">
-                <p>&nbsp;</p> <!-- this element intentionally left blank -->
                     {#each images[currentIndex].desc as d}
                         <p>{@html d}</p>
                     {/each}
@@ -50,78 +49,81 @@
             <img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
         </div>
     </div>
+</div> -->
+
+<div class="gallery-zone blurred-background">
+    <div class="gallery-img-container">
+        <img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
+    </div>
+    <div class="gallery-button-container">
+        <button class="gallery-button" onclick={galleryBack}>&lt;</button>
+        <div class="gallery-text-container">
+            <p class="gallery-index">{currentIndex + 1} / {images.length} :: <a href={images[currentIndex].src}>full-size</a></p>
+            <div class="gallery-desc-container">
+                {#each images[currentIndex].desc as d}
+                    <p>{@html d}</p>
+                {/each}
+            </div>
+        </div>
+        <button class="gallery-button" onclick={galleryForward}>&gt;</button>
+    </div>
 </div>
 
 <style>
     .gallery-zone {
         width: 100%;
-    }
-    
-    .gallery-container {
-        max-width: var(--media-width);
+        display: grid;
+        grid-template-columns: 5fr 4fr;
         margin: 12px auto;
         border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
         border-radius: var(--border-radius);
         overflow: hidden;
+        height: var(--media-height);
     }
 
     .gallery-img-container {
         width: 100%;
-        height: var(--media-height);
         margin: 0 auto;
         display: flex;
         align-items: center;
         justify-content: center;
+        border-right: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
     }
 
     .gallery-img {
         object-fit: contain;
         margin: 0;
         width: 100%;
-        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-zone:hover .gallery-button-container,
-    .gallery-zone:hover .gallery-text-container
-    {
-        opacity: 100%;
-    }
-
-    .gallery-zone:hover .gallery-img {
-        filter: brightness(50%) saturate(80%);
     }
 
     .gallery-text-container {
-        height: 100%;
         width: 100%;
+        height: calc(var(--media-height));
+        /* overflow: hidden; */
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
-        margin: 8px 32px;
+        /* justify-content: space-between; */
+        margin: 0 16px;
+        overflow: scroll;
+        box-sizing: border-box;
     }
 
     .gallery-index {
         font-family: var(--font-mono);
         font-weight: 600;
         font-size: 1.0rem;
+        padding-top: 12px;
     }
     
     .gallery-text-container p, .gallery-index a {
         height: fit-content;
         font-size: 1.0rem;
         line-height: 1.4rem;
-        text-shadow: 0 0 6px black, 0 0 9px black;
     }
 
     .gallery-desc-container {
-        padding-bottom: 12px;
+        padding-bottom: 24px;
+        padding-right: 12px;
         display: flex;
         flex-direction: column;
         gap: 4px;
@@ -131,8 +133,6 @@
     }
 
     .gallery-button-container {
-        z-index: 1;
-        position: absolute;
         display: flex;
         justify-content: space-between;
         align-items: center;