From 454e2f3cd84b6c0b02a0c2936a574d3d9c35c5a1 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Wed, 15 Oct 2025 02:43:04 +0700
Subject: feat: start switching to absolute length units in design

---
 internal/lightgallery/html_renderer.go |  8 ++++----
 internal/tailwind/transformer.go       | 26 +++++++++++++-------------
 2 files changed, 17 insertions(+), 17 deletions(-)

(limited to 'internal')

diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
index 8e184e0..f02b953 100644
--- a/internal/lightgallery/html_renderer.go
+++ b/internal/lightgallery/html_renderer.go
@@ -51,9 +51,9 @@ func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source [
 
 		w.WriteString(fmt.Sprintf(`
 <div class="justify-content-center display-block m-2">
-	<hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%%] ml-auto mr-auto">
+	<hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-[80%%] ml-auto mr-auto">
 	<div id="lg-%s" class="inline-gallery-container relative ml-auto mr-auto"></div>
-	<hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%%] ml-auto mr-auto">
+	<hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-[80%%] ml-auto mr-auto">
 </div>`, galleryID))
 
 		var dynamicElements []string
@@ -84,8 +84,8 @@ func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source [
 				thumb:
 					"https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp",
 				subHtml: `+"`"+`<div class="flex flex-row light-gallery-captions">
-								<p class="grow !text-[1vmax]/[1] text-left font-spectral text-main-dark">%s</p>
-								<p class="!text-[1vmax]/[1] text-right font-spectral text-secondary">%s</p>
+								<p class="grow !text-base/[1] text-left font-spectral text-main-dark">%s</p>
+								<p class="!text-base/[1] text-right font-spectral text-secondary">%s</p>
 							</div>`+"`"+`
 			}`, img.URL, img.URL, util.EscapeHTML(captionHTML), imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, captionHTML, dayDate.Format("2006-01-02 15:04:05 -07:00")))
 		}
diff --git a/internal/tailwind/transformer.go b/internal/tailwind/transformer.go
index 2f052b9..4057ea4 100644
--- a/internal/tailwind/transformer.go
+++ b/internal/tailwind/transformer.go
@@ -17,44 +17,44 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader,
 		switch node := n.(type) {
 		case *ast.Heading:
 			classes := map[int]string{
-				1: "font-patua text-[2.5vmax] font-bold text-main-dark mb-[1.2vmin] tracking-[0.04vmin]",
-				2: "font-spectral text-[2vmax] font-bold text-main-dark mb-[0.8vmin] tracking-[0.04vmin]",
-				3: "font-spectral text-[1.5vmax] font-medium text-main-dark mb-[0.6vmin] tracking-[0.04vmin]",
-				4: "font-spectral text-[1.2vmax] font-medium text-main-medium mb-[0.4vmin] tracking-[0.04vmin]",
-				5: "font-spectral text-[1vmax] font-medium text-main-medium mb-[0.4vmin] italic tracking-[0.04vmin]",
-				6: "font-spectral text-[1vmax] font-medium text-secondary mb-[0.4vmin]",
+				1: "font-patua text-4xl font-bold text-main-dark mb-6 tracking-[.0125rem]",
+				2: "font-spectral text-3xl font-bold text-main-dark mb-2 tracking-[.0125rem]",
+				3: "font-spectral text-2xl font-medium text-main-dark mb-1.5 tracking-[.0125rem]",
+				4: "font-spectral text-xl font-medium text-main-medium mb-1 tracking-[.0125rem]",
+				5: "font-spectral text-base font-medium text-main-medium mb-1 italic tracking-[.0125rem]",
+				6: "font-spectral text-base font-medium text-secondary mb-1",
 			}
 			if class, ok := classes[node.Level]; ok {
 				node.SetAttribute([]byte("class"), []byte(class))
 			}
 
 		case *ast.Paragraph:
-			node.SetAttribute([]byte("class"), []byte("text-[1vmax]/[2] font-spectral tracking-[0.04vmin] -indent-[2vmax] ml-[2vmax] mb-[1.6vmin]"))
+			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-spectral tracking-[.0125rem] -indent-8 ml-8 mb-8"))
 
 		case *ast.List:
 			if node.IsOrdered() {
-				node.SetAttribute([]byte("class"), []byte("list-decimal list-inside space-y-[0.8vmin] mb-[1.6vmin] pl-[2vmax]"))
+				node.SetAttribute([]byte("class"), []byte("list-decimal list-inside space-y-2 mb-8 pl-8"))
 			} else {
-				node.SetAttribute([]byte("class"), []byte("list-disc list-inside space-y-[0.8vmin] mb-[1.6vmin] pl-[2vmax]"))
+				node.SetAttribute([]byte("class"), []byte("list-disc list-inside space-y-2 mb-8 pl-8"))
 			}
 
 		case *ast.ListItem:
-			node.SetAttribute([]byte("class"), []byte("text-[1vmax]/[2] font-spectral tracking-[0.04vmin]"))
+			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-spectral tracking-[.0125rem]"))
 
 		case *ast.Blockquote:
-			node.SetAttribute([]byte("class"), []byte("border-l-[0.4vmin] border-main-medium bg-background-dark p-[0.8vmin] mb-[0.8vmin] italic"))
+			node.SetAttribute([]byte("class"), []byte("border-l-1 border-main-medium bg-background-dark p-2 mb-2 italic"))
 
 		case *ast.CodeSpan:
 			node.SetAttribute([]byte("class"), []byte("bg-background-dark"))
 
 		case *ast.CodeBlock, *ast.FencedCodeBlock:
-			node.SetAttribute([]byte("class"), []byte("bg-background-dark p-[0.8vmin] rounded-lg overflow-x-auto mb-[1.6vmin]"))
+			node.SetAttribute([]byte("class"), []byte("bg-background-dark p-2 rounded-lg overflow-x-auto mb-8"))
 
 		case *ast.Link:
 			node.SetAttribute([]byte("class"), []byte("text-secondary hover:text-main-dark underline"))
 
 		case *ast.Image:
-			node.SetAttribute([]byte("class"), []byte("max-w-full h-auto rounded-lg shadow-lg mb-[1.6vmin]"))
+			node.SetAttribute([]byte("class"), []byte("max-w-full h-auto rounded-lg shadow-lg mb-8"))
 
 		case *ast.Emphasis:
 			switch node.Level {
-- 
cgit v1.3.1+13


From 739a4af71187e82fd58956e5ad36f0baefddf3c4 Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Wed, 15 Oct 2025 18:14:59 +0700
Subject: feat: improve measurements in layout

---
 internal/lightgallery/html_renderer.go    |  6 ++--
 internal/tailwind/transformer.go          | 24 +++++++-------
 views/index.html                          |  6 ++--
 views/layouts/general-page.html           |  8 ++---
 views/pages/blog-catalogue.html           | 26 ++++++++--------
 views/pages/blog-page.html                | 10 +++---
 views/pages/global-map.html               |  2 +-
 views/pages/home-page.html                | 52 +++++++++++++++----------------
 views/partials/blog-page-like-button.html |  4 +--
 views/partials/catalogue-blog-cards.html  | 12 +++----
 views/partials/general-page-footer.html   |  2 +-
 views/partials/general-page-header.html   |  8 ++---
 12 files changed, 80 insertions(+), 80 deletions(-)

(limited to 'internal')

diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
index f02b953..c2f785e 100644
--- a/internal/lightgallery/html_renderer.go
+++ b/internal/lightgallery/html_renderer.go
@@ -50,10 +50,10 @@ func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source [
 		galleryID := generateDivId(8)
 
 		w.WriteString(fmt.Sprintf(`
-<div class="justify-content-center display-block m-2">
-	<hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-[80%%] ml-auto mr-auto">
+<div class="justify-content-center display-block m-1">
+	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
 	<div id="lg-%s" class="inline-gallery-container relative ml-auto mr-auto"></div>
-	<hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-[80%%] ml-auto mr-auto">
+	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
 </div>`, galleryID))
 
 		var dynamicElements []string
diff --git a/internal/tailwind/transformer.go b/internal/tailwind/transformer.go
index 4057ea4..f932533 100644
--- a/internal/tailwind/transformer.go
+++ b/internal/tailwind/transformer.go
@@ -17,44 +17,44 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader,
 		switch node := n.(type) {
 		case *ast.Heading:
 			classes := map[int]string{
-				1: "font-patua text-4xl font-bold text-main-dark mb-6 tracking-[.0125rem]",
-				2: "font-spectral text-3xl font-bold text-main-dark mb-2 tracking-[.0125rem]",
-				3: "font-spectral text-2xl font-medium text-main-dark mb-1.5 tracking-[.0125rem]",
-				4: "font-spectral text-xl font-medium text-main-medium mb-1 tracking-[.0125rem]",
-				5: "font-spectral text-base font-medium text-main-medium mb-1 italic tracking-[.0125rem]",
-				6: "font-spectral text-base font-medium text-secondary mb-1",
+				1: "font-patua text-4xl font-bold text-main-dark mb-3 tracking-[.0125rem]",
+				2: "font-spectral text-3xl font-bold text-main-dark mb-1 tracking-[.0125rem]",
+				3: "font-spectral text-2xl font-medium text-main-dark mb-0.8 tracking-[.0125rem]",
+				4: "font-spectral text-xl font-medium text-main-medium mb-0.5 tracking-[.0125rem]",
+				5: "font-spectral text-base font-medium text-main-medium mb-0.5 italic tracking-[.0125rem]",
+				6: "font-spectral text-base font-medium text-secondary mb-0.5",
 			}
 			if class, ok := classes[node.Level]; ok {
 				node.SetAttribute([]byte("class"), []byte(class))
 			}
 
 		case *ast.Paragraph:
-			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-spectral tracking-[.0125rem] -indent-8 ml-8 mb-8"))
+			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-spectral tracking-[.0125rem] -indent-8 ml-4 mb-8"))
 
 		case *ast.List:
 			if node.IsOrdered() {
-				node.SetAttribute([]byte("class"), []byte("list-decimal list-inside space-y-2 mb-8 pl-8"))
+				node.SetAttribute([]byte("class"), []byte("list-decimal list-inside space-y-2 mb-4 pl-8"))
 			} else {
-				node.SetAttribute([]byte("class"), []byte("list-disc list-inside space-y-2 mb-8 pl-8"))
+				node.SetAttribute([]byte("class"), []byte("list-disc list-inside space-y-2 mb-4 pl-8"))
 			}
 
 		case *ast.ListItem:
 			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-spectral tracking-[.0125rem]"))
 
 		case *ast.Blockquote:
-			node.SetAttribute([]byte("class"), []byte("border-l-1 border-main-medium bg-background-dark p-2 mb-2 italic"))
+			node.SetAttribute([]byte("class"), []byte("border-l-2 border-main-medium bg-background-dark p-1 mb-2 italic"))
 
 		case *ast.CodeSpan:
 			node.SetAttribute([]byte("class"), []byte("bg-background-dark"))
 
 		case *ast.CodeBlock, *ast.FencedCodeBlock:
-			node.SetAttribute([]byte("class"), []byte("bg-background-dark p-2 rounded-lg overflow-x-auto mb-8"))
+			node.SetAttribute([]byte("class"), []byte("bg-background-dark p-1 rounded-lg overflow-x-auto mb-4"))
 
 		case *ast.Link:
 			node.SetAttribute([]byte("class"), []byte("text-secondary hover:text-main-dark underline"))
 
 		case *ast.Image:
-			node.SetAttribute([]byte("class"), []byte("max-w-full h-auto rounded-lg shadow-lg mb-8"))
+			node.SetAttribute([]byte("class"), []byte("max-w-full h-auto rounded-lg shadow-lg mb-4"))
 
 		case *ast.Emphasis:
 			switch node.Level {
diff --git a/views/index.html b/views/index.html
index 666b9c6..c81d4b7 100644
--- a/views/index.html
+++ b/views/index.html
@@ -102,14 +102,14 @@
         switchTheme(savedTheme);
     </script>
 
-    <div class="menu-outer-body p-4 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70">
-        <p class="font-patua mx-auto text-4xl mt-2 mb-2">saya.today</p>
+    <div class="menu-outer-body p-2 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70">
+        <p class="font-patua mx-auto text-4xl mt-1 mb-2">saya.today</p>
         <div class="menu-inner-body grow bg-background-light flex flex-adaptive mx-auto opacity-100">
             {{- range .AvailableLanguages }}
             <img onclick="location.href='/{{ .Name }}';" class="object-scale-down cursor-pointer flex-1 rounded-[20%] language-icon mx-auto my-auto relative" src="{{ .Flag }}" alt="{{ .Alt }}">
             {{- end }}
         </div>
-        <p class="font-spectral mx-auto text-2xl text-secondary mt-2 mb-2">Choose your language</p>
+        <p class="font-spectral mx-auto text-2xl text-secondary mt-1 mb-2">Choose your language</p>
     </div>
 
     <script>
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index cd8921a..4a63569 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -180,9 +180,9 @@
     </div>
 
     <div class="bg-background-dark flex z-10 ar-lt-1.1:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-1.1:ml-[5vw] ar-lt-0.4:ml-0">
-        <div class="pl-[0.5vw] bg-background-dark border-r-1 border-dashed border-main-dark"></div>
+        <div class="pl-[0.5vw] bg-background-dark border-r-2 border-dashed border-main-dark"></div>
 
-        <div class="ar-gt-1.1:w-[100vh] flex flex-col bg-background-dark relative pt-8 ml-8 pr-8">
+        <div class="ar-gt-1.1:w-[100vh] flex flex-col bg-background-dark relative pt-4 ml-8 pr-4">
             <div id="general-page-header" class="flex flex-col"
                 hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
@@ -195,7 +195,7 @@
             </div>
             <div id="general-page-body-trigger" hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-body" hx-swap="innerHTML"></div>
 
-            <div id="general-page-footer" class="flex flex-row mt-2 mb-1"
+            <div id="general-page-footer" class="flex flex-row my-1"
                 hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
             <div id="general-page-footer-trigger" hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-footer" hx-swap="innerHTML"></div>
@@ -203,7 +203,7 @@
             <hr class="border-t-4 border-dotted border-main-dark mb-2">
         </div>
 
-        <div class="pr-[0.5vw] bg-background-dark shadow-2xl border-l-1 border-dotted border-main-dark"></div>
+        <div class="pr-[0.5vw] bg-background-dark shadow-2xl border-l-2 border-dotted border-main-dark"></div>
     </div>
 
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index 2bb4034..d567711 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -6,42 +6,42 @@
             <fieldset>
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.TagsHeader }}</legend>
                 <div class="flex flex-col ar-lt-1.1:grid grid-cols-5 grid-flow-row-dense">
-                    <div class="m-1">
+                    <div class="m-0.5">
                         <label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();"> {{ .L.BlogSearch.ChooseAllTags }}</label>
                     </div>
                     {{- range .Tags }}
-                    <div class="m-1">
+                    <div class="m-0.5">
                         <label><input type="checkbox" id="tag{{ .Name }}Checkbox" name="tags[]" value="{{ .Name }}" onclick="contextAll();" {{ if contains $.QueryTags .Name }}checked{{ end }}> {{ .Name }}  <span class="text-secondary italic">{{ .Count }}</span></label>
                     </div>
                     {{- end }}
                 </div>
             </fieldset>
-            <fieldset class="mt-2">
+            <fieldset class="mt-1">
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.OrderByHeader }}</legend>
                 <div class="flex flex-col ar-lt-1.1:grid grid-cols-3 grid-rows-2 grid-flow-col">
-                    <div class="m-1">
+                    <div class="m-0.5">
                         <label><input type="radio" id="sortTitleAsc" name="sort" value="titleAsc" {{ if eq .QuerySort "titleAsc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-a-z"></i></label>
                     </div>
-                    <div class="m-1">
+                    <div class="m-0.5">
                         <label><input type="radio" id="sortTitleDesc" name="sort" value="titleDesc" {{ if eq .QuerySort "titleDesc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-z-a"></i></label>
                     </div>
-                    <div class="m-1">
+                    <div class="m-0.5">
                         <label><input type="radio" id="sortActionDateAsc" name="sort" value="actionDateAsc" {{ if eq .QuerySort "actionDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label>
                     </div>
-                    <div class="m-1">
+                    <div class="m-0.5">
                         <label><input type="radio" id="sortActionDateDesc" name="sort" value="actionDateDesc" {{ if eq .QuerySort "actionDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label>
                     </div>
-                    <div class="m-1">
+                    <div class="m-0.5">
                         <label><input type="radio" id="sortPublicationDateAsc" name="sort" value="publicationDateAsc" {{ if eq .QuerySort "publicationDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label>
                     </div>
-                    <div class="m-1">
+                    <div class="m-0.5">
                         <label><input type="radio" id="sortPublicationDateDesc" name="sort" value="publicationDateDesc" {{ if eq .QuerySort "publicationDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label>
                     </div>
                 </div>
             </fieldset>
         </div>
-        <hr class="border-t-1 border-dotted border-main-dark my-1">
-        <div class="flex flex-row grow bg-background-light my-4 p-1 rounded-1 justify-items-center">
+        <hr class="border-t-2 border-dotted border-main-dark my-0.5">
+        <div class="flex flex-row grow bg-background-light my-2 p-0.5 rounded-1 justify-items-center">
             <i onclick="defaultSearchParams(); cleanHrefParams();" class="fas fa-rotate-left flex-1 text-center text-2xl hover:bg-background-dark cursor-pointer transition-colors duration-300"></i>
             <div class="w-1 bg-background-dark grow-0"></div>
             <button class="flex-1" type="submit">
@@ -50,10 +50,10 @@
         </div>
     </form>
 
-    <div class="w-[0.5vh] border-r-[0.3vh] border-dotted border-main-dark bg-background-dark"></div>
+    <div class="w-[0.5vh] border-r-2 border-dotted border-main-dark bg-background-dark"></div>
 
     <div hx-get="/api/v1/blog-search" hx-vals='js:{lang: "{{ .Lang }}", tz: clientTimeZone}' hx-target="this" hx-swap="innerHTML" hx-trigger="load" hx-include=".tags-list"
-        class="blog-cards grow flex flex-col overflow-y-auto bg-background-light inset-shadow p-12">
+        class="blog-cards grow flex flex-col overflow-y-auto bg-background-light inset-shadow p-6">
         Loading...
     </div>
 </div>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index cc00e1a..78a4b7f 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -16,12 +16,12 @@
 {{ end }}
 
 {{ define "body" }}
-<div class="bg-background-light flex flex-col inset-shadow p-12 overflow-y-auto">
+<div class="bg-background-light flex flex-col inset-shadow px-8 py-4 overflow-y-auto">
     {{ .ParsedMarkdown }}
 {{- if .MapLocationX }}
-    <hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-[80%] ml-auto mr-auto">
-    <div id="map-container" class="relative p-2 flex-none ml-auto mr-auto w-[60%] ar-lt-1.1:w-[80%] h-[40vh] ar-lt-1.1:h-[30vh]"></div>
-    <hr class="border-t-4 border-dotted border-main-dark mt-2 mb-2 w-[80%] ml-auto mr-auto">
+    <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
+    <div id="map-container" class="relative p-1 flex-none ml-auto mr-auto w-[60%] ar-lt-1.1:w-[80%] h-[40vh] ar-lt-1.1:h-[30vh]"></div>
+    <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
 
     <script>
         function initLocationMap(id, x, y, relativeErrorMeters = 0) {
@@ -93,4 +93,4 @@
         galleryResizeTimeout = null;
     });
 </script>
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 330790b..7d730ea 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -242,7 +242,7 @@
                 title: title,
             }).bindPopup(`
                     <div class="flex flex-row justify-center justify-items-center">
-                        <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-12 h-12 mr-2" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/${thumbnail}.webp">
+                        <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-12 h-12 mr-1" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/${thumbnail}.webp">
                         <span><b><a href="${link}">${title}</a></b><br><a href="https://www.openstreetmap.org/#map=13/${x}/${y}">${x}, ${y}</a></span>
                     </div>`);
 
diff --git a/views/pages/home-page.html b/views/pages/home-page.html
index 30f5ad0..9db6d23 100644
--- a/views/pages/home-page.html
+++ b/views/pages/home-page.html
@@ -1,52 +1,52 @@
 {{ define "body" }}
-<div class="bg-background-light flex flex-row ar-lt-0.6:flex-col w-full h-full inset-shadow overflow-y-auto text-base/[2] tracking-[.0125rem]">
-    <div class="ar-gt-0.6:flex-3/5 justify-center content-start p-[5%]">
+<div class="bg-background-light flex flex-row ar-lt-0.6:flex-col w-full h-full inset-shadow overflow-y-auto text-base/[2] tracking-wide">
+    <div class="ar-gt-0.6:flex-3/5 justify-center content-start p-8">
         <div class="flex flex-col justify-start items-start bg-background-dark mb-8">
-            <p class="text-5xl/[2] tracking-[1px] uppercase w-full font-spectral italic text-left
+            <p class="text-5xl/[2] ml-4 tracking-widest uppercase w-full font-spectral italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.Hymn1 }}</p>
-            <hr class="w-full border-t-1 border-dotted border-main-dark mb-2">
-            <p class="text-3xl/[2] -indent-8 ml-8 p-1.5">{{ .L.HomePage.Hymn2 }}</p>
-            <p class="text-3xl/[2] -indent-8 ml-8 p-1.5">{{ .L.HomePage.Hymn3 }}</p>
-            <p class="text-3xl/[2] -indent-8 ml-8 p-1.5">{{ .L.HomePage.Hymn4 }}</p>
+            <hr class="w-full border-t-2 border-dotted border-main-dark mb-1">
+            <p class="text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn2 }}</p>
+            <p class="text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn3 }}</p>
+            <p class="text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn4 }}</p>
         </div>
 
         <div class="flex flex-col justify-center items-center">
-            <p class="text-3xl w-full font-spectral italic text-left
+            <p class="text-3xl p-1 w-full font-spectral italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.DidYouKnowThat }}</p>
-            <hr class="w-full border-t-1 border-dotted border-main-dark mb-2">
+            <hr class="w-full border-t-2 border-dotted border-main-dark mb-1">
             <ul class="w-full text-left list-[circle]">
-                <li class="ml-8 mb-2">{{ index .FunFacts 0 }}</li>
-                <li class="ml-8 mb-2">{{ index .FunFacts 1 }}</li>
-                <li class="ml-8">{{ index .FunFacts 2 }}</li>
+                <li class="ml-4 mb-1">{{ index .FunFacts 0 }}</li>
+                <li class="ml-4 mb-1">{{ index .FunFacts 1 }}</li>
+                <li class="ml-4">{{ index .FunFacts 2 }}</li>
             </ul>
         </div>
     </div>
 
-    <div class="ar-gt-0.6:flex-2/5 justify-center content-start p-[5%]">
-        <div class="flex flex-col justify-center items-start mb-8">
-            <p class="text-3xl w-full font-spectral italic text-left
+    <div class="ar-gt-0.6:flex-2/5 justify-center content-start p-8">
+        <div class="flex flex-col justify-center items-start mb-4">
+            <p class="text-3xl p-1 w-full font-spectral italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.Contacts }}</p>
             <a href="https://t.me/EarlInisMona">
-                <i class="fa-brands fa-telegram w-4 h-4 mr-1.5"></i>
+                <i class="fa-brands fa-telegram w-4 h-4 mr-1"></i>
                 <span class="font-bold">Telegram:</span>
                 <span>@EarlInisMona</span>
             </a>
             <a href="https://discord.com/users/356057270951346176">
-                <i class="fa-brands fa-discord w-4 h-4 mr-1.5"></i>
+                <i class="fa-brands fa-discord w-4 h-4 mr-1"></i>
                 <span class="font-bold">Discord:</span>
                 <span>montferrat</span>
             </a>
             <a href="mailto:saya.andy@posteo.com">
-                <i class="fas fa-envelope w-4 h-4 mr-1.5"></i>
+                <i class="fas fa-envelope w-4 h-4 mr-1"></i>
                 <span class="font-bold">E-mail:</span>
                 <span>saya.andy@posteo.com</span>
             </a>
         </div>
 
-        <div class="flex relative aspect-square justify-center content-center mb-8">
+        <div class="flex relative aspect-square justify-center content-center mb-4">
             {{- range $_ := iterate .FilledHeartCount }}
                 <div class="home-page-heart z-50">♥</div>
             {{- end }}
@@ -54,7 +54,7 @@
                 <div class="home-page-heart z-50">♡</div>
             {{- end }}
             <img src="https://f003.backblazeb2.com/file/sayana-static/home-page-gifs/{{ .GifName }}"
-                class="home-page-gif z-49 -rotate-12 max-w-[70%] max-h-[70%] border-2 border-(--background-dark-color) border-inset">
+                class="home-page-gif z-49 -rotate-12 max-w-[70%] max-h-[70%] border-4 border-(--background-dark-color) border-inset">
         </div>
 
         <script>
@@ -100,20 +100,20 @@
         </script>
 
         <div class="flex flex-col justify-center items-center">
-            <p class="text-3xl w-full font-spectral italic text-left
+            <p class="text-3xl p-1 w-full font-spectral italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.SidebarDescription }}</p>
-            <hr class="w-full border-t-1 border-dotted border-main-dark mb-2">
+            <hr class="w-full border-t-2 border-dotted border-main-dark mb-1">
             <div class="w-full grid grid-cols-[1fr_4fr] content-center items-center
                 [&>*:nth-child(4n+2)]:bg-(--background-medium-color) [&>*:nth-child(4n+3)]:bg-(--background-medium-color)" style="container-type: inline-size;">
                 <i class="fas fa-home w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
-                <p class="p-1.5">{{ .L.HomePage.HomePageDescription }}</p>
+                <p class="p-1">{{ .L.HomePage.HomePageDescription }}</p>
                 <i class="fas fa-search w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
-                <p class="p-1.5">{{ .L.HomePage.BlogSearchDescription }}</p>
+                <p class="p-1">{{ .L.HomePage.BlogSearchDescription }}</p>
                 <i class="fas fa-map w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
-                <p class="p-1.5">{{ .L.HomePage.MarkerMapDescription }}</p>
+                <p class="p-1">{{ .L.HomePage.MarkerMapDescription }}</p>
                 <i class="fas fa-swatchbook w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
-                <p class="p-1.5">{{ .L.HomePage.ThemeSwitchDescription }}</p>
+                <p class="p-1">{{ .L.HomePage.ThemeSwitchDescription }}</p>
             </div>
         </div>
     </div>
diff --git a/views/partials/blog-page-like-button.html b/views/partials/blog-page-like-button.html
index 1dfb5b8..f286471 100644
--- a/views/partials/blog-page-like-button.html
+++ b/views/partials/blog-page-like-button.html
@@ -1,6 +1,6 @@
 <button 
     hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click"
-    class="text-sm/[0.9] font-spectral text-left px-1.5 py-1 {{ if .Liked }}bg-main-light hover:bg-main-medium text-background-dark border-inset{{ else }}bg-main-dark hover:bg-main-medium text-background-light border-outset{{ end }} cursor-pointer border-1 border-background-dark">
+    class="text-sm/[0.9] font-spectral text-left px-1 py-0.5 {{ if .Liked }}bg-main-light hover:bg-main-medium text-background-dark border-inset{{ else }}bg-main-dark hover:bg-main-medium text-background-light border-outset{{ end }} cursor-pointer border-2 border-background-dark">
     <i class="fas fa-thumbs-up w-3 h-3"></i>
-    <span class="italic ml-1 text-background-light">({{ .LikedCount }})</span>
+    <span class="italic ml-0.5 text-background-light">({{ .LikedCount }})</span>
 </button>
\ No newline at end of file
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index f96e0f1..041f3c8 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -1,15 +1,15 @@
 {{- range .BlogPages }}
-<hr class="first-of-type:hidden border-t-[0.3vh] my-2 border-dotted border-main-dark w-[80%] mx-auto">
+<hr class="first-of-type:hidden border-t-1 mx-auto">
 <div class="m-1 flex flex-row justify-center justify-items-center">
-    <img onclick="changeUrl('{{ .ArticleLink }}');" class="cursor-pointer object-cover rounded-[10%] select-none w-20 h-20 aspect-square my-1 mr-2" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/{{ .Thumbnail }}.webp">
-    <div class="grow my-1 mx-2 flex flex-col justify-center">
-        <div class="flex flex-row gap-[5%] max-w-[100%]">
-            <a onclick="changeUrl('{{ .ArticleLink }}');" class="flex-9/12 grow-0 block text-base cursor-pointer">
+    <img onclick="changeUrl('{{ .ArticleLink }}');" class="cursor-pointer object-cover rounded-lg select-none w-24 h-24 aspect-square my-2.5 mr-2" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/{{ .Thumbnail }}.webp">
+    <div class="grow my-0.5 mx-1 flex flex-col justify-center">
+        <div class="flex flex-row gap-2 max-w-[100%]">
+            <a onclick="changeUrl('{{ .ArticleLink }}');" class="grow text-base cursor-pointer">
                 <span class="font-extrabold">{{ .Title }}</span>
                 <span class="font-extrabold select-none text-secondary">//</span>
                 <span class="italic text-secondary">{{ .ActionDate }}</span>
             </a>
-            <p class="flex-3/12 grow-0 text-base italic text-secondary text-right">{{ .PublishedTime }}</p>
+            <p class="basis-56 text-base italic text-secondary text-right">{{ .PublishedTime }}</p>
         </div>
         <p class="text-base text-main-dark">{{ .ShortDescription }}</p>
         <p class="text-base text-secondary italic">
diff --git a/views/partials/general-page-footer.html b/views/partials/general-page-footer.html
index c0774f6..8979423 100644
--- a/views/partials/general-page-footer.html
+++ b/views/partials/general-page-footer.html
@@ -1,5 +1,5 @@
 {{ block "footer" . }}{{ end }}
-<p class="grow content-center text-base/[1] font-spectral italic text-right text-secondary mr-2">
+<p class="grow content-center text-base/[1] font-spectral italic text-right text-secondary mr-1">
     All the photos on <a href="https://saya.today/">saya.today</a> are licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a> by <a href="https://t.me/EarlInisMona">Saya Andy</a> © {{ .PublishedYear }}
 </p>
 <img class="max-w-4 max-h-4 self-center" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="CC">
diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html
index d13a6d8..115ab13 100644
--- a/views/partials/general-page-header.html
+++ b/views/partials/general-page-header.html
@@ -1,8 +1,8 @@
 <div {{ if .PublishedDate }} hx-get="/api/v1/tz" hx-vals='js:{timestamp: "{{ .PublishedDate }}", tz: clientTimeZone}' hx-target="#published-date" hx-swap="innerHTML" hx-trigger="load" {{ end }}
-    class="flex flex-row mb-1">
-    <i onclick="changeUrl('/../', true);" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-3xl mt-auto mb-auto px-2"></i>
-    <p class="text-3xl font-spectral italic font-extrabold select-none mt-auto pl-2 pr-6">//</p>
-    <p class="text-3xl font-spectral italic text-left mt-auto">{{ .Title }}</p>
+    class="flex flex-row mb-2">
+    <i onclick="changeUrl('/../', true);" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-4xl mt-auto mb-auto px-1"></i>
+    <p class="text-4xl font-spectral italic font-extrabold select-none mt-auto pl-3 pr-3">//</p>
+    <p class="text-4xl font-spectral italic text-left mt-auto">{{ .Title }}</p>
     <p id="published-date" class="grow text-2xl font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
 </div>
 {{ block "header" . }}{{ end }}
-- 
cgit v1.3.1+13


From d3ffefbd3d9de2378b564e4c6f965c03a5a06113 Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Wed, 15 Oct 2025 23:23:27 +0700
Subject: feat: adapt layout for phone screens (especially small ones)

---
 internal/router/api-v1-general-page-body.go |  2 +
 locale/localization.en.yaml                 |  3 ++
 locale/localization.go                      |  6 +++
 locale/localization.ru.yaml                 |  3 ++
 static/input.css                            | 73 ++++++++++++-----------------
 views/layouts/general-page.html             | 25 +++++-----
 views/pages/blog-catalogue.html             | 16 +++----
 views/pages/blog-page.html                  |  6 ++-
 views/pages/global-map.html                 | 18 +++----
 views/pages/home-page.html                  |  8 ++--
 views/partials/general-page-body.html       |  2 +-
 views/partials/general-page-header.html     |  2 +-
 12 files changed, 85 insertions(+), 79 deletions(-)

(limited to 'internal')

diff --git a/internal/router/api-v1-general-page-body.go b/internal/router/api-v1-general-page-body.go
index b2fa268..c1a4a9f 100644
--- a/internal/router/api-v1-general-page-body.go
+++ b/internal/router/api-v1-general-page-body.go
@@ -136,6 +136,8 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 			values["MapLocationAreaMeters"] = areaError
 			values["Title"] = metadata.Title
 			values["ParsedMarkdown"] = template.HTML(parsedMarkdown)
+			values["PublishedDate"] = metadata.PublishedTime.Format("2006-01-02 15:04:05 -07:00")
+			values["ActionDate"] = metadata.ActionDate
 
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
 
diff --git a/locale/localization.en.yaml b/locale/localization.en.yaml
index 1b3654b..e93ab00 100644
--- a/locale/localization.en.yaml
+++ b/locale/localization.en.yaml
@@ -22,3 +22,6 @@ HomePage:
   Hymn2: "We've been expecting you!"
   Hymn3: 'You bring such joy in Sayasite!'
   Hymn4: 'No matter where you roam, know our love is true!~'
+Metadata:
+  Published: 'Published'
+  Action: 'Took place on'
diff --git a/locale/localization.go b/locale/localization.go
index 088783f..7dbb554 100644
--- a/locale/localization.go
+++ b/locale/localization.go
@@ -12,6 +12,7 @@ type LocaleConfig struct {
 	BlogSearch BlogSearchConfig `yaml:"BlogSearch" json:"BlogSearch"`
 	GlobalMap  GlobalMapConfig  `yaml:"GlobalMap" json:"GlobalMap"`
 	HomePage   HomePageConfig   `yaml:"HomePage" json:"HomePage"`
+	Metadata   MetadataConfig   `yaml:"Metadata" json:"Metadata"`
 }
 
 type BlogSearchConfig struct {
@@ -43,6 +44,11 @@ type HomePageConfig struct {
 	Hymn4                  string `yaml:"Hymn4" json:"Hymn4"`
 }
 
+type MetadataConfig struct {
+	Action    string `yaml:"Action" json:"Action"`
+	Published string `yaml:"Published" json:"Published"`
+}
+
 func LoadConfig(path string, config *LocaleConfig) error {
 	fileBytes, err := os.ReadFile(path)
 	if err != nil {
diff --git a/locale/localization.ru.yaml b/locale/localization.ru.yaml
index 9d7084f..a1a9a6c 100644
--- a/locale/localization.ru.yaml
+++ b/locale/localization.ru.yaml
@@ -22,3 +22,6 @@ HomePage:
   Hymn2: 'Мы Вас столько ждали!'
   Hymn3: 'Столько радости от Вас на Саясайте!'
   Hymn4: 'Где бы Вы не были, знайте, -- наша любовь крепка!'
+Metadata:
+  Published: 'Опубликовано'
+  Action: 'Время действия'
diff --git a/static/input.css b/static/input.css
index 668ca7a..51c3c30 100644
--- a/static/input.css
+++ b/static/input.css
@@ -3,15 +3,16 @@
 @theme {
     --font-spectral: Spectral, serif;
     --font-patua: "Patua One", cursive;
+    --breakpoint-xs: 32rem;
 }
 
 html {
-    font-size: 8px;
+    font-size: 12px;
 }
 
 @media screen and (width >= 640px) {
     html {
-        font-size: 12px;
+        font-size: 14px;
     }
 }
 
@@ -494,42 +495,42 @@ body[data-theme~="ram"] .leaflet-tile {
     filter: invert(1) hue-rotate(190deg) contrast(1.1) brightness(1.2) !important;
 }
 
-@media (min-aspect-ratio: 1.1/1) {
-    .ar-gt-1\.1\:mr-6 {
+@media (min-aspect-ratio: 0.8/1) {
+    .ar-gt-0\.8\:mr-6 {
         margin-right: 1.5rem;
     }
 
-    .ar-gt-1\.1\:w-fit {
+    .ar-gt-0\.8\:w-fit {
         width: fit-content;
     }
 
-    .ar-gt-1\.1\:w-\[100dvh\] {
+    .ar-gt-0\.8\:w-\[100dvh\] {
         width: 100dvh;
         flex-basis: 100dvh;
     }
 
-    .ar-gt-1\.1\:min-w-fit {
+    .ar-gt-0\.8\:min-w-fit {
         min-width: fit-content;
     }
 
-    .ar-gt-1\.1\:min-w-\[10dvh\] {
+    .ar-gt-0\.8\:min-w-\[10dvh\] {
         min-width: 10dvh;
     }
 
-    .ar-gt-1\.1\:max-w-\[20dvh\] {
+    .ar-gt-0\.8\:max-w-\[20dvh\] {
         max-width: 20dvh;
     }
 
-    .ar-gt-1\.1\:max-w-\[100dvh\] {
+    .ar-gt-0\.8\:max-w-\[100dvh\] {
         max-width: 100dvh;
     }
 
-    .ar-gt-1\.1\:items-center {
+    .ar-gt-0\.8\:items-center {
         align-items: center;
     }
 }
 
-@media (max-aspect-ratio: 1.1/1) {
+@media (max-aspect-ratio: 0.8/1) {
     .bg-sidebar {
         background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6vh) calc(var(--squares-and-triangles-background-height-coef) * 1.6vh);
     }
@@ -546,71 +547,67 @@ body[data-theme~="ram"] .leaflet-tile {
         background-size: 10dvh;
     }
 
-    .ar-lt-1\.1\:grid {
+    .ar-lt-0\.8\:grid {
         display: grid;
     }
 
-    .ar-lt-1\.1\:flex-col {
+    .ar-lt-0\.8\:flex-col {
         flex-direction: column;
     }
 
-    .ar-lt-1\.1\:flex-row {
+    .ar-lt-0\.8\:flex-row {
         flex-direction: row;
     }
 
-    .ar-lt-1\.1\:h-\[8dvh\] {
+    .ar-lt-0\.8\:h-\[8dvh\] {
         height: 8dvh;
     }
 
-    .ar-lt-1\.1\:h-\[10dvh\] {
+    .ar-lt-0\.8\:h-\[10dvh\] {
         height: 10dvh;
     }
 
-    .ar-lt-1\.1\:h-\[30dvh\] {
+    .ar-lt-0\.8\:h-\[30dvh\] {
         height: 30dvh;
     }
 
-    .ar-lt-1\.1\:h-\[90dvh\] {
+    .ar-lt-0\.8\:h-\[90dvh\] {
         height: 90dvh;
     }
 
-    .ar-lt-1\.1\:w-\[8dvh\] {
+    .ar-lt-0\.8\:w-\[8dvh\] {
         width: 8dvh;
     }
 
-    .ar-lt-1\.1\:w-\[80\%\] {
+    .ar-lt-0\.8\:w-\[80\%\] {
         width: 80%;
     }
 
-    .ar-lt-1\.1\:w-\[90dvw\] {
+    .ar-lt-0\.8\:w-\[90dvw\] {
         width: 90dvw;
     }
 
-    .ar-lt-1\.1\:w-screen {
+    .ar-lt-0\.8\:w-screen {
         width: 100dvw;
     }
 
-    .ar-lt-1\.1\:max-h-\[25\%\] {
-        max-height: 25%;
+    .ar-lt-0\.8\:max-h-\[30\%\] {
+        max-height: 30%;
     }
 
-    .ar-lt-1\.1\:max-h-\[80\%\] {
+    .ar-lt-0\.8\:max-h-\[80\%\] {
         max-height: 80%;
     }
 
-    .ar-lt-1\.1\:max-h-\[92dvh\] {
+    .ar-lt-0\.8\:max-h-\[92dvh\] {
         max-height: 92dvh;
     }
 
-    .ar-lt-1\.1\:text-\[5dvh\] {
+    .ar-lt-0\.8\:text-\[5dvh\] {
         font-size: 5dvh;
     }
 
-    .ar-lt-1\.1\:ml-\[5dvw\] {
-        margin-left: 5dvw;
-    }
-
-    .ar-lt-1\.1\:hidden {
+    .ar-lt-0\.8\:hidden {
         display: none;
     }
 }
@@ -631,16 +628,6 @@ body[data-theme~="ram"] .leaflet-tile {
     }
 }
 
-@media (max-aspect-ratio: 0.4/1) {
-    .ar-lt-0\.4\:w-\[100dvw\] {
-        width: 100dvw;
-    }
-
-    .ar-lt-0\.4\:ml-0 {
-        margin-left: 0;
-    }
-}
-
 .home-page-heart {
     position: absolute;
     color: var(--color-pink-700);
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 435ea66..5d84649 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -14,7 +14,7 @@
     <link href="/output.css" rel="stylesheet">
 </head>
 
-<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-1.1:flex-col">
+<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-0.8:flex-col">
 
     <script>
         function changeUrl(path, toAppend = false) {
@@ -161,15 +161,16 @@
         const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     </script>
 
-    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-1.1:items-center shadow-2xl z-20 w-[5dvw] ar-lt-1.1:w-[90dvw] ar-lt-0.4:w-[100dvw] h-screen ar-lt-1.1:h-[8dvh] ar-lt-1.1:ml-[5dvw] ar-lt-0.4:ml-0">
-        <div class="logo-custom ar-lt-1.1:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
+    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5dvw] ar-lt-0.8:w-screen h-screen ar-lt-0.8:h-[8dvh]">
+        <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
             saya.today
         </div>
-        <div class="text-[3dvw] ar-lt-1.1:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-1.1:flex-row gap-0 relative z-20">
-            <i onclick="changeUrl('/{{ .Lang }}');" class="fas fa-home w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+        <div class="text-[3dvw] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
+            <i onclick="changeUrl('/{{ .Lang }}');" class="fas fa-home flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+            <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+            <i onclick="changeUrl('/../', true);" class="fas fa-circle-left flex xs:!hidden w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
         </div>
         <div class="theme-wheel" id="theme-wheel">
             <div class="theme-icon" data-theme="olive"></div>
@@ -179,16 +180,16 @@
         </div>
     </div>
 
-    <div class="bg-background-dark flex z-10 ar-lt-1.1:w-[90dvw] ar-lt-0.4:w-[100dvw] h-screen ar-lt-1.1:max-h-[92dvh] ar-lt-1.1:ml-[5dvw] ar-lt-0.4:ml-0">
+    <div class="bg-background-dark flex z-10 ar-lt-0.8:w-screen h-screen ar-lt-0.8:max-h-[92dvh]">
         <div class="pl-[0.5vw] bg-background-dark border-r-2 border-dashed border-main-dark"></div>
 
-        <div class="ar-gt-1.1:w-[100dvh] max-h-100% flex flex-col bg-background-dark relative pt-4 ml-8 pr-4">
-            <div id="general-page-header" class="flex flex-col basis-8"
+        <div class="ar-gt-0.8:w-[100dvh] max-h-100% flex flex-col bg-background-dark relative pt-4 ml-8 pr-4">
+            <div id="general-page-header" class="max-xs:hidden flex flex-col basis-8"
                 hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
             <div id="general-page-header-trigger" hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-header" hx-swap="innerHTML"></div>
 
-            <hr class="border-t-4 border-dotted border-main-dark mb-2">
+            <hr class="max-xs:hidden border-t-4 border-dotted border-main-dark mb-2">
 
             <div id="general-page-body" class="flex flex-col grow overflow-y-auto"
                 hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index 27ae2b8..faa6588 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,11 +1,11 @@
 {{ define "body" }}
-<div class="flex flex-row ar-lt-1.1:flex-col text-base h-[100%]">
+<div class="flex flex-row ar-lt-0.8:flex-col text-base h-[100%]">
     <form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML"
-        class="tags-list ar-gt-1.1:min-w-[10dvh] ar-gt-1.1:max-w-[20dvh] ar-gt-1.1:w-fit ar-lt-1.1:w-[100%] ar-lt-1.1:max-h-[25%] flex shrink-0 flex-col ar-gt-1.1:mr-6">
+        class="tags-list ar-gt-0.8:min-w-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[30%] flex shrink-0 flex-col ar-gt-0.8:mr-6 bg-background-light inset-shadow">
         <div class="flex flex-col overflow-y-auto">
             <fieldset>
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.TagsHeader }}</legend>
-                <div class="flex flex-col ar-lt-1.1:grid grid-cols-5 grid-flow-row-dense">
+                <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 xs:grid-cols-4 sm:grid-cols-5 grid-flow-row-dense">
                     <div class="m-0.5">
                         <label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();"> {{ .L.BlogSearch.ChooseAllTags }}</label>
                     </div>
@@ -18,7 +18,7 @@
             </fieldset>
             <fieldset class="mt-1">
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.OrderByHeader }}</legend>
-                <div class="flex flex-col ar-lt-1.1:grid grid-cols-3 grid-rows-2 grid-flow-col">
+                <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 grid-rows-2 grid-flow-col">
                     <div class="m-0.5">
                         <label><input type="radio" id="sortTitleAsc" name="sort" value="titleAsc" {{ if eq .QuerySort "titleAsc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-a-z"></i></label>
                     </div>
@@ -41,11 +41,11 @@
             </fieldset>
         </div>
         <hr class="border-t-2 border-dotted border-main-dark my-0.5">
-        <div class="flex flex-row grow bg-background-light my-2 p-0.5 rounded-1 justify-items-center">
-            <i onclick="defaultSearchParams(); cleanHrefParams();" class="fas fa-rotate-left flex-1 text-center text-2xl hover:bg-background-dark cursor-pointer transition-colors duration-300"></i>
-            <div class="w-1 bg-background-dark grow-0"></div>
+        <div class="flex flex-row bg-background-dark my-2 p-0.5 rounded-1 justify-items-center">
+            <i onclick="defaultSearchParams(); cleanHrefParams();" class="fas fa-rotate-left flex-1 text-center text-2xl hover:bg-background-light cursor-pointer transition-colors duration-300"></i>
+            <div class="w-1 bg-background-light grow-0"></div>
             <button class="flex-1" type="submit">
-                <i onclick="setHrefParams();" class="fas fa-magnifying-glass text-center text-2xl hover:bg-background-dark cursor-pointer transition-colors duration-300"></i>
+                <i onclick="setHrefParams();" class="fas fa-magnifying-glass text-center text-2xl hover:bg-background-light cursor-pointer transition-colors duration-300"></i>
             </button>
         </div>
     </form>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index cd7aeba..aadebac 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -17,10 +17,14 @@
 
 {{ define "body" }}
 <div class="bg-background-light flex flex-col inset-shadow px-8 py-4 overflow-y-auto">
+    <p class="xs:hidden font-spectral text-2xl font-bold italic text-main-dark tracking-[.0125rem] mb-1">{{ .Title }}</p>
+    <p class="xs:hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Published }}: {{ .PublishedDate }}</p>
+    <p class="xs:hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Action }}: {{ .ActionDate }}</p>
+    <hr class="xs:hidden border-t-2 border-dotted border-main-dark mt-1 mb-2 w-full ml-auto mr-auto">
     {{ .ParsedMarkdown }}
 {{- if .MapLocationX }}
     <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
-    <div id="map-container" class="relative p-1 flex-none ml-auto mr-auto w-[60%] ar-lt-1.1:w-[80%] h-[40dvh] ar-lt-1.1:h-[30dvh]"></div>
+    <div id="map-container" class="relative p-1 flex-none ml-auto mr-auto w-[60%] ar-lt-0.8:w-[80%] h-[40dvh] ar-lt-0.8:h-[30dvh]"></div>
     <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
 
     <script>
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 40852e1..4c6fb5e 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css">
 </head>
 
-<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-1.1:flex-col">
+<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-0.8:flex-col">
 
     <script>
         function switchTheme(theme) {
@@ -40,15 +40,15 @@
         const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     </script>
 
-    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-1.1:items-center shadow-2xl z-20 w-[5dvw] ar-lt-1.1:w-screen h-screen ar-lt-1.1:h-[8dvh]">
-        <div class="logo-custom ar-lt-1.1:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
+    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5dvw] ar-lt-0.8:w-screen h-screen ar-lt-0.8:h-[8dvh]">
+        <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
             saya.today
         </div>
-        <div class="text-[3dvw] sm:text-2xl ar-lt-1.1:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-1.1:flex-row gap-0 relative z-20">
-            <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5dvw] ar-lt-1.1:w-[8dvh] h-[5dvw] ar-lt-1.1:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+        <div class="text-[3dvw] sm:text-2xl ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
+            <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
         </div>
         <div class="theme-wheel" id="theme-wheel">
             <div class="theme-icon" data-theme="olive"></div>
@@ -58,7 +58,7 @@
         </div>
     </div>
 
-    <div id="map-container" class="bg-background-dark flex z-10 w-[95dvw] ar-lt-1.1:w-screen h-screen ar-lt-1.1:h-[92dvh]"></div>
+    <div id="map-container" class="bg-background-dark flex z-10 w-[95dvw] ar-lt-0.8:w-screen h-screen 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>
diff --git a/views/pages/home-page.html b/views/pages/home-page.html
index 9db6d23..df0f5b3 100644
--- a/views/pages/home-page.html
+++ b/views/pages/home-page.html
@@ -2,13 +2,13 @@
 <div class="bg-background-light flex flex-row ar-lt-0.6:flex-col w-full h-full inset-shadow overflow-y-auto text-base/[2] tracking-wide">
     <div class="ar-gt-0.6:flex-3/5 justify-center content-start p-8">
         <div class="flex flex-col justify-start items-start bg-background-dark mb-8">
-            <p class="text-5xl/[2] ml-4 tracking-widest uppercase w-full font-spectral italic text-left
+            <p class="text-3xl/[2] xs:text-4xl/[2] sm:text-5xl/[2] ml-4 tracking-widest uppercase w-full font-spectral italic text-left
                 border-l-1.5 border-solid border-(--background-dark-color)
                 bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.Hymn1 }}</p>
             <hr class="w-full border-t-2 border-dotted border-main-dark mb-1">
-            <p class="text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn2 }}</p>
-            <p class="text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn3 }}</p>
-            <p class="text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn4 }}</p>
+            <p class="text-xl/[2] xs:text-2xl/[2] sm:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn2 }}</p>
+            <p class="text-xl/[2] xs:text-2xl/[2] sm:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn3 }}</p>
+            <p class="text-xl/[2] xs:text-2xl/[2] sm:text-3xl/[2] -indent-8 ml-12 p-1">{{ .L.HomePage.Hymn4 }}</p>
         </div>
 
         <div class="flex flex-col justify-center items-center">
diff --git a/views/partials/general-page-body.html b/views/partials/general-page-body.html
index 4686ea1..c3aa3eb 100644
--- a/views/partials/general-page-body.html
+++ b/views/partials/general-page-body.html
@@ -1,2 +1,2 @@
-<title>SAYA TODAY // {{ .Title }}</title>
+<title>{{ .Title }} // SAYA TODAY</title>
 {{ block "body" . }}{{ end }}
\ No newline at end of file
diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html
index 115ab13..7f6ab8a 100644
--- a/views/partials/general-page-header.html
+++ b/views/partials/general-page-header.html
@@ -1,7 +1,7 @@
 <div {{ if .PublishedDate }} hx-get="/api/v1/tz" hx-vals='js:{timestamp: "{{ .PublishedDate }}", tz: clientTimeZone}' hx-target="#published-date" hx-swap="innerHTML" hx-trigger="load" {{ end }}
     class="flex flex-row mb-2">
     <i onclick="changeUrl('/../', true);" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-4xl mt-auto mb-auto px-1"></i>
-    <p class="text-4xl font-spectral italic font-extrabold select-none mt-auto pl-3 pr-3">//</p>
+    <p class="text-4xl font-spectral italic font-extrabold select-none mt-auto mb-auto pl-3 pr-3">//</p>
     <p class="text-4xl font-spectral italic text-left mt-auto">{{ .Title }}</p>
     <p id="published-date" class="grow text-2xl font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
 </div>
-- 
cgit v1.3.1+13


From 44fe2478478225450becb77ad5d273462c9b400a Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Thu, 16 Oct 2025 12:23:00 +0700
Subject: feat: implement new prototype gallery

---
 internal/glightbox/block.go            |  31 +++++++
 internal/glightbox/extension.go        |  28 +++++++
 internal/glightbox/html_renderer.go    | 134 ++++++++++++++++++++++++++++++
 internal/glightbox/parser.go           |  88 ++++++++++++++++++++
 internal/lightgallery/block.go         |  31 -------
 internal/lightgallery/extension.go     |  28 -------
 internal/lightgallery/html_renderer.go | 145 --------------------------------
 internal/lightgallery/parser.go        |  88 --------------------
 main.go                                |   4 +-
 static/input.css                       | 147 +++------------------------------
 views/layouts/general-page.html        |  11 ++-
 views/pages/blog-catalogue.html        |   2 +-
 12 files changed, 302 insertions(+), 435 deletions(-)
 create mode 100644 internal/glightbox/block.go
 create mode 100644 internal/glightbox/extension.go
 create mode 100644 internal/glightbox/html_renderer.go
 create mode 100644 internal/glightbox/parser.go
 delete mode 100644 internal/lightgallery/block.go
 delete mode 100644 internal/lightgallery/extension.go
 delete mode 100644 internal/lightgallery/html_renderer.go
 delete mode 100644 internal/lightgallery/parser.go

(limited to 'internal')

diff --git a/internal/glightbox/block.go b/internal/glightbox/block.go
new file mode 100644
index 0000000..696f328
--- /dev/null
+++ b/internal/glightbox/block.go
@@ -0,0 +1,31 @@
+package glightbox
+
+import (
+	"time"
+
+	"github.com/yuin/goldmark/ast"
+)
+
+// GLightboxBlock represents a light gallery block in the AST
+type GLightboxBlock struct {
+	ast.BaseBlock
+	Images   []GLightboxImage
+	Location *time.Location
+}
+
+type GLightboxImage struct {
+	URL     string
+	Caption []byte
+}
+
+var KindGLightboxBlock = ast.NewNodeKind("GLightboxBlock")
+
+// Dump implements ast.Node.Dump
+func (n *GLightboxBlock) Dump(source []byte, level int) {
+	ast.DumpHelper(n, source, level, nil, nil)
+}
+
+// Kind implements ast.Node.Kind
+func (n *GLightboxBlock) Kind() ast.NodeKind {
+	return KindGLightboxBlock
+}
diff --git a/internal/glightbox/extension.go b/internal/glightbox/extension.go
new file mode 100644
index 0000000..7fd17b1
--- /dev/null
+++ b/internal/glightbox/extension.go
@@ -0,0 +1,28 @@
+package glightbox
+
+import (
+	"github.com/yuin/goldmark"
+	"github.com/yuin/goldmark/parser"
+	"github.com/yuin/goldmark/renderer"
+	"github.com/yuin/goldmark/util"
+)
+
+// Extension that combines parser and renderer
+type GLightboxExtension struct{}
+
+func NewGLightboxExtension() goldmark.Extender {
+	return &GLightboxExtension{}
+}
+
+func (e *GLightboxExtension) Extend(m goldmark.Markdown) {
+	m.Parser().AddOptions(
+		parser.WithBlockParsers(
+			util.Prioritized(NewGLightboxParser(), 500),
+		),
+	)
+	m.Renderer().AddOptions(
+		renderer.WithNodeRenderers(
+			util.Prioritized(NewGLightboxHTMLRenderer(), 500),
+		),
+	)
+}
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
new file mode 100644
index 0000000..3b6a533
--- /dev/null
+++ b/internal/glightbox/html_renderer.go
@@ -0,0 +1,134 @@
+package glightbox
+
+import (
+	"bytes"
+	"fmt"
+	"math/rand"
+	"strings"
+	"time"
+
+	"github.com/yuin/goldmark"
+	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/renderer"
+	"github.com/yuin/goldmark/renderer/html"
+	"github.com/yuin/goldmark/util"
+)
+
+type GLightboxHTMLRenderer struct {
+	html.Config
+	md goldmark.Markdown
+}
+
+func NewGLightboxHTMLRenderer(opts ...html.Option) renderer.NodeRenderer {
+	r := &GLightboxHTMLRenderer{
+		Config: html.NewConfig(),
+		md: goldmark.New(
+			goldmark.WithRendererOptions(
+				html.WithHardWraps(),
+				html.WithXHTML(),
+			),
+		),
+	}
+	for _, opt := range opts {
+		opt.SetHTMLOption(&r.Config)
+	}
+	return r
+}
+
+func (r *GLightboxHTMLRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
+	reg.Register(KindGLightboxBlock, r.renderGLightbox)
+}
+
+func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		gallery := n.(*GLightboxBlock)
+
+		if len(gallery.Images) == 0 {
+			return ast.WalkContinue, nil
+		}
+
+		galleryID := generateDivId(8)
+
+		var elements []string
+		for i, img := range gallery.Images {
+			imageUrlSegments := strings.Split(img.URL, ".")
+			imageUrlWithoutExt := strings.Join(imageUrlSegments[:len(imageUrlSegments)-1], ".")
+			imageUrlParts := strings.Split(imageUrlWithoutExt, "/")
+			imageNameParts := strings.Split(imageUrlParts[len(imageUrlParts)-1], "-")
+
+			var captionBuf bytes.Buffer
+			captionHTML := img.Caption
+			if err := r.md.Convert(img.Caption, &captionBuf); err == nil {
+				captionHTML = captionBuf.Bytes()
+				captionHTML = bytes.TrimPrefix(captionHTML, []byte("<p>"))
+				captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>\n"))
+				captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>"))
+			}
+
+			dayDate, _ := time.Parse("20060102 150405", imageNameParts[len(imageNameParts)-2]+" "+imageNameParts[len(imageNameParts)-1])
+			dayDate = dayDate.In(gallery.Location)
+
+			glightboxDescId := ""
+			if len(captionHTML) != 0 {
+				glightboxDescId = fmt.Sprintf("glightbox-desc-%s-%d", galleryID, i)
+			}
+
+			dataDescriptionAttribute := ""
+			if glightboxDescId != "" {
+				dataDescriptionAttribute = fmt.Sprintf("data-description=\".%s\"", glightboxDescId)
+			}
+
+			elements = append(elements, fmt.Sprintf(`
+	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item grid-item-%s"
+	    data-gallery="gallery-%s" data-title="%s" %s>
+	    <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" class="rounded-md p-0.5" alt="webp thumbnail" />
+	</a>`, img.URL, galleryID, galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt))
+
+			if glightboxDescId != "" {
+				elements = append(elements, fmt.Sprintf(`
+	<div class="glightbox-desc rounded-4 %s">
+		<p>%s</p>
+	</div>`, glightboxDescId, captionHTML))
+			}
+		}
+
+		w.WriteString(fmt.Sprintf(`
+<div class="justify-content-center display-block m-1">
+	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
+	<div class="grid masonry-grid-%s">
+		<div class="grid-sizer grid-sizer-%s"></div>
+		%s
+	</div>
+	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
+</div>`, galleryID, galleryID, strings.Join(elements, "\n")))
+
+		w.WriteString(fmt.Sprintf(`
+<script>
+	var lightbox_%s = GLightbox({
+		selector: '.glightbox-%s'
+	});
+
+	var msnry_%s = new Masonry('.masonry-grid-%s', {
+		itemSelector: '.grid-item-%s',
+		columnWidth: '.grid-sizer-%s',
+		percentPosition: true
+	});
+
+	imagesLoaded('.masonry-grid-%s', function() {
+		msnry_%s.layout();
+	});
+</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+	}
+
+	return ast.WalkContinue, nil
+}
+
+func generateDivId(length int) string {
+	const charset = "abcdefghijklmnopqrstuvwxyz"
+	seededRand := rand.New(rand.NewSource(time.Now().UnixNano())) // Seed with current time
+	b := make([]byte, length)
+	for i := range b {
+		b[i] = charset[seededRand.Intn(len(charset))]
+	}
+	return string(b)
+}
diff --git a/internal/glightbox/parser.go b/internal/glightbox/parser.go
new file mode 100644
index 0000000..ba3f22e
--- /dev/null
+++ b/internal/glightbox/parser.go
@@ -0,0 +1,88 @@
+package glightbox
+
+import (
+	"bytes"
+	"log/slog"
+	"regexp"
+	"time"
+
+	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/parser"
+	"github.com/yuin/goldmark/text"
+)
+
+type GLightboxParser struct{}
+
+func NewGLightboxParser() parser.BlockParser {
+	return &GLightboxParser{}
+}
+
+func (p *GLightboxParser) Trigger() []byte {
+	return []byte{'{'}
+}
+
+func (p *GLightboxParser) Open(parent ast.Node, reader text.Reader, pc parser.Context) (ast.Node, parser.State) {
+	line, _ := reader.PeekLine()
+
+	if !bytes.HasPrefix(line, []byte("{Gallery:")) {
+		return nil, parser.NoChildren
+	}
+
+	r := regexp.MustCompile(`^\{Gallery:([A-Za-z0-9\+\-/]+)\}$`)
+
+	trimmed := bytes.TrimSpace(line)
+	parts := r.FindSubmatch(trimmed)
+	if len(parts) < 2 {
+		slog.Warn("invalid gallery header format", slog.String("line", string(trimmed)), slog.Int("submatch_count", len(parts)))
+		return nil, parser.NoChildren
+	}
+
+	loc, err := time.LoadLocation(string(parts[1]))
+	if err != nil {
+		slog.Warn("invalid location specified for a gallery", slog.String("error", err.Error()), slog.String("line", string(trimmed)), slog.String("location", string(parts[1])))
+		return nil, parser.NoChildren
+	}
+
+	return &GLightboxBlock{Location: loc}, parser.NoChildren
+}
+
+func (p *GLightboxParser) Continue(node ast.Node, reader text.Reader, pc parser.Context) parser.State {
+	line, segment := reader.PeekLine()
+	if len(line) == 0 || segment.Len() == 0 {
+		return parser.Continue | parser.NoChildren
+	}
+
+	trimmed := bytes.TrimSpace(line)
+	if bytes.Equal(trimmed, []byte("{Gallery}")) || bytes.Equal(trimmed, []byte("{/Gallery}")) {
+		reader.AdvanceLine()
+		return parser.Close
+	}
+
+	gallery := node.(*GLightboxBlock)
+
+	parts := bytes.SplitN(trimmed, []byte{'|'}, 2)
+	url := bytes.TrimSpace(parts[0])
+
+	caption := make([]byte, 0)
+	if len(parts) > 1 {
+		caption = bytes.TrimSpace(parts[1])
+	}
+
+	gallery.Images = append(gallery.Images, GLightboxImage{
+		URL:     string(url),
+		Caption: caption,
+	})
+
+	return parser.Continue | parser.NoChildren
+}
+
+func (p *GLightboxParser) Close(node ast.Node, reader text.Reader, pc parser.Context) {
+}
+
+func (p *GLightboxParser) CanInterruptParagraph() bool {
+	return true
+}
+
+func (p *GLightboxParser) CanAcceptIndentedLine() bool {
+	return false
+}
diff --git a/internal/lightgallery/block.go b/internal/lightgallery/block.go
deleted file mode 100644
index 8eb7c9e..0000000
--- a/internal/lightgallery/block.go
+++ /dev/null
@@ -1,31 +0,0 @@
-package lightgallery
-
-import (
-	"time"
-
-	"github.com/yuin/goldmark/ast"
-)
-
-// LightGalleryBlock represents a light gallery block in the AST
-type LightGalleryBlock struct {
-	ast.BaseBlock
-	Images   []LightGalleryImage
-	Location *time.Location
-}
-
-type LightGalleryImage struct {
-	URL     string
-	Caption []byte
-}
-
-var KindLightGalleryBlock = ast.NewNodeKind("LightGalleryBlock")
-
-// Dump implements ast.Node.Dump
-func (n *LightGalleryBlock) Dump(source []byte, level int) {
-	ast.DumpHelper(n, source, level, nil, nil)
-}
-
-// Kind implements ast.Node.Kind
-func (n *LightGalleryBlock) Kind() ast.NodeKind {
-	return KindLightGalleryBlock
-}
diff --git a/internal/lightgallery/extension.go b/internal/lightgallery/extension.go
deleted file mode 100644
index 761dc05..0000000
--- a/internal/lightgallery/extension.go
+++ /dev/null
@@ -1,28 +0,0 @@
-package lightgallery
-
-import (
-	"github.com/yuin/goldmark"
-	"github.com/yuin/goldmark/parser"
-	"github.com/yuin/goldmark/renderer"
-	"github.com/yuin/goldmark/util"
-)
-
-// Extension that combines parser and renderer
-type LightGalleryExtension struct{}
-
-func NewLightGalleryExtension() goldmark.Extender {
-	return &LightGalleryExtension{}
-}
-
-func (e *LightGalleryExtension) Extend(m goldmark.Markdown) {
-	m.Parser().AddOptions(
-		parser.WithBlockParsers(
-			util.Prioritized(NewLightGalleryParser(), 500),
-		),
-	)
-	m.Renderer().AddOptions(
-		renderer.WithNodeRenderers(
-			util.Prioritized(NewLightGalleryHTMLRenderer(), 500),
-		),
-	)
-}
diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
deleted file mode 100644
index c2f785e..0000000
--- a/internal/lightgallery/html_renderer.go
+++ /dev/null
@@ -1,145 +0,0 @@
-package lightgallery
-
-import (
-	"bytes"
-	"fmt"
-	"math/rand"
-	"strings"
-	"time"
-
-	"github.com/yuin/goldmark"
-	"github.com/yuin/goldmark/ast"
-	"github.com/yuin/goldmark/renderer"
-	"github.com/yuin/goldmark/renderer/html"
-	"github.com/yuin/goldmark/util"
-)
-
-type LightGalleryHTMLRenderer struct {
-	html.Config
-	md goldmark.Markdown
-}
-
-func NewLightGalleryHTMLRenderer(opts ...html.Option) renderer.NodeRenderer {
-	r := &LightGalleryHTMLRenderer{
-		Config: html.NewConfig(),
-		md: goldmark.New(
-			goldmark.WithRendererOptions(
-				html.WithHardWraps(),
-				html.WithXHTML(),
-			),
-		),
-	}
-	for _, opt := range opts {
-		opt.SetHTMLOption(&r.Config)
-	}
-	return r
-}
-
-func (r *LightGalleryHTMLRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
-	reg.Register(KindLightGalleryBlock, r.renderLightGallery)
-}
-
-func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
-	if entering {
-		gallery := n.(*LightGalleryBlock)
-
-		if len(gallery.Images) == 0 {
-			return ast.WalkContinue, nil
-		}
-
-		galleryID := generateDivId(8)
-
-		w.WriteString(fmt.Sprintf(`
-<div class="justify-content-center display-block m-1">
-	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
-	<div id="lg-%s" class="inline-gallery-container relative ml-auto mr-auto"></div>
-	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
-</div>`, galleryID))
-
-		var dynamicElements []string
-		for _, img := range gallery.Images {
-			imageUrlSegments := strings.Split(img.URL, ".")
-			imageUrlWithoutExt := strings.Join(imageUrlSegments[:len(imageUrlSegments)-1], ".")
-			imageUrlParts := strings.Split(imageUrlWithoutExt, "/")
-			imageNameParts := strings.Split(imageUrlParts[len(imageUrlParts)-1], "-")
-
-			var captionBuf bytes.Buffer
-			captionHTML := img.Caption
-			if err := r.md.Convert(img.Caption, &captionBuf); err == nil {
-				captionHTML = captionBuf.Bytes()
-				captionHTML = bytes.TrimPrefix(captionHTML, []byte("<p>"))
-				captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>\n"))
-				captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>"))
-			}
-
-			dayDate, _ := time.Parse("20060102 150405", imageNameParts[len(imageNameParts)-2]+" "+imageNameParts[len(imageNameParts)-1])
-			dayDate = dayDate.In(gallery.Location)
-			dynamicElements = append(dynamicElements, fmt.Sprintf(`{
-				src:
-					"https://f003.backblazeb2.com/file/sayana-photos/full/%s",
-				downloadUrl:
-					"https://f003.backblazeb2.com/file/sayana-photos/full/%s",
-				alt: "%s",
-				responsive: "https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp 384, https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp 672, https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp 960, https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp 1440, https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp 1920",
-				thumb:
-					"https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp",
-				subHtml: `+"`"+`<div class="flex flex-row light-gallery-captions">
-								<p class="grow !text-base/[1] text-left font-spectral text-main-dark">%s</p>
-								<p class="!text-base/[1] text-right font-spectral text-secondary">%s</p>
-							</div>`+"`"+`
-			}`, img.URL, img.URL, util.EscapeHTML(captionHTML), imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, captionHTML, dayDate.Format("2006-01-02 15:04:05 -07:00")))
-		}
-
-		w.WriteString(fmt.Sprintf(`
-<script>
-function createLightGallery%s() {
-	const $lgContainer = document.getElementById('lg-%s');
-	const config = {
-		container: $lgContainer,
-		dynamic: true,
-		dynamicEl: [%s],
-		width: "100%%",
-		height: "50vmin",
-		hash: false,
-		closable: false,
-		showMaximizeIcon: true,
-		appendSubHtmlTo: ".lg-sub-html",
-		isMobile: () => false,
-		slideDelay: 0,
-		plugins: [lgZoom, lgThumbnail],
-		thumbWidth: calculateVmin(10),
-		thumbHeight: "10vmin",
-		thumbMargin: 4
-	};
-	const inlineGallery = lightGallery($lgContainer, config);
-
-	setTimeout(() => {
-		inlineGallery.openGallery();
-	}, 200);
-
-	galleryMap.set(inlineGallery, createLightGallery%s);
-}
-
-document.addEventListener('htmx:afterRequest', (e) => {
-	if (e.detail.xhr.status == 404 || e.detail.successful != true) {
-		return console.error(e);
-    }
-	if (e.detail.target.id == 'general-page-body') {
-		createLightGallery%s();
-	}
-}, {once: true});
-</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID, galleryID))
-	}
-
-	return ast.WalkContinue, nil
-}
-
-func generateDivId(length int) string {
-	const charset = "abcdefghijklmnopqrstuvwxyz"
-	seededRand := rand.New(rand.NewSource(time.Now().UnixNano())) // Seed with current time
-	b := make([]byte, length)
-	for i := range b {
-		b[i] = charset[seededRand.Intn(len(charset))]
-	}
-	return string(b)
-}
diff --git a/internal/lightgallery/parser.go b/internal/lightgallery/parser.go
deleted file mode 100644
index daec797..0000000
--- a/internal/lightgallery/parser.go
+++ /dev/null
@@ -1,88 +0,0 @@
-package lightgallery
-
-import (
-	"bytes"
-	"log/slog"
-	"regexp"
-	"time"
-
-	"github.com/yuin/goldmark/ast"
-	"github.com/yuin/goldmark/parser"
-	"github.com/yuin/goldmark/text"
-)
-
-type LightGalleryParser struct{}
-
-func NewLightGalleryParser() parser.BlockParser {
-	return &LightGalleryParser{}
-}
-
-func (p *LightGalleryParser) Trigger() []byte {
-	return []byte{'{'}
-}
-
-func (p *LightGalleryParser) Open(parent ast.Node, reader text.Reader, pc parser.Context) (ast.Node, parser.State) {
-	line, _ := reader.PeekLine()
-
-	if !bytes.HasPrefix(line, []byte("{Gallery:")) {
-		return nil, parser.NoChildren
-	}
-
-	r := regexp.MustCompile(`^\{Gallery:([A-Za-z0-9\+\-/]+)\}$`)
-
-	trimmed := bytes.TrimSpace(line)
-	parts := r.FindSubmatch(trimmed)
-	if len(parts) < 2 {
-		slog.Warn("invalid gallery header format", slog.String("line", string(trimmed)), slog.Int("submatch_count", len(parts)))
-		return nil, parser.NoChildren
-	}
-
-	loc, err := time.LoadLocation(string(parts[1]))
-	if err != nil {
-		slog.Warn("invalid location specified for a gallery", slog.String("error", err.Error()), slog.String("line", string(trimmed)), slog.String("location", string(parts[1])))
-		return nil, parser.NoChildren
-	}
-
-	return &LightGalleryBlock{Location: loc}, parser.NoChildren
-}
-
-func (p *LightGalleryParser) Continue(node ast.Node, reader text.Reader, pc parser.Context) parser.State {
-	line, segment := reader.PeekLine()
-	if len(line) == 0 || segment.Len() == 0 {
-		return parser.Continue | parser.NoChildren
-	}
-
-	trimmed := bytes.TrimSpace(line)
-	if bytes.Equal(trimmed, []byte("{Gallery}")) || bytes.Equal(trimmed, []byte("{/Gallery}")) {
-		reader.AdvanceLine()
-		return parser.Close
-	}
-
-	gallery := node.(*LightGalleryBlock)
-
-	parts := bytes.SplitN(trimmed, []byte{'|'}, 2)
-	url := bytes.TrimSpace(parts[0])
-
-	caption := make([]byte, 0)
-	if len(parts) > 1 {
-		caption = bytes.TrimSpace(parts[1])
-	}
-
-	gallery.Images = append(gallery.Images, LightGalleryImage{
-		URL:     string(url),
-		Caption: caption,
-	})
-
-	return parser.Continue | parser.NoChildren
-}
-
-func (p *LightGalleryParser) Close(node ast.Node, reader text.Reader, pc parser.Context) {
-}
-
-func (p *LightGalleryParser) CanInterruptParagraph() bool {
-	return true
-}
-
-func (p *LightGalleryParser) CanAcceptIndentedLine() bool {
-	return false
-}
diff --git a/main.go b/main.go
index 20e90f4..53dbb74 100644
--- a/main.go
+++ b/main.go
@@ -12,7 +12,7 @@ import (
 	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/internal/factgiver"
-	"github.com/SayaAndy/saya-today-web/internal/lightgallery"
+	"github.com/SayaAndy/saya-today-web/internal/glightbox"
 	"github.com/SayaAndy/saya-today-web/internal/router"
 	"github.com/SayaAndy/saya-today-web/internal/tailwind"
 	"github.com/SayaAndy/saya-today-web/locale"
@@ -32,7 +32,7 @@ import (
 var (
 	md = goldmark.New(
 		goldmark.WithExtensions(
-			lightgallery.NewLightGalleryExtension(),
+			glightbox.NewGLightboxExtension(),
 			tailwind.NewTailwindExtension(),
 		),
 		goldmark.WithParserOptions(
diff --git a/static/input.css b/static/input.css
index 51c3c30..36d17b2 100644
--- a/static/input.css
+++ b/static/input.css
@@ -247,10 +247,6 @@ a:hover {
     background-size: calc(var(--squares-and-triangles-background-width-coef) * 1vw) calc(var(--squares-and-triangles-background-height-coef) * 1vw);
 }
 
-body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
-    display: none !important;
-}
-
 .logo-custom {
     width: 3.5vw;
     height: 20vw;
@@ -346,142 +342,25 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
     transform: scale(1.1);
 }
 
-.lg-backdrop {
-    background-color: var(--background-light-color);
-    opacity: 0.8 !important;
-}
-
-.lg-container:not([class~="lg-inline"]) .lg-outer {
-    width: 90%;
-    height: 90%;
-    margin: 5dvh 5dvw;
-}
-
-.lg-thumb-outer {
-    background-color: var(--background-light-color) !important;
-    opacity: 0.8 !important;
-}
-
-.lg-prev {
-    background-color: var(--background-light-color);
-    color: var(--main-dark-color);
-}
-
-.lg-next {
-    background-color: var(--background-light-color);
-    color: var(--main-dark-color);
-}
-
-.lg-counter {
-    color: var(--main-dark-color);
-    font-family: 'Spectral';
-    font-size: 1vmax;
-    padding-top: 0;
-    height: 1vmax;
-}
-
-.lg-container:not([class~="lg-inline"]) .lg-counter {
-    font-size: 2vmax;
-    height: 2vmax;
-}
-
-.lg-content {
-    top: 2.5vmax !important;
-    bottom: calc(10vmin + 5vmax) !important;
-}
-
-.lg-outer[class~="lg-single-item"] .lg-content {
-    bottom: 5vmax !important;
-}
-
-.lg-thumb-item {
-    width: 10vmin !important;
-    height: 10vmin !important;
-}
-
-.lg-container:not([class~="lg-inline"]) .lg-content {
-    top: 4vmax !important;
-}
-
-.lg-toolbar .lg-icon,
-.lg-content .lg-icon {
-    padding: 0 0.7vmax;
-    font-size: 1.5vmax !important;
-    height: 1.5vmax;
-    width: auto;
-    color: var(--main-dark-color);
-}
-
-.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon,
-.lg-container:not([class~="lg-inline"]) .lg-content .lg-icon {
-    font-size: 3vmax !important;
-    height: 3vmax;
-}
-
-.lg-prev {
-    left: 0 !important;
-}
-
-.lg-next {
-    right: 0 !important;
+.grid-item, .grid-sizer {
+    width: 50%;
 }
 
-.lg-toolbar .lg-icon:hover {
-    color: var(--main-medium-color);
-}
-
-.lg-toolbar .lg-icon {
-    font-size: 1.5vmax !important;
-    color: var(--main-dark-color);
-}
-
-.lg-content .lg-icon:hover {
-    color: var(--main-medium-color);
-}
-
-.lg-sub-html {
-    padding: 0.7vmin 1.25vmin !important;
-}
-
-.inline-gallery-container {
-    width: 80%;
-    height: 70vmin;
-}
-
-.light-gallery-captions {
-    p {
-        transform: translate3d(0, 0, 0px);
-        transition-delay: 500ms;
-        opacity: 1;
+@media (width >= 32rem) {
+    .grid-item, .grid-sizer {
+        width: 33%;
     }
 }
 
-.lg-slide-progress {
-    .light-gallery-captions {
-        h4 {
-            transform: translate3d(-60px, 0, 0px);
-        }
-
-        p {
-            transform: translate3d(60px, 0, 0px);
-        }
-
-        h4,
-        p {
-            opacity: 0;
-        }
+@media (width >= 40rem) {
+    .grid-item, .grid-sizer {
+        width: 25%;
     }
 }
 
-.lg-current {
-    &.lg-slide-progress {
-        .light-gallery-captions {
-
-            h4,
-            p {
-                transition-delay: 0ms;
-            }
-        }
+@media (width >= 48rem) {
+    .grid-item, .grid-sizer {
+        width: 20%;
     }
 }
 
@@ -535,8 +414,8 @@ body[data-theme~="ram"] .leaflet-tile {
         background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6vh) calc(var(--squares-and-triangles-background-height-coef) * 1.6vh);
     }
 
-    .inline-gallery-container {
-        width: 100%;
+    .ar-lt-0\.8\:bg-background-light {
+        background-color: var(--background-light-color);
     }
 
     .logo-custom {
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 5d84649..88c5de5 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -7,10 +7,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lightgallery.min.css">
-    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lg-zoom.min.css">
-    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lg-thumbnail.min.css">
     <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css">
+    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/css/glightbox.min.css">
     <link href="/output.css" rel="stylesheet">
 </head>
 
@@ -26,6 +24,8 @@
         };
     </script>
 
+    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/js/glightbox.min.js"></script>
+
     <script>
         function sfc32(a, b, c, d) {
             return function() {
@@ -208,10 +208,9 @@
     </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/lightgallery/2.8.3/lightgallery.min.js"></script>
-    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-zoom.min.js"></script>
-    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-thumbnail.min.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
+    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
+    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/masonry-layout/4.2.2/masonry.pkgd.min.js"></script>
 
     <div id="general-page-bottom-embeds" class="flex"
         hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index faa6588..05a7bc5 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,7 +1,7 @@
 {{ define "body" }}
 <div class="flex flex-row ar-lt-0.8:flex-col text-base h-[100%]">
     <form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML"
-        class="tags-list ar-gt-0.8:min-w-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[30%] flex shrink-0 flex-col ar-gt-0.8:mr-6 bg-background-light inset-shadow">
+        class="tags-list ar-gt-0.8:min-w-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[30%] flex shrink-0 flex-col ar-gt-0.8:mr-6 bg-background-dark ar-lt-0.8:bg-background-light inset-shadow">
         <div class="flex flex-col overflow-y-auto">
             <fieldset>
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.TagsHeader }}</legend>
-- 
cgit v1.3.1+13


From db174993127a8b2faf863a670fd6ce8ca8d7c1af Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Fri, 17 Oct 2025 01:16:18 +0700
Subject: feat: add onclick links in blog post links feat: add href for any
 onclick links/icons chore: rm any remains of old lightgallery fix: show
 borders between post rows fix: map redefining

---
 internal/glightbox/html_renderer.go         |  2 +-
 internal/tailwind/link_renderer.go          | 49 +++++++++++++++++++++
 internal/tailwind/transformer.go            |  7 +++
 internal/templatemanager/templatemanager.go |  4 +-
 main.go                                     | 14 ++++--
 static/input.css                            | 31 ++++----------
 views/layouts/general-page.html             | 27 +++++++++---
 views/pages/blog-page.html                  | 66 +++++------------------------
 views/pages/global-map.html                 | 16 ++++---
 views/partials/catalogue-blog-cards.html    |  8 ++--
 views/partials/general-page-header.html     |  6 ++-
 11 files changed, 131 insertions(+), 99 deletions(-)
 create mode 100644 internal/tailwind/link_renderer.go

(limited to 'internal')

diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 3b6a533..43d4790 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -81,7 +81,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 			elements = append(elements, fmt.Sprintf(`
 	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item grid-item-%s"
 	    data-gallery="gallery-%s" data-title="%s" %s>
-	    <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" class="rounded-md p-0.5" alt="webp thumbnail" />
+	    <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" class="rounded-md p-1" alt="webp thumbnail" />
 	</a>`, img.URL, galleryID, galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt))
 
 			if glightboxDescId != "" {
diff --git a/internal/tailwind/link_renderer.go b/internal/tailwind/link_renderer.go
new file mode 100644
index 0000000..ff3d437
--- /dev/null
+++ b/internal/tailwind/link_renderer.go
@@ -0,0 +1,49 @@
+package tailwind
+
+import (
+	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/renderer"
+	"github.com/yuin/goldmark/renderer/html"
+	"github.com/yuin/goldmark/util"
+)
+
+type CustomLinkRenderer struct {
+	html.Config
+}
+
+func NewCustomLinkRenderer(opts ...html.Option) renderer.NodeRenderer {
+	r := &CustomLinkRenderer{
+		Config: html.NewConfig(),
+	}
+	for _, opt := range opts {
+		opt.SetHTMLOption(&r.Config)
+	}
+	return r
+}
+
+func (r *CustomLinkRenderer) renderLink(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	n := node.(*ast.Link)
+	if entering {
+		_, _ = w.WriteString("<a href=\"")
+		if r.Unsafe || !html.IsDangerousURL(n.Destination) {
+			_, _ = w.Write(util.EscapeHTML(util.URLEscape(n.Destination, true)))
+		}
+		_, _ = w.WriteString(`"`)
+		if n.Title != nil {
+			_, _ = w.WriteString(` title="`)
+			_, _ = w.Write(util.EscapeHTML(n.Title))
+			_, _ = w.WriteString(`"`)
+		}
+		if n.Attributes() != nil {
+			html.RenderAttributes(w, n, nil)
+		}
+		_, _ = w.WriteString(">")
+	} else {
+		_, _ = w.WriteString("</a>")
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *CustomLinkRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
+	reg.Register(ast.KindLink, r.renderLink)
+}
diff --git a/internal/tailwind/transformer.go b/internal/tailwind/transformer.go
index f932533..23ba1a3 100644
--- a/internal/tailwind/transformer.go
+++ b/internal/tailwind/transformer.go
@@ -1,6 +1,9 @@
 package tailwind
 
 import (
+	"bytes"
+	"fmt"
+
 	"github.com/yuin/goldmark/ast"
 	"github.com/yuin/goldmark/parser"
 	"github.com/yuin/goldmark/text"
@@ -51,6 +54,10 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader,
 			node.SetAttribute([]byte("class"), []byte("bg-background-dark p-1 rounded-lg overflow-x-auto mb-4"))
 
 		case *ast.Link:
+			if bytes.HasPrefix(node.Destination, []byte{'.', '/'}) {
+				onclickAttr := fmt.Appendf(make([]byte, 0, 21+len(node.Destination)), "return changeUrl('%s');", node.Destination)
+				node.SetAttribute([]byte("onclick"), onclickAttr)
+			}
 			node.SetAttribute([]byte("class"), []byte("text-secondary hover:text-main-dark underline"))
 
 		case *ast.Image:
diff --git a/internal/templatemanager/templatemanager.go b/internal/templatemanager/templatemanager.go
index 4bf9a49..eebc297 100644
--- a/internal/templatemanager/templatemanager.go
+++ b/internal/templatemanager/templatemanager.go
@@ -37,7 +37,7 @@ func NewTemplateManager(templates ...TemplateManagerTemplates) (*TemplateManager
 	templateMap := make(map[string]templateManagerRender)
 
 	for _, tmplStruct := range templates {
-		tmpl := template.New("").Funcs(templateFuncMap)
+		tmpl := template.New(tmplStruct.Name).Funcs(templateFuncMap)
 		tmpl, err := tmpl.ParseFiles(tmplStruct.Files...)
 		if err != nil {
 			return nil, err
@@ -84,7 +84,7 @@ func (tm *TemplateManager) Add(name string, files ...string) error {
 		return fmt.Errorf("you can't add template without any files")
 	}
 
-	tmpl := template.New("").Funcs(templateFuncMap)
+	tmpl := template.New(name).Funcs(templateFuncMap)
 
 	tmpl, err := tmpl.ParseFiles(files...)
 	if err != nil {
diff --git a/main.go b/main.go
index 53dbb74..a6a30b0 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,9 @@ import (
 	"github.com/golang-migrate/migrate/v4/database/sqlite3"
 	"github.com/yuin/goldmark"
 	"github.com/yuin/goldmark/parser"
-	gmhtml "github.com/yuin/goldmark/renderer/html"
+	"github.com/yuin/goldmark/renderer"
+	"github.com/yuin/goldmark/renderer/html"
+	"github.com/yuin/goldmark/util"
 
 	_ "github.com/golang-migrate/migrate/v4/source/file"
 	_ "github.com/mattn/go-sqlite3"
@@ -37,9 +39,15 @@ var (
 		),
 		goldmark.WithParserOptions(
 			parser.WithAutoHeadingID(),
+			parser.WithAttribute(),
 		),
-		goldmark.WithRendererOptions(
-			gmhtml.WithXHTML(),
+		goldmark.WithRenderer(
+			renderer.NewRenderer(
+				renderer.WithNodeRenderers(
+					util.Prioritized(tailwind.NewCustomLinkRenderer(html.WithUnsafe(), html.WithXHTML()), 50),
+					util.Prioritized(html.NewRenderer(html.WithXHTML()), 100),
+				),
+			),
 		),
 	)
 	b2Client           *b2.B2Client
diff --git a/static/input.css b/static/input.css
index 36d17b2..1e7f9fc 100644
--- a/static/input.css
+++ b/static/input.css
@@ -236,37 +236,22 @@ a:hover {
     border-style: outset;
 }
 
-.desktop-sidebar-custom {
-    width: 5vw;
-    background-size: calc(var(--squares-and-triangles-background-size) * 1vw);
-}
-
 .bg-sidebar {
     background-image: var(--squares-and-triangles-background);
     background-repeat: var(--squares-and-triangles-background-repeat);
-    background-size: calc(var(--squares-and-triangles-background-width-coef) * 1vw) calc(var(--squares-and-triangles-background-height-coef) * 1vw);
+    background-size: calc(var(--squares-and-triangles-background-width-coef) * 1dvw) calc(var(--squares-and-triangles-background-height-coef) * 1dvw);
 }
 
 .logo-custom {
-    width: 3.5vw;
-    height: 20vw;
-    font-size: 2.5vw;
-    -webkit-text-stroke: 0.1vw var(--sidebar-stroke-color);
+    width: 3.5dvw;
+    height: 20dvw;
+    font-size: 2.5dvw;
+    -webkit-text-stroke: 0.1dvw var(--sidebar-stroke-color);
     writing-mode: sideways-lr;
     text-orientation: mixed;
     display: block;
 }
 
-.border-left-custom {
-    width: 0.5vw;
-    border-right: 0.3vh dashed var(--main-dark-color);
-}
-
-.border-right-custom {
-    width: 0.5vw;
-    border-left: 0.5vh dotted var(--main-dark-color);
-}
-
 .inset-shadow {
     box-shadow: inset 0vh 1vh 1vh -1vh rgba(75, 81, 58, 0.5),
         inset 1vh 0vh 1vh -1vh rgba(75, 81, 58, 0.5),
@@ -278,8 +263,8 @@ a:hover {
     -webkit-text-stroke-color: var(--sidebar-stroke-color);
 }
 
-.text-stroke-\[0\.1vw\] {
-    -webkit-text-stroke-width: 0.1vw;
+.text-stroke-\[0\.1dvw\] {
+    -webkit-text-stroke-width: 0.1dvw;
 }
 
 .theme-wheel {
@@ -411,7 +396,7 @@ body[data-theme~="ram"] .leaflet-tile {
 
 @media (max-aspect-ratio: 0.8/1) {
     .bg-sidebar {
-        background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6vh) calc(var(--squares-and-triangles-background-height-coef) * 1.6vh);
+        background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6dvh) calc(var(--squares-and-triangles-background-height-coef) * 1.6dvh);
     }
 
     .ar-lt-0\.8\:bg-background-light {
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 88c5de5..b163387 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -14,13 +14,22 @@
 
 <body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-0.8:flex-col">
 
+    <script>
+        let map = null;
+    </script>
+
     <script>
         function changeUrl(path, toAppend = false) {
             const urlParams = new URLSearchParams(window.location.search); 
             const newPathname = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
             const newPath = toAppend ? `${newPathname}${path}` : `${path}`;
+            
             history.pushState({}, '', `${newPath}${urlParams.entries.length == 0 ? '' : '?' + urlParams.toString()}`);
+            if (location.pathname == "" || location.pathname == "/") {
+                return true;
+            }
             window.dispatchEvent(new Event('popstate'));
+            return false;
         };
     </script>
 
@@ -165,12 +174,20 @@
         <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
             saya.today
         </div>
-        <div class="text-[3dvw] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
-            <i onclick="changeUrl('/{{ .Lang }}');" class="fas fa-home flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
-            <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+        <div class="text-[3dvw] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
+            <a href="/{{ .Lang }}" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+                <i onclick="return changeUrl('/{{ .Lang }}');" class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+            </a>
+            <a href="/{{ .Lang }}/blog" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+                <i onclick="return changeUrl('/{{ .Lang }}/blog');" class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+            </a>
+            <a href="/{{ .Lang }}/map" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+                <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+            </a>
             <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
-            <i onclick="changeUrl('/../', true);" class="fas fa-circle-left flex xs:!hidden w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+            <a href="./" class="xs:!hidden w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+                <i onclick="return changeUrl('/../', true);" class="fas fa-circle-left flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+            </a>
         </div>
         <div class="theme-wheel" id="theme-wheel">
             <div class="theme-icon" data-theme="olive"></div>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index aadebac..9704502 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -1,20 +1,3 @@
-{{ define "top-embeds" }}
-<script>
-    let galleryMap = new Map();
-    let map;
-
-    window.addEventListener('popout', (e) => {
-        map.remove();
-        galleryMap.forEach((_, g, m) => {
-            g.destroy();
-        });
-        galleryMap.clear();
-        map = null;
-        galleryMap = null;
-    }, {once: true});
-</script>
-{{ end }}
-
 {{ define "body" }}
 <div class="bg-background-light flex flex-col inset-shadow px-8 py-4 overflow-y-auto">
     <p class="xs:hidden font-spectral text-2xl font-bold italic text-main-dark tracking-[.0125rem] mb-1">{{ .Title }}</p>
@@ -52,16 +35,17 @@
                 .openPopup();
         }
 
-        document.addEventListener('htmx:afterRequest', (e) => {
-            if (e.detail.target.id == 'general-page-body') {
-                initLocationMap(
-                    'map-container',
-                    {{ .MapLocationX }},
-                    {{ .MapLocationY }},
-                    {{ .MapLocationAreaMeters }}
-                );
-            }
-        }, {once: true});
+        if (map) {
+            map.remove();
+            map = null;
+        }
+
+        setTimeout(() => initLocationMap(
+            'map-container',
+            {{ .MapLocationX }},
+            {{ .MapLocationY }},
+            {{ .MapLocationAreaMeters }}
+        ), 1000);
     </script>
 {{- end }}
 </div>
@@ -70,31 +54,3 @@
 {{ define "footer" }}
 <div hx-get="/api/v1/like" hx-target="this" hx-swap="outerHTML" hx-trigger="load"></div>
 {{ end }}
-
-{{ define "bottom-embeds" }}
-<script>
-    let galleryResizeTimeout;
-
-    function resizeCb() {
-        clearTimeout(galleryResizeTimeout);
-        galleryResizeTimeout = setTimeout(() => {
-            if (map !== undefined) {
-                map.invalidateSize();
-            }
-            var oldGalleryMap = new Map(galleryMap);
-            oldGalleryMap.forEach((createFunc, g, map) => {
-                galleryMap.delete(g);
-                g.destroy();
-                createFunc();
-            });
-        }, 300);
-    }
-
-    window.addEventListener('resize', resizeCb);
-
-    document.addEventListener('popout', (e) => {
-        window.removeEventListener('resize', resizeCb);
-        galleryResizeTimeout = null;
-    });
-</script>
-{{ end }}
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 4c6fb5e..27c8a73 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -44,11 +44,17 @@
         <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
             saya.today
         </div>
-        <div class="text-[3dvw] sm:text-2xl ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
-            <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+        <div class="text-[3dvw] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
+            <a href="/{{ .Lang }}" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+                <i class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+            </a>
+            <a href="/{{ .Lang }}/blog" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+                <i class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+            </a>
+            <a href="/{{ .Lang }}/map" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
+                <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+            </a>
+            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
         </div>
         <div class="theme-wheel" id="theme-wheel">
             <div class="theme-icon" data-theme="olive"></div>
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index 041f3c8..5c3bb95 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -1,10 +1,12 @@
 {{- range .BlogPages }}
-<hr class="first-of-type:hidden border-t-1 mx-auto">
+<hr class="first-of-type:hidden my-1 border-t-2 border-dotted border-main-dark">
 <div class="m-1 flex flex-row justify-center justify-items-center">
-    <img onclick="changeUrl('{{ .ArticleLink }}');" class="cursor-pointer object-cover rounded-lg select-none w-24 h-24 aspect-square my-2.5 mr-2" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/{{ .Thumbnail }}.webp">
+    <a href="{{ .ArticleLink }}" class="w-24 h-24 basis-24 shrink-0 my-2.5 mr-2">
+        <img onclick="return changeUrl('{{ .ArticleLink }}');" class="w-full h-full aspect-square cursor-pointer object-cover rounded-lg select-none" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/{{ .Thumbnail }}.webp">
+    </a>
     <div class="grow my-0.5 mx-1 flex flex-col justify-center">
         <div class="flex flex-row gap-2 max-w-[100%]">
-            <a onclick="changeUrl('{{ .ArticleLink }}');" class="grow text-base cursor-pointer">
+            <a href="{{ .ArticleLink }}" onclick="return changeUrl('{{ .ArticleLink }}');" class="grow text-base cursor-pointer">
                 <span class="font-extrabold">{{ .Title }}</span>
                 <span class="font-extrabold select-none text-secondary">//</span>
                 <span class="italic text-secondary">{{ .ActionDate }}</span>
diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html
index 7f6ab8a..e5488b4 100644
--- a/views/partials/general-page-header.html
+++ b/views/partials/general-page-header.html
@@ -1,7 +1,9 @@
 <div {{ if .PublishedDate }} hx-get="/api/v1/tz" hx-vals='js:{timestamp: "{{ .PublishedDate }}", tz: clientTimeZone}' hx-target="#published-date" hx-swap="innerHTML" hx-trigger="load" {{ end }}
     class="flex flex-row mb-2">
-    <i onclick="changeUrl('/../', true);" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-4xl mt-auto mb-auto px-1"></i>
-    <p class="text-4xl font-spectral italic font-extrabold select-none mt-auto mb-auto pl-3 pr-3">//</p>
+    <a href="./" class="w-(--text-4xl) h-(--text-4xl) mx-1 my-auto">
+        <i onclick="return changeUrl('/../', true);" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-4xl"></i>
+    </a>
+    <p class="text-4xl font-spectral italic font-extrabold select-none my-auto pl-3 pr-3">//</p>
     <p class="text-4xl font-spectral italic text-left mt-auto">{{ .Title }}</p>
     <p id="published-date" class="grow text-2xl font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
 </div>
-- 
cgit v1.3.1+13


From c9a2858279d3d3bf48d752d5ad250303368f9ebd Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Fri, 17 Oct 2025 04:17:06 +0700
Subject: feat: add support for tags in gallery images feat: add 2x tag for an
 image in gallery feat: update layout of galleries while loading images (not
 just after)

---
 internal/glightbox/block.go         |  1 +
 internal/glightbox/html_renderer.go | 31 +++++++++++++++++++++++++------
 internal/glightbox/parser.go        | 16 ++++++++++++++--
 static/input.css                    | 16 ++++++++++++++++
 views/pages/global-map.html         |  2 +-
 5 files changed, 57 insertions(+), 9 deletions(-)

(limited to 'internal')

diff --git a/internal/glightbox/block.go b/internal/glightbox/block.go
index 696f328..e53e67b 100644
--- a/internal/glightbox/block.go
+++ b/internal/glightbox/block.go
@@ -15,6 +15,7 @@ type GLightboxBlock struct {
 
 type GLightboxImage struct {
 	URL     string
+	Tags    []string
 	Caption []byte
 }
 
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 43d4790..3da98eb 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -78,11 +78,26 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 				dataDescriptionAttribute = fmt.Sprintf("data-description=\".%s\"", glightboxDescId)
 			}
 
+			tagClassList := make([]string, 0, len(img.Tags))
+			for _, tag := range img.Tags {
+				switch tag {
+				case "2x":
+					tagClassList = append(tagClassList, "grid-item-2x")
+				}
+			}
+
 			elements = append(elements, fmt.Sprintf(`
-	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item grid-item-%s"
+	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item %s grid-item-%s"
 	    data-gallery="gallery-%s" data-title="%s" %s>
-	    <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" class="rounded-md p-1" alt="webp thumbnail" />
-	</a>`, img.URL, galleryID, galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt))
+		<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" />
+		</picture>
+	</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))
 
 			if glightboxDescId != "" {
 				elements = append(elements, fmt.Sprintf(`
@@ -114,10 +129,14 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 		percentPosition: true
 	});
 
-	imagesLoaded('.masonry-grid-%s', function() {
-		msnry_%s.layout();
+	var imgLoad_%s_timer;
+	var imgLoad_%s = imagesLoaded('.masonry-grid-%s', () => msnry_%s.layout());
+
+	imgLoad_%s.on('progress', function() {
+		clearTimeout(imgLoad_%s_timer);
+		imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 500);
 	});
-</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
 	}
 
 	return ast.WalkContinue, nil
diff --git a/internal/glightbox/parser.go b/internal/glightbox/parser.go
index ba3f22e..6780090 100644
--- a/internal/glightbox/parser.go
+++ b/internal/glightbox/parser.go
@@ -4,6 +4,7 @@ import (
 	"bytes"
 	"log/slog"
 	"regexp"
+	"strings"
 	"time"
 
 	"github.com/yuin/goldmark/ast"
@@ -60,16 +61,27 @@ func (p *GLightboxParser) Continue(node ast.Node, reader text.Reader, pc parser.
 
 	gallery := node.(*GLightboxBlock)
 
-	parts := bytes.SplitN(trimmed, []byte{'|'}, 2)
+	parts := bytes.SplitN(trimmed, []byte{'|'}, 3)
 	url := bytes.TrimSpace(parts[0])
 
 	caption := make([]byte, 0)
-	if len(parts) > 1 {
+	tagsRaw := ""
+	if len(parts) == 2 {
 		caption = bytes.TrimSpace(parts[1])
 	}
+	if len(parts) >= 3 {
+		tagsRaw = string(parts[1])
+		caption = bytes.TrimSpace(parts[2])
+	}
+
+	tags := strings.Split(tagsRaw, ",")
+	for i := range tags {
+		tags[i] = strings.TrimSpace(tags[i])
+	}
 
 	gallery.Images = append(gallery.Images, GLightboxImage{
 		URL:     string(url),
+		Tags:    tags,
 		Caption: caption,
 	})
 
diff --git a/static/input.css b/static/input.css
index d766049..8080d13 100644
--- a/static/input.css
+++ b/static/input.css
@@ -331,22 +331,38 @@ a:hover {
     width: 50%;
 }
 
+.grid-item-2x {
+    width: 100%;
+}
+
 @media (width >= 32rem) {
     .grid-item, .grid-sizer {
         width: 33%;
     }
+
+    .grid-item-2x {
+        width: 66%;
+    }
 }
 
 @media (width >= 40rem) {
     .grid-item, .grid-sizer {
         width: 25%;
     }
+
+    .grid-item-2x {
+        width: 50%;
+    }
 }
 
 @media (width >= 48rem) {
     .grid-item, .grid-sizer {
         width: 20%;
     }
+
+    .grid-item-2x {
+        width: 40%;
+    }
 }
 
 .map-container .leaflet-container {
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index d595e07..9b67514 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ .L.GlobalMap.Header }} // SAYA TODAY </title>
+    <title>{{ .L.GlobalMap.Header }} // SAYA TODAY</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-- 
cgit v1.3.1+13


From 7526d3c1dbb5564fb4156da4510a92038a6fdac8 Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Fri, 17 Oct 2025 05:09:02 +0700
Subject: feat: add tooltip for images in a gallery feat: add image index
 inside a gallery fix: return gap inside a gallery

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

(limited to 'internal')

diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 3da98eb..5514b6d 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -86,8 +86,12 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 				}
 			}
 
+			if len(img.Caption) > 0 {
+				tagClassList = append(tagClassList, "grid-tooltip")
+			}
+
 			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"
+	<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" />
@@ -97,7 +101,9 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 			<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" />
 		</picture>
-	</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))
+		<span class="grid-tooltip-text">%s</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, captionHTML, i+1))
 
 			if glightboxDescId != "" {
 				elements = append(elements, fmt.Sprintf(`
diff --git a/static/input.css b/static/input.css
index 8080d13..cfefa0d 100644
--- a/static/input.css
+++ b/static/input.css
@@ -327,10 +327,74 @@ a:hover {
     transform: scale(1.1);
 }
 
+.grid-tooltip {
+    position: relative;
+    display: inline-block;
+    box-shadow: inset 0rem 0rem 0.5rem var(--main-light-color);
+    transition: box-shadow 0.5s ease-in-out;
+}
+
+.grid-tooltip:hover {
+    box-shadow: none;
+}
+
+.grid-tooltip-text {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.5s;
+    width: 100%;
+    top: 100%;
+    background-color: var(--background-dark-color);
+    color: var(--main-dark-color);
+    text-align: center;
+    padding: 0.25rem 0.25rem;
+    margin-top: 0.25rem;
+    border-radius: 0.5rem;
+    position: absolute;
+    z-index: 15;
+}
+
+.grid-tooltip:hover .grid-tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
+.grid-tooltip-text::after {
+    content: " ";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -0.25rem;
+    border-width: 0.25rem;
+    border-style: solid;
+    border-color: transparent transparent black transparent;
+}
+
 .grid-item, .grid-sizer {
+    position: relative;
+    display: inline-block;
     width: 50%;
 }
 
+.grid-item-index {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.5s;
+    top: 0%;
+    left: 0%;
+    background-color: var(--main-light-color);
+    color: var(--background-dark-color);
+    text-align: center;
+    padding: 0.25rem 0.25rem;
+    position: absolute;
+    z-index: 14;
+}
+
+.grid-item:hover .grid-item-index {
+    visibility: hidden;
+    opacity: 0;
+}
+
 .grid-item-2x {
     width: 100%;
 }
-- 
cgit v1.3.1+13


From ecda238c01a4e6bb837f9a2fb0714648dea08d03 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Fri, 17 Oct 2025 18:39:21 +0700
Subject: feat: allow links to appear in tooltips in gallery

---
 internal/glightbox/html_renderer.go | 50 +++++++++++++++++++++++++++++--------
 static/input.css                    |  4 +--
 2 files changed, 41 insertions(+), 13 deletions(-)

(limited to 'internal')

diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 5514b6d..a9d066d 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -4,11 +4,14 @@ import (
 	"bytes"
 	"fmt"
 	"math/rand"
+	"regexp"
 	"strings"
 	"time"
 
+	"github.com/SayaAndy/saya-today-web/internal/tailwind"
 	"github.com/yuin/goldmark"
 	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/parser"
 	"github.com/yuin/goldmark/renderer"
 	"github.com/yuin/goldmark/renderer/html"
 	"github.com/yuin/goldmark/util"
@@ -16,22 +19,36 @@ import (
 
 type GLightboxHTMLRenderer struct {
 	html.Config
-	md goldmark.Markdown
+	md            goldmark.Markdown
+	anchorMatchRe *regexp.Regexp
 }
 
 func NewGLightboxHTMLRenderer(opts ...html.Option) renderer.NodeRenderer {
 	r := &GLightboxHTMLRenderer{
 		Config: html.NewConfig(),
 		md: goldmark.New(
-			goldmark.WithRendererOptions(
-				html.WithHardWraps(),
-				html.WithXHTML(),
+			goldmark.WithParserOptions(
+				parser.WithAutoHeadingID(),
+				parser.WithAttribute(),
+			),
+			goldmark.WithRenderer(
+				renderer.NewRenderer(
+					renderer.WithNodeRenderers(
+						util.Prioritized(tailwind.NewCustomLinkRenderer(
+							html.WithUnsafe(), html.WithHardWraps(), html.WithXHTML(),
+						), 50),
+						util.Prioritized(html.NewRenderer(
+							html.WithUnsafe(), html.WithHardWraps(), html.WithXHTML(),
+						), 100),
+					),
+				),
 			),
 		),
 	}
 	for _, opt := range opts {
 		opt.SetHTMLOption(&r.Config)
 	}
+	r.anchorMatchRe = regexp.MustCompile(`(?s)<\s*a(\s+[^<]*)(href\s*=\s*["'].*?["'])\s*([^<]*)>(.*?)<\s*\/\s*a\s*>`)
 	return r
 }
 
@@ -90,6 +107,8 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 				tagClassList = append(tagClassList, "grid-tooltip")
 			}
 
+			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>
@@ -101,9 +120,9 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 			<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" />
 		</picture>
-		<span class="grid-tooltip-text">%s</span>
+		<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, captionHTML, i+1))
+	</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))
 
 			if glightboxDescId != "" {
 				elements = append(elements, fmt.Sprintf(`
@@ -116,7 +135,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 		w.WriteString(fmt.Sprintf(`
 <div class="justify-content-center display-block m-1">
 	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
-	<div class="grid masonry-grid-%s">
+	<div class="grid masonry-grid-%s mx-auto">
 		<div class="grid-sizer grid-sizer-%s"></div>
 		%s
 	</div>
@@ -132,17 +151,26 @@ 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
+		percentPosition: true,
+		horizontalOrder: true
 	});
 
 	var imgLoad_%s_timer;
-	var imgLoad_%s = imagesLoaded('.masonry-grid-%s', () => msnry_%s.layout());
+	var imgLoad_%s = imagesLoaded('.masonry-grid-%s');
 
-	imgLoad_%s.on('progress', function() {
+	function initMasonryLayout_%s() {
 		clearTimeout(imgLoad_%s_timer);
 		imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 500);
+	}
+
+	imgLoad_%s.on('progress', initMasonryLayout_%s);
+
+	document.addEventListener('popout', (e) => {
+		imgLoad_%s.off('progress', initMasonryLayout_%s);
+		initMasonryLayout_%s = null;
+		imgLoad_%s = null;
 	});
-</script>`, 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, galleryID, galleryID))
 	}
 
 	return ast.WalkContinue, nil
diff --git a/static/input.css b/static/input.css
index 01a747e..910149a 100644
--- a/static/input.css
+++ b/static/input.css
@@ -122,12 +122,12 @@ html {
     --squares-and-triangles-background-height-coef: 15;
 }
 
-a {
+a, .linklike {
     color: var(--main-medium-color) !important;
     text-decoration: underline;
 }
 
-a:hover {
+a:hover, .linklike:hover {
     color: var(--main-light-color) !important;
 }
 
-- 
cgit v1.3.1+13


From 152bbebe8d2d0a07ab6958a74b5f53159c79e45f Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Fri, 17 Oct 2025 19:20:06 +0700
Subject: feat(glightbox): don't hide text in mobile devices

---
 internal/glightbox/html_renderer.go | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'internal')

diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index a9d066d..44fbd4c 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -145,7 +145,8 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 		w.WriteString(fmt.Sprintf(`
 <script>
 	var lightbox_%s = GLightbox({
-		selector: '.glightbox-%s'
+		selector: '.glightbox-%s',
+		moreLength: 0
 	});
 
 	var msnry_%s = new Masonry('.masonry-grid-%s', {
-- 
cgit v1.3.1+13