feat: use dvw/dvh instead of vw/vh

5 files changed, 54 insertions, 86 deletions

diff --git a/static/input.css b/static/input.css
index c93fe35..668ca7a 100644
--- a/static/input.css
+++ b/static/input.css
@@ -246,13 +246,6 @@ a:hover {
     background-size: calc(var(--squares-and-triangles-background-width-coef) * 1vw) calc(var(--squares-and-triangles-background-height-coef) * 1vw);
 }
 
-.mobile-topbar-custom {
-    width: 90vw;
-    height: 8%;
-    background-size: calc(var(--squares-and-triangles-background-size) * 1.6vh);
-    margin-left: 5vw;
-}
-
 body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
     display: none !important;
 }
@@ -267,19 +260,6 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
     display: block;
 }
 
-.nav-icon-custom {
-    font-size: 3vw !important;
-    -webkit-text-stroke: 0.1vw var(--sidebar-stroke-color);
-    width: 5vw;
-    height: 5vw;
-    align-content: center;
-    text-align: center;
-}
-
-.nav-icon-custom:hover {
-    font-size: 4vw;
-}
-
 .border-left-custom {
     width: 0.5vw;
     border-right: 0.3vh dashed var(--main-dark-color);
@@ -373,7 +353,7 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
 .lg-container:not([class~="lg-inline"]) .lg-outer {
     width: 90%;
     height: 90%;
-    margin: 5vh 5vw;
+    margin: 5dvh 5dvw;
 }
 
 .lg-thumb-outer {
@@ -515,32 +495,33 @@ body[data-theme~="ram"] .leaflet-tile {
 }
 
 @media (min-aspect-ratio: 1.1/1) {
-    .ar-gt-1\.1\:mr-\[1\.2vmin\] {
-        margin-right: 1.2vmin;
+    .ar-gt-1\.1\:mr-6 {
+        margin-right: 1.5rem;
     }
 
     .ar-gt-1\.1\:w-fit {
         width: fit-content;
     }
 
-    .ar-gt-1\.1\:w-\[100vh\] {
-        width: 100vh;
+    .ar-gt-1\.1\:w-\[100dvh\] {
+        width: 100dvh;
+        flex-basis: 100dvh;
     }
 
     .ar-gt-1\.1\:min-w-fit {
         min-width: fit-content;
     }
 
-    .ar-gt-1\.1\:min-w-\[10vh\] {
-        min-width: 10vh;
+    .ar-gt-1\.1\:min-w-\[10dvh\] {
+        min-width: 10dvh;
     }
 
-    .ar-gt-1\.1\:max-w-\[20vh\] {
-        max-width: 20vh;
+    .ar-gt-1\.1\:max-w-\[20dvh\] {
+        max-width: 20dvh;
     }
 
-    .ar-gt-1\.1\:max-w-\[100vh\] {
-        max-width: 100vh;
+    .ar-gt-1\.1\:max-w-\[100dvh\] {
+        max-width: 100dvh;
     }
 
     .ar-gt-1\.1\:items-center {
@@ -561,21 +542,8 @@ body[data-theme~="ram"] .leaflet-tile {
         display: none;
     }
 
-    .nav-icon-custom {
-        font-size: 5vh !important;
-        -webkit-text-stroke: 0.1vh var(--sidebar-stroke-color);
-        width: 8vh;
-        height: 8vh;
-        align-content: center;
-        text-align: center;
-    }
-
-    .nav-icon-custom:hover {
-        font-size: 7vh;
-    }
-
     .bg-pattern-body {
-        background-size: 10vh;
+        background-size: 10dvh;
     }
 
     .ar-lt-1\.1\:grid {
@@ -590,36 +558,36 @@ body[data-theme~="ram"] .leaflet-tile {
         flex-direction: row;
     }
 
-    .ar-lt-1\.1\:h-\[8vh\] {
-        height: 8vh;
+    .ar-lt-1\.1\:h-\[8dvh\] {
+        height: 8dvh;
     }
 
-    .ar-lt-1\.1\:h-\[10vh\] {
-        height: 10vh;
+    .ar-lt-1\.1\:h-\[10dvh\] {
+        height: 10dvh;
     }
 
-    .ar-lt-1\.1\:h-\[30vh\] {
-        height: 30vh;
+    .ar-lt-1\.1\:h-\[30dvh\] {
+        height: 30dvh;
     }
 
-    .ar-lt-1\.1\:h-\[90vh\] {
-        height: 90vh;
+    .ar-lt-1\.1\:h-\[90dvh\] {
+        height: 90dvh;
     }
 
-    .ar-lt-1\.1\:w-\[8vh\] {
-        width: 8vh;
+    .ar-lt-1\.1\:w-\[8dvh\] {
+        width: 8dvh;
     }
 
     .ar-lt-1\.1\:w-\[80\%\] {
         width: 80%;
     }
 
-    .ar-lt-1\.1\:w-\[90vw\] {
-        width: 90vw;
+    .ar-lt-1\.1\:w-\[90dvw\] {
+        width: 90dvw;
     }
 
     .ar-lt-1\.1\:w-screen {
-        width: 100vw;
+        width: 100dvw;
     }
 
     .ar-lt-1\.1\:max-h-\[25\%\] {
@@ -630,16 +598,16 @@ body[data-theme~="ram"] .leaflet-tile {
         max-height: 80%;
     }
 
-    .ar-lt-1\.1\:max-h-\[calc\(100\%-25vh\)\] {
-        max-height: calc(100% - 25vh);
+    .ar-lt-1\.1\:max-h-\[92dvh\] {
+        max-height: 92dvh;
     }
 
-    .ar-lt-1\.1\:text-\[5vh\] {
-        font-size: 5vh;
+    .ar-lt-1\.1\:text-\[5dvh\] {
+        font-size: 5dvh;
     }
 
-    .ar-lt-1\.1\:ml-\[5vw\] {
-        margin-left: 5vw;
+    .ar-lt-1\.1\:ml-\[5dvw\] {
+        margin-left: 5dvw;
     }
 
     .ar-lt-1\.1\:hidden {
@@ -664,8 +632,8 @@ body[data-theme~="ram"] .leaflet-tile {
 }
 
 @media (max-aspect-ratio: 0.4/1) {
-    .ar-lt-0\.4\:w-\[100vw\] {
-        width: 100vw;
+    .ar-lt-0\.4\:w-\[100dvw\] {
+        width: 100dvw;
     }
 
     .ar-lt-0\.4\:ml-0 {
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 4a63569..435ea66 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -161,15 +161,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-[5vw] ar-lt-1.1:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-1.1:h-[8vh] ar-lt-1.1:ml-[5vw] ar-lt-0.4:ml-0">
+    <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">
             saya.today
         </div>
-        <div class="text-[3vw] ar-lt-1.1:text-[5vh] 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-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] 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-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] 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-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] 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-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] 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-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>
         <div class="theme-wheel" id="theme-wheel">
             <div class="theme-icon" data-theme="olive"></div>
@@ -179,23 +179,23 @@
         </div>
     </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="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="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-4 ml-8 pr-4">
-            <div id="general-page-header" class="flex flex-col"
+        <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"
                 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">
 
-            <div id="general-page-body" class="flex flex-col max-h-[calc(100%-7vmax)] ar-lt-1.1:max-h-[calc(100%-25vh)] grow"
+            <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">
             </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 my-1"
+            <div id="general-page-footer" class="flex flex-row basis-4 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>
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index d567711..27ae2b8 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-1.1: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-[10vh] ar-gt-1.1:max-w-[20vh] 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-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">
         <div class="flex flex-col overflow-y-auto">
             <fieldset>
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.TagsHeader }}</legend>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 78a4b7f..cd7aeba 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -20,7 +20,7 @@
     {{ .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-[40vh] ar-lt-1.1:h-[30vh]"></div>
+    <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>
     <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 7d730ea..40852e1 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -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-[5vw] ar-lt-1.1:w-screen h-screen ar-lt-1.1:h-[8vh]">
+    <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">
             saya.today
         </div>
-        <div class="text-[3vw] sm:text-2xl ar-lt-1.1:text-[5vh] 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-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] 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-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] 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-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] 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-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] 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-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>
         <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-[95vw] ar-lt-1.1:w-screen h-screen ar-lt-1.1:h-[92vh]"></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>
 
     <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>