refactor: use tailwind classes wherever possible

6 files changed, 189 insertions, 283 deletions

diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
index bd73eac..e611f0b 100644
--- a/internal/lightgallery/html_renderer.go
+++ b/internal/lightgallery/html_renderer.go
@@ -38,13 +38,13 @@ func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source [
 			return ast.WalkContinue, nil
 		}
 
-		galleryID := generateDivId(4)
+		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-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
+	<hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] 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-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
+	<hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%%] ml-auto mr-auto">
 </div>`, galleryID))
 
 		var dynamicElements []string
@@ -67,8 +67,8 @@ func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source [
 				thumb:
 					"https://f003.backblazeb2.com/file/sayana-photos/thumbnails/%s.webp",
 				subHtml: `+"`"+`<div class="flex flex-row light-gallery-captions">
-								<p class="grow text-vmax1 text-left lh-0-9 font-spectral text-main-dark">%s</p>
-								<p class="text-vmax1 text-right lh-0-9 font-spectral text-secondary">%s</p>
+								<p class="grow !text-[1vmax]/[0.9] text-left font-spectral text-main-dark">%s</p>
+								<p class="!text-[1vmax]/[0.9] text-right font-spectral text-secondary">%s</p>
 							</div>`+"`"+`
 			}`, img.URL, img.URL, img.Caption, imageUrlWithoutExt, imageUrlWithoutExt, img.Caption, dayDate.Format("2006-01-02 15:04:05 -07:00")))
 		}
diff --git a/internal/tailwind/transformer.go b/internal/tailwind/transformer.go
index 51a33bc..2f052b9 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-vmax2-5 font-bold text-main-dark mb-vmin1-2 ls-vmin0-04",
-				2: "font-spectral text-vmax2 font-bold text-main-dark mb-vmin0-8 ls-vmin0-04",
-				3: "font-spectral text-vmax1-5 font-medium text-main-dark mb-vmin0-6 ls-vmin0-04",
-				4: "font-spectral text-vmax1-2 font-medium text-main-medium mb-vmin0-4 ls-vmin0-04",
-				5: "font-spectral text-vmax1 font-medium text-main-medium mb-vmin0-4 italic ls-vmin0-04",
-				6: "font-spectral text-vmax1 font-medium text-secondary mb-vmin0-4",
+				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]",
 			}
 			if class, ok := classes[node.Level]; ok {
 				node.SetAttribute([]byte("class"), []byte(class))
 			}
 
 		case *ast.Paragraph:
-			node.SetAttribute([]byte("class"), []byte("text-vmax1 font-spectral lh-2 ls-vmin0-04 timl-vmax2 mb-vmin1-6"))
+			node.SetAttribute([]byte("class"), []byte("text-[1vmax]/[2] font-spectral tracking-[0.04vmin] -indent-[2vmax] ml-[2vmax] mb-[1.6vmin]"))
 
 		case *ast.List:
 			if node.IsOrdered() {
-				node.SetAttribute([]byte("class"), []byte("list-decimal list-inside space-y-vmin0-8 mb-vmin1-6 pl-vmax2"))
+				node.SetAttribute([]byte("class"), []byte("list-decimal list-inside space-y-[0.8vmin] mb-[1.6vmin] pl-[2vmax]"))
 			} else {
-				node.SetAttribute([]byte("class"), []byte("list-disc list-inside space-y-vmin0-8 mb-vmin1-6 pl-vmax2"))
+				node.SetAttribute([]byte("class"), []byte("list-disc list-inside space-y-[0.8vmin] mb-[1.6vmin] pl-[2vmax]"))
 			}
 
 		case *ast.ListItem:
-			node.SetAttribute([]byte("class"), []byte("text-vmax1 font-spectral lh-2 ls-vmin0-04"))
+			node.SetAttribute([]byte("class"), []byte("text-[1vmax]/[2] font-spectral tracking-[0.04vmin]"))
 
 		case *ast.Blockquote:
-			node.SetAttribute([]byte("class"), []byte("border-l-vmin0-4 border-main-medium bg-background-dark p-vmin0-8 mb-vmin0-8 italic"))
+			node.SetAttribute([]byte("class"), []byte("border-l-[0.4vmin] border-main-medium bg-background-dark p-[0.8vmin] mb-[0.8vmin] 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-vmin0-8 rounded-lg overflow-x-auto mb-vmin1-6"))
+			node.SetAttribute([]byte("class"), []byte("bg-background-dark p-[0.8vmin] rounded-lg overflow-x-auto mb-[1.6vmin]"))
 
 		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-vmin1-6"))
+			node.SetAttribute([]byte("class"), []byte("max-w-full h-auto rounded-lg shadow-lg mb-[1.6vmin]"))
 
 		case *ast.Emphasis:
 			switch node.Level {
diff --git a/static/input.css b/static/input.css
index 2603afb..edecc19 100644
--- a/static/input.css
+++ b/static/input.css
@@ -194,135 +194,6 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom {
     display: none;
 }
 
-.lh-0-9 {
-    line-height: 0.9;
-}
-
-.lh-2 {
-    line-height: 2;
-}
-
-.ls-vmin0-04 {
-    letter-spacing: 0.04vmin;
-}
-
-.timl-vmax2 {
-    text-indent: 2vmax hanging;
-}
-
-.text-vmax0-8 {
-    font-size: 0.8vmax;
-}
-
-.text-vmax1 {
-    font-size: 1vmax !important;
-}
-
-.text-vmax1-2 {
-    font-size: 1.2vmax;
-}
-
-.text-vmax1-5 {
-    font-size: 1.5vmax !important;
-}
-
-.text-vmax2 {
-    font-size: 2vmax;
-}
-
-.text-vmax2-5 {
-    font-size: 2.5vmax;
-}
-
-.w-vw90 {
-    width: 90vw;
-}
-
-.w-p60 {
-    width: 60%;
-}
-
-.w-p80 {
-    width: 80%;
-}
-
-.w-p100 {
-    width: 100%;
-}
-
-.w-vmax4 {
-    width: 4vmax;
-}
-
-.h-vh40 {
-    height: 40vh;
-}
-
-.h-vh90 {
-    height: 90vh;
-}
-
-.h-vmax4 {
-    height: 4vmax;
-}
-
-.mt-vmin0-8 {
-    margin-top: 0.8vmin;
-}
-
-.mt-vmin1-6 {
-    margin-top: 1.6vmin;
-}
-
-.mx-vmin1-6 {
-    margin-left: 1.6vmin;
-    margin-right: 1.6vmin;
-}
-
-.mb-vmin0-4 {
-    margin-bottom: 0.4vmin;
-}
-
-.mb-vmin0-6 {
-    margin-bottom: 0.8vmin;
-}
-
-.mb-vmin0-8 {
-    margin-bottom: 0.8vmin;
-}
-
-.mb-vmin1-2 {
-    margin-bottom: 1.2vmin;
-}
-
-.mb-vmin1-6 {
-    margin-bottom: 1.6vmin;
-}
-
-.pl-vmin0-8 {
-    padding-left: 0.8vmin;
-}
-
-.pl-vmax2 {
-    padding-left: 2vmax;
-}
-
-.pr-vmin1-2 {
-    padding-right: 1.2vmin;
-}
-
-.p-vmin0-8 {
-    padding: 0.8vmin;
-}
-
-.p-vmin2-4 {
-    padding: 2.4vmin;
-}
-
-.space-y-vmin0-8 {
-    column-gap: 0.8vmin;
-}
-
 .lg-backdrop {
     background-color: var(--background-light-color);
     opacity: 0.8 !important;
diff --git a/static/output.css b/static/output.css
index 312a97f..ff208b4 100644
--- a/static/output.css
+++ b/static/output.css
@@ -217,12 +217,24 @@
   .m-2 {
     margin: calc(var(--spacing) * 2);
   }
+  .mx-\[1\.6vmin\] {
+    margin-inline: 1.6vmin;
+  }
   .mx-auto {
     margin-inline: auto;
   }
   .my-auto {
     margin-block: auto;
   }
+  .mt-\[0\.8vmin\] {
+    margin-top: 0.8vmin;
+  }
+  .mt-\[1\.6vmin\] {
+    margin-top: 1.6vmin;
+  }
+  .mt-\[8vh\] {
+    margin-top: 8vh;
+  }
   .mt-auto {
     margin-top: auto;
   }
@@ -232,9 +244,30 @@
   .mr-auto {
     margin-right: auto;
   }
+  .mb-\[0\.4vmin\] {
+    margin-bottom: 0.4vmin;
+  }
+  .mb-\[0\.6vmin\] {
+    margin-bottom: 0.6vmin;
+  }
+  .mb-\[0\.8vmin\] {
+    margin-bottom: 0.8vmin;
+  }
+  .mb-\[1\.2vmin\] {
+    margin-bottom: 1.2vmin;
+  }
+  .mb-\[1\.6vmin\] {
+    margin-bottom: 1.6vmin;
+  }
   .mb-auto {
     margin-bottom: auto;
   }
+  .ml-\[2vmax\] {
+    margin-left: 2vmax;
+  }
+  .ml-\[5vw\] {
+    margin-left: 5vw;
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -244,6 +277,12 @@
   .flex {
     display: flex;
   }
+  .h-\[4vmax\] {
+    height: 4vmax;
+  }
+  .h-\[40vh\] {
+    height: 40vh;
+  }
   .h-\[92vh\] {
     height: 92vh;
   }
@@ -256,6 +295,24 @@
   .max-h-\[80\%\] {
     max-height: 80%;
   }
+  .w-\[4vmax\] {
+    width: 4vmax;
+  }
+  .w-\[60\%\] {
+    width: 60%;
+  }
+  .w-\[80\%\%\] {
+    width: 80%%;
+  }
+  .w-\[80\%\] {
+    width: 80%;
+  }
+  .w-\[90vw\] {
+    width: 90vw;
+  }
+  .w-\[100\%\] {
+    width: 100%;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -316,6 +373,13 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .space-y-\[0\.8vmin\] {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(0.8vmin * var(--tw-space-y-reverse));
+      margin-block-end: calc(0.8vmin * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .justify-self-center {
     justify-self: center;
   }
@@ -345,6 +409,10 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
   }
+  .border-l-\[0\.4vmin\] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0.4vmin;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -362,8 +430,23 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
+  .p-\[0\.8vmin\] {
+    padding: 0.8vmin;
+  }
+  .p-\[2\.4vmin\] {
+    padding: 2.4vmin;
+  }
+  .px-\[0\.8vmin\] {
+    padding-inline: 0.8vmin;
+  }
+  .pr-\[1\.2vmin\] {
+    padding-right: 1.2vmin;
+  }
+  .pl-\[0\.8vmin\] {
+    padding-left: 0.8vmin;
+  }
+  .pl-\[2vmax\] {
+    padding-left: 2vmax;
   }
   .text-center {
     text-align: center;
@@ -374,12 +457,46 @@
   .text-right {
     text-align: right;
   }
+  .-indent-\[2vmax\] {
+    text-indent: calc(2vmax * -1);
+  }
   .font-patua {
     font-family: var(--font-patua);
   }
   .font-spectral {
     font-family: var(--font-spectral);
   }
+  .\!text-\[1vmax\]\/\[0\.9\] {
+    font-size: 1vmax !important;
+    line-height: 0.9 !important;
+  }
+  .text-\[0\.8vmax\]\/\[0\.9\] {
+    font-size: 0.8vmax;
+    line-height: 0.9;
+  }
+  .text-\[1\.5vmax\]\/\[2\] {
+    font-size: 1.5vmax;
+    line-height: 2;
+  }
+  .text-\[1vmax\]\/\[2\] {
+    font-size: 1vmax;
+    line-height: 2;
+  }
+  .text-\[1\.2vmax\] {
+    font-size: 1.2vmax;
+  }
+  .text-\[1\.5vmax\] {
+    font-size: 1.5vmax;
+  }
+  .text-\[1vmax\] {
+    font-size: 1vmax;
+  }
+  .text-\[2\.5vmax\] {
+    font-size: 2.5vmax;
+  }
+  .text-\[2vmax\] {
+    font-size: 2vmax;
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -392,6 +509,10 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .tracking-\[0\.04vmin\] {
+    --tw-tracking: 0.04vmin;
+    letter-spacing: 0.04vmin;
+  }
   .italic {
     font-style: italic;
   }
@@ -572,103 +693,6 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom {
 .mobile {
   display: none;
 }
-.lh-0-9 {
-  line-height: 0.9;
-}
-.lh-2 {
-  line-height: 2;
-}
-.ls-vmin0-04 {
-  letter-spacing: 0.04vmin;
-}
-.timl-vmax2 {
-  text-indent: 2vmax hanging;
-}
-.text-vmax0-8 {
-  font-size: 0.8vmax;
-}
-.text-vmax1 {
-  font-size: 1vmax !important;
-}
-.text-vmax1-2 {
-  font-size: 1.2vmax;
-}
-.text-vmax1-5 {
-  font-size: 1.5vmax !important;
-}
-.text-vmax2 {
-  font-size: 2vmax;
-}
-.text-vmax2-5 {
-  font-size: 2.5vmax;
-}
-.w-vw90 {
-  width: 90vw;
-}
-.w-p60 {
-  width: 60%;
-}
-.w-p80 {
-  width: 80%;
-}
-.w-p100 {
-  width: 100%;
-}
-.w-vmax4 {
-  width: 4vmax;
-}
-.h-vh40 {
-  height: 40vh;
-}
-.h-vh90 {
-  height: 90vh;
-}
-.h-vmax4 {
-  height: 4vmax;
-}
-.mt-vmin0-8 {
-  margin-top: 0.8vmin;
-}
-.mt-vmin1-6 {
-  margin-top: 1.6vmin;
-}
-.mx-vmin1-6 {
-  margin-left: 1.6vmin;
-  margin-right: 1.6vmin;
-}
-.mb-vmin0-4 {
-  margin-bottom: 0.4vmin;
-}
-.mb-vmin0-6 {
-  margin-bottom: 0.8vmin;
-}
-.mb-vmin0-8 {
-  margin-bottom: 0.8vmin;
-}
-.mb-vmin1-2 {
-  margin-bottom: 1.2vmin;
-}
-.mb-vmin1-6 {
-  margin-bottom: 1.6vmin;
-}
-.pl-vmin0-8 {
-  padding-left: 0.8vmin;
-}
-.pl-vmax2 {
-  padding-left: 2vmax;
-}
-.pr-vmin1-2 {
-  padding-right: 1.2vmin;
-}
-.p-vmin0-8 {
-  padding: 0.8vmin;
-}
-.p-vmin2-4 {
-  padding: 2.4vmin;
-}
-.space-y-vmin0-8 {
-  column-gap: 0.8vmin;
-}
 .lg-backdrop {
   background-color: var(--background-light-color);
   opacity: 0.8 !important;
@@ -854,6 +878,11 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom {
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -863,6 +892,10 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom {
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -940,8 +973,10 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom {
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
diff --git a/views/index.html b/views/index.html
index ce80db6..731def6 100644
--- a/views/index.html
+++ b/views/index.html
@@ -44,7 +44,7 @@
     </style>
 </head>
 
-<body data-theme="night" class="font-spectral text-main-dark text-vmax1-5 overflow-hidden bg-interlocked-hexagons h-screen flex flex-col">
+<body data-theme="night" class="font-spectral text-main-dark text-[1.5vmax] overflow-hidden bg-interlocked-hexagons h-screen flex flex-col">
 
     <div class="absolute star z-0">*</div>
     <div class="absolute star z-0">*</div>
@@ -91,21 +91,21 @@
     </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-vmax2-5 mt-vmin0-8 mb-vmin1-6">saya.today</p>
-        <div class="menu-inner-body grow bg-background-light flex flex-col mx-auto mb-vmin1-6 overflow-y-auto opacity-100">
+        <p class="font-patua mx-auto text-[2.5vmax] mt-[0.8vmin] mb-[1.6vmin]">saya.today</p>
+        <div class="menu-inner-body grow bg-background-light flex flex-col mx-auto mb-[1.6vmin] overflow-y-auto opacity-100">
             {{- range .BlogPages }}
             <div class="m-2 flex flex-row justify-center justify-items-center gap-4">
-                <img onclick="location.href='/blog/{{ .Link }}';" style="flex-grow: 0;" class="flex-1 cursor-pointer object-cover rounded-4xl select-none w-vmax4 h-vmax4" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
+                <img onclick="location.href='/blog/{{ .Link }}';" style="flex-grow: 0;" class="flex-1 cursor-pointer object-cover rounded-4xl select-none w-[4vmax] h-[4vmax]" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
                 <div class="flex-5 justify-self-center flex-col border-r-1 border-dashed border-opacity-50 border-main-medium">
                     <a href="/blog/{{ .Link }}" class="block font-extrabold">{{ .Title }}</a>
-                    <a href="/blog/{{ .Link }}" class="block italic text-vmax1 text-secondary">{{ .ActionDate }}</a>
+                    <a href="/blog/{{ .Link }}" class="block italic text-[1vmax] text-secondary">{{ .ActionDate }}</a>
                     <p>{{ .ShortDescription }}</p>
                 </div>
                 <div class="flex-3 justify-self-center flex flex-col text-right">
-                    <p class="grow text-vmax1">
+                    <p class="grow text-[1vmax]">
                         Тэги: {{ .Tags }}
                     </p>
-                    <p class="italic text-secondary text-vmax1">
+                    <p class="italic text-secondary text-[1vmax]">
                         {{ .PublishedTime }}
                     </p>
                 </div>
diff --git a/views/layouts/blog-page.html b/views/layouts/blog-page.html
index 427f33e..08a6f93 100644
--- a/views/layouts/blog-page.html
+++ b/views/layouts/blog-page.html
@@ -59,26 +59,26 @@
     <div class="bg-background-dark z-10 h-screen desktop">
         <div class="border-left-custom bg-background-dark"></div>
 
-        <div class="content-square flex flex-col bg-background-dark relative mt-vmin1-6 mx-vmin1-6">
-            <div class="flex flex-row mb-vmin0-4">
-                <i onclick="location.href='/';" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-vmax2 mt-auto mb-auto pl-vmin0-8 pr-2"></i>
-                <p class="text-vmax2 font-spectral italic font-extrabold select-none mt-auto pl-vmin0-8 pr-vmin1-2">//</p>
-                <p class="text-vmax2 font-spectral italic text-left mt-auto">{{ .Title }}</p>
-                <p class="grow text-vmax1-5 font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
+        <div class="content-square flex flex-col bg-background-dark relative mt-[1.6vmin] mx-[1.6vmin]">
+            <div class="flex flex-row mb-[0.4vmin]">
+                <i onclick="location.href='/';" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-[2vmax] mt-auto mb-auto px-[0.8vmin]"></i>
+                <p class="text-[2vmax] font-spectral italic font-extrabold select-none mt-auto pl-[0.8vmin] pr-[1.2vmin]">//</p>
+                <p class="text-[2vmax] font-spectral italic text-left mt-auto">{{ .Title }}</p>
+                <p class="grow text-[1.5vmax] font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
             </div>
-            <hr class="border-t-4 border-dotted border-main-dark mb-vmin0-8">
+            <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
 
-            <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-vmin2-4">
+            <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-[2.4vmin]">
                 {{ .ParsedMarkdownDesktop }}
                 {{- if .MapLocationX }}
-                <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
-                <div id="location-map-desktop" class="relative p-vmin0-8 flex-none ml-auto mr-auto w-p60 h-vh40"></div>
-                <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
+                <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
+                <div id="location-map-desktop" class="relative p-[0.8vmin] flex-none ml-auto mr-auto w-[60%] h-[40vh]"></div>
+                <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
                 {{- end }}
             </div>
 
-            <div class="flex flex-row mt-vmin0-8 mb-vmin0-4">
-                <p class="grow text-vmax0-8 lh-0-9 font-spectral italic text-right text-secondary mr-2">
+            <div class="flex flex-row mt-[0.8vmin] mb-[0.4vmin]">
+                <p class="grow text-[0.8vmax]/[0.9] font-spectral italic text-right text-secondary mr-2">
                     <a href="">{{ .Title }}</a> © {{ .PublishedYear }} by <a href="https://t.me/EarlInisMona">Saya Andy</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
                 </p>
                 <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
@@ -86,13 +86,13 @@
                 <img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
             </div>
 
-            <hr class="border-t-4 border-dotted border-main-dark mb-vmin0-8">
+            <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
         </div>
 
         <div class="border-right-custom bg-background-dark shadow-2xl"></div>
     </div>
 
-    <div class="mobile-topbar-custom fixed bg-squares-and-triangles bg-repeat flex-row items-center shadow-2xl w-vw90 z-20 mobile">
+    <div class="mobile-topbar-custom fixed bg-squares-and-triangles bg-repeat flex-row items-center shadow-2xl w-[90vw] z-20 mobile">
         <div class="flex flex-row gap-0 relative z-20">
             <i onclick="location.href='/';" class="fas fa-home nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
             <i class="fas fa-search nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
@@ -104,29 +104,29 @@
         </div>
     </div>
 
-    <div class="bg-background-dark flex-row z-10 w-vw90 h-[92vh] mobile" style="margin-left: 5vw; margin-top: 8vh;">
+    <div class="bg-background-dark flex-row z-10 w-[90vw] h-[92vh] mobile ml-[5vw] mt-[8vh]">
         <div class="border-left-custom bg-background-dark"></div>
 
-        <div class="content-square flex flex-col bg-background-dark relative mt-vmin1-6 mx-vmin1-6">
-            <div class="flex flex-row mb-vmin0-4">
-                <i onclick="location.href='/';" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-vmax2 mt-auto mb-auto pl-vmin0-8 pr-2"></i>
-                <p class="text-vmax2 font-spectral italic font-extrabold select-none mt-auto pl-vmin0-8 pr-vmin1-2">//</p>
-                <p class="text-vmax2 font-spectral italic text-left mt-auto">{{ .Title }}</p>
-                <p class="grow text-vmax1-5 font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
+        <div class="content-square flex flex-col bg-background-dark relative mt-[1.6vmin] mx-[1.6vmin]">
+            <div class="flex flex-row mb-[0.4vmin]">
+                <i onclick="location.href='/';" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-[2vmax] mt-auto mb-auto px-[0.8vmin]"></i>
+                <p class="text-[2vmax] font-spectral italic font-extrabold select-none mt-auto pl-[0.8vmin] pr-[1.2vmin]">//</p>
+                <p class="text-[2vmax] font-spectral italic text-left mt-auto">{{ .Title }}</p>
+                <p class="grow text-[1.5vmax] font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
             </div>
-            <hr class="border-t-4 border-dotted border-main-dark mb-vmin0-8">
+            <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
 
-            <div class="bg-background-light flex flex-col overflow-y-auto inset-shadow p-vmin2-4 max-h-[80%]">
+            <div class="bg-background-light flex flex-col overflow-y-auto inset-shadow p-[2.4vmin] max-h-[80%]">
                 {{ .ParsedMarkdownMobile }}
                 {{- if .MapLocationX }}
-                <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
-                <div id="location-map-mobile" class="relative p-vmin0-8 flex-none ml-auto mr-auto w-p100 h-vh40"></div>
-                <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
+                <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
+                <div id="location-map-mobile" class="relative p-[0.8vmin] flex-none ml-auto mr-auto w-[100%] h-[40vh]"></div>
+                <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
                 {{- end }}
             </div>
 
-            <div class="flex flex-row mt-vmin0-8 mb-vmin0-4">
-                <p class="grow text-vmax0-8 lh-0-9 font-spectral italic text-right text-secondary mr-2">
+            <div class="flex flex-row mt-[0.8vmin] mb-[0.4vmin]">
+                <p class="grow text-[0.8vmax]/[0.9] font-spectral italic text-right text-secondary mr-2">
                     <a href="">{{ .Title }}</a> © {{ .PublishedYear }} by <a href="https://t.me/EarlInisMona">Saya Andy</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
                 </p>
                 <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
@@ -134,7 +134,7 @@
                 <img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
             </div>
 
-            <hr class="border-t-4 border-dotted border-main-dark mb-vmin0-8">
+            <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
         </div>
 
         <div class="border-right-custom bg-background-dark shadow-2xl"></div>