refactor: use tailwind classes wherever possible

2 files changed, 134 insertions, 228 deletions

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%;