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

---
 views/pages/blog-catalogue.html | 26 ++++++++++-----------
 views/pages/blog-page.html      | 10 ++++----
 views/pages/global-map.html     |  2 +-
 views/pages/home-page.html      | 52 ++++++++++++++++++++---------------------
 4 files changed, 45 insertions(+), 45 deletions(-)

(limited to 'views/pages')

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>
-- 
cgit v1.3.1+13