From 5216fe419f15bab38add61084e46d052ad117aa2 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Sat, 18 Oct 2025 22:15:04 +0700
Subject: fix: disable horizontal order for masonry feat: raise width levels
 for columns count in gallery feat: raise width levels for thumbnails
 resolution

---
 internal/glightbox/html_renderer.go | 15 +++++++--------
 static/input.css                    |  4 ++--
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 44fbd4c..9077cc4 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -113,12 +113,12 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item %s grid-item-%s p-1"
 	    data-gallery="gallery-%s" data-title="%s" %s>
 		<picture>
-			<source media="(width < 640px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" />
-			<source media="(width < 1120px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" />
-			<source media="(width < 1600px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" />
-			<source media="(width < 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp" />
-			<source media="(width >= 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp" />
-			<img src="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" />
+			<source media="(width < 800px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" />
+			<source media="(width < 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" />
+			<source media="(width < 3200px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" />
+			<source media="(width < 4000px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp" />
+			<source media="(width >= 4000px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp" />
+			<img src="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" />
 		</picture>
 		<span class="grid-tooltip-text"><p>%s</p></span>
 		<span class="grid-item-index">%d</span>
@@ -152,8 +152,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 	var msnry_%s = new Masonry('.masonry-grid-%s', {
 		itemSelector: '.grid-item-%s',
 		columnWidth: '.grid-sizer-%s',
-		percentPosition: true,
-		horizontalOrder: true
+		percentPosition: true
 	});
 
 	var imgLoad_%s_timer;
diff --git a/static/input.css b/static/input.css
index dc902a4..91c1e05 100644
--- a/static/input.css
+++ b/static/input.css
@@ -435,7 +435,7 @@ a:hover, .linklike:hover {
     }
 }
 
-@container main (width >= 48rem) {
+@container main (width >= 56rem) {
     .grid-item, .grid-sizer {
         width: 25%;
     }
@@ -445,7 +445,7 @@ a:hover, .linklike:hover {
     }
 }
 
-@container main (width >= 64rem) {
+@container main (width >= 96rem) {
     .grid-item, .grid-sizer {
         width: 20%;
     }
-- 
cgit v1.3.1+13