v0.9.4 (#14)v0.9.4

- [feat: uninterruptable
lightbox](https://github.com/SayaAndy/saya-today-web/commit/7a65150afeb67ab83ac2eb34194601033e3d647d)
- [fix: disable horizontal order for
masonry](https://github.com/SayaAndy/saya-today-web/commit/5216fe419f15bab38add61084e46d052ad117aa2)
- fix: image description taking up all the height in glightbox
- feat: raise width levels for columns count in gallery
- [fix: show tooltips over leaflet map
controls](https://github.com/SayaAndy/saya-today-web/commit/7275a7813d6ecaba344e25ddb5b24083e4861a76)
- feat: raise width levels for thumbnails resolution
- [fix: display theme wheel correctly in map
page](https://github.com/SayaAndy/saya-today-web/commit/f87c9ca31061b232e7e3d71b8cb3c5895c9f77dc)
- [fix: stretch map to feel empty space on the
right](https://github.com/SayaAndy/saya-today-web/commit/0aeed432c4fbce4a87b56e4dcb14b25065438300)

4 files changed, 61 insertions, 43 deletions

diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 44fbd4c..aad7984 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -110,19 +110,19 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 			anchorlessCaptionHTML := r.anchorMatchRe.ReplaceAll(captionHTML, []byte("<span class=\"linklike\" $1 $3>$4</span>"))
 
 			elements = append(elements, fmt.Sprintf(`
-	<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>
+	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox grid-item %s grid-item-%s p-1"
+	    data-gallery="gallery" 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>
-	</a>`, img.URL, galleryID, strings.Join(tagClassList, " "), galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, anchorlessCaptionHTML, i+1))
+	</a>`, img.URL, strings.Join(tagClassList, " "), galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, anchorlessCaptionHTML, i+1))
 
 			if glightboxDescId != "" {
 				elements = append(elements, fmt.Sprintf(`
@@ -144,16 +144,10 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 
 		w.WriteString(fmt.Sprintf(`
 <script>
-	var lightbox_%s = GLightbox({
-		selector: '.glightbox-%s',
-		moreLength: 0
-	});
-
 	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;
@@ -171,7 +165,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 		initMasonryLayout_%s = null;
 		imgLoad_%s = null;
 	});
-</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
 	}
 
 	return ast.WalkContinue, nil
diff --git a/static/input.css b/static/input.css
index dc902a4..c308796 100644
--- a/static/input.css
+++ b/static/input.css
@@ -377,7 +377,7 @@ a:hover, .linklike:hover {
     margin-top: 0.25rem;
     border-radius: 0.5rem;
     position: absolute;
-    z-index: 401;
+    z-index: 1001;
 }
 
 .grid-tooltip:hover .grid-tooltip-text {
@@ -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%;
     }
@@ -495,6 +495,7 @@ a:hover, .linklike:hover {
 .gslide-description {
     flex-grow: 0;
     flex-shrink: 1;
+    flex-basis: 0;
 }
 
 .map-container .leaflet-container {
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index c9c9e91..77164fa 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -46,6 +46,11 @@
             {{ .MapLocationY }},
             {{ .MapLocationAreaMeters }}
         ), 1000);
+
+        var lightbox = GLightbox({
+            selector: '.glightbox',
+            moreLength: 0
+        });
     </script>
 {{- end }}
 </div>
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 83078c9..686b46b 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -38,6 +38,10 @@
 
     <script>
         const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+        function convertRemToPixels(rem) {    
+            return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        }
     </script>
 
     <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5rem] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[8dvh]">
@@ -61,10 +65,11 @@
             <div class="theme-icon" data-theme="lettuce"></div>
             <div class="theme-icon" data-theme="night"></div>
             <div class="theme-icon" data-theme="ram"></div>
+            <div class="theme-pin"></div>
         </div>
     </div>
 
-    <div id="map-container" class="bg-background-dark flex z-10 w-[95dvw] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[92dvh]"></div>
+    <div id="map-container" class="bg-background-dark flex z-10 w-[calc(100dvw-5rem)] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[92dvh]"></div>
 
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
@@ -74,6 +79,7 @@
         const themeWheel = document.getElementById('theme-wheel');
         const themeButton = document.getElementById('theme-button');
         const themeIcons = document.querySelectorAll('.theme-icon');
+        const themeWheelRadius = convertRemToPixels(6);
 
         themeIcons.forEach(icon => {
             if (icon.getAttribute('data-theme') == savedTheme) {
@@ -93,49 +99,61 @@
         }
 
         function positionThemeIcons() {
-            const icons = themeWheel.querySelectorAll('.theme-icon');
-            const iconCount = icons.length;
-            const vmax = calculateVmax(1);
-            const wheelRadius = 7.5*vmax; // Radius of the wheel
-            const iconRadius = 4*vmax; // Distance from center to place icons
-            const iconSize = 3*vmax; // Half of icon size for centering
-
-            icons.forEach((icon, index) => {
-                const angle = (index * 360 / iconCount) - 90;
-                const angleRad = (angle * Math.PI) / 180;
+            const sliceAngle = 360 / themeIcons.length;
 
-                const x = Math.cos(angleRad) * iconRadius + wheelRadius - iconSize;
-                const y = Math.sin(angleRad) * iconRadius + wheelRadius - iconSize;
+            themeIcons.forEach((icon, index) => {
+                const startAngle = index * sliceAngle;
+                const endAngle = (index + 1) * sliceAngle;
 
-                icon.style.left = x + 'px';
-                icon.style.top = y + 'px';
+                const clipPath = createSliceClipPath(startAngle, endAngle, themeWheelRadius);
+                icon.style.clipPath = clipPath;
             });
         }
 
+        function createSliceClipPath(startAngle, endAngle, radius) {
+            const centerX = radius;
+            const centerY = radius;
+
+            let points = `${centerX}px ${centerY}px`;
+
+            const segments = Math.max(2, Math.ceil(Math.abs(endAngle - startAngle) / 5));
+            const angleStep = (endAngle - startAngle) / segments;
+
+            for (let i = 0; i <= segments; i++) {
+                const angle = ((startAngle + angleStep * i - 90) * Math.PI) / 180;
+                const x = centerX + Math.cos(angle) * radius;
+                const y = centerY + Math.sin(angle) * radius;
+                points += `, ${x}px ${y}px`;
+            }
+
+            points += `, ${centerX}px ${centerY}px`;
+            
+            return `polygon(${points})`;
+        }
+
         function positionThemeWheel() {
             const buttonRect = themeButton.getBoundingClientRect();
             const buttonCenterX = buttonRect.left + buttonRect.width / 2;
             const buttonCenterY = buttonRect.top + buttonRect.height / 2;
 
-            const wheelRadius = calculateVmax(7.5);
-            const margin = calculateVmax(1);
+            const margin = 0;
 
-            let wheelX = buttonCenterX - wheelRadius;
-            let wheelY = buttonCenterY - wheelRadius;
+            let wheelX = buttonCenterX - themeWheelRadius;
+            let wheelY = buttonCenterY - themeWheelRadius;
 
             const viewportWidth = window.innerWidth;
             const viewportHeight = window.innerHeight;
 
             if (wheelX < margin) {
                 wheelX = margin;
-            } else if (wheelX + (wheelRadius * 2) > viewportWidth - margin) {
-                wheelX = viewportWidth - (wheelRadius * 2) - margin;
+            } else if (wheelX + (themeWheelRadius * 2) > viewportWidth - margin) {
+                wheelX = viewportWidth - (themeWheelRadius * 2) - margin;
             }
 
             if (wheelY < margin) {
                 wheelY = margin;
-            } else if (wheelY + (wheelRadius * 2) > viewportHeight - margin) {
-                wheelY = viewportHeight - (wheelRadius * 2) - margin;
+            } else if (wheelY + (themeWheelRadius * 2) > viewportHeight - margin) {
+                wheelY = viewportHeight - (themeWheelRadius * 2) - margin;
             }
 
             themeWheel.style.left = wheelX + 'px';