From 5cfd093910fd51c2e5399533dd9cbdf64e9d950f Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Sun, 12 Apr 2026 12:44:27 +0200
Subject: [PATCH] image gallery now stacks vertically on mobile

---
 src/lib/lists/image-gallery.svelte | 40 ++++++++++++++----------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/lib/lists/image-gallery.svelte b/src/lib/lists/image-gallery.svelte
index e9f66ed..375f8e0 100644
--- a/src/lib/lists/image-gallery.svelte
+++ b/src/lib/lists/image-gallery.svelte
@@ -31,26 +31,7 @@
     }
 </script>
 
-<!-- <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">
-                    {#each images[currentIndex].desc as d}
-                        <p>{@html d}</p>
-                    {/each}
-                </div>
-            </div>
-            <button class="gallery-button" onclick={galleryForward}>&gt;</button>
-        </div>
-        <div class="gallery-img-container">
-            <img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
-        </div>
-    </div>
-</div> -->
-
+<!--  TODO on mobile, put buttons between text and image -->
 <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}>
@@ -98,7 +79,7 @@
 
     .gallery-text-container {
         width: 100%;
-        height: calc(var(--media-height));
+        height: var(--media-height);
         /* overflow: hidden; */
         display: flex;
         flex-direction: column;
@@ -167,4 +148,21 @@
     .gallery-button:hover {
         background-color: var(--color-background-highlight-hover-alt);
     }
+
+    @media screen and (max-width: 700px) {
+        .gallery-zone {
+            display: flex;
+            flex-direction: column;
+            height: initial;
+        }
+
+        .gallery-text-container {
+            height: initial;
+        }
+
+        .gallery-img-container {
+            border-right: none;
+            border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        }
+    }
 </style>
\ No newline at end of file