From cabead07d7992966cfb89c3709e987d50a49f75f Mon Sep 17 00:00:00 2001
From: RGBCube <git@rgbcu.be>
Date: Sat, 24 Feb 2024 15:54:13 +0300
Subject: [PATCH] Use rem instead of em

---
 site/_includes/base.vto |  1 +
 site/_includes/cube.tsx | 30 +++++++++++++++---------------
 site/_includes/text.vto | 18 +++++++++---------
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/site/_includes/base.vto b/site/_includes/base.vto
index 4bd6879..d8070b2 100644
--- a/site/_includes/base.vto
+++ b/site/_includes/base.vto
@@ -156,6 +156,7 @@
         text-decoration-line: none;
       }
     </style>
+
     {{ content }}
   </body>
 </html>
diff --git a/site/_includes/cube.tsx b/site/_includes/cube.tsx
index 9440a12..faa631d 100644
--- a/site/_includes/cube.tsx
+++ b/site/_includes/cube.tsx
@@ -17,7 +17,7 @@ const Cube = (props: CubeProps) => (
       dangerouslySetInnerHTML={{
         __html: `
       html {
-        font-size: min(9vw, 9vh, 4.5em);
+        font-size: min(9vw, 9vh, 4.5rem);
         overscroll-behavior: none;
       }
 
@@ -31,8 +31,8 @@ const Cube = (props: CubeProps) => (
 
         width: min-content;
 
-        padding: 0 0.3em;
-        border-radius: 1em;
+        padding: 0 0.3rem;
+        border-radius: 1rem;
 
         user-select: none;
       }
@@ -44,7 +44,7 @@ const Cube = (props: CubeProps) => (
       .scene {
         height: 100dvh;
         width: 100dvw;
-        perspective: 15em;
+        perspective: 15rem;
 
         display: flex;
 
@@ -53,18 +53,18 @@ const Cube = (props: CubeProps) => (
       }
 
       .cube {
-        height: 5em;
-        width: 5em;
+        height: 5rem;
+        width: 5rem;
 
         position: relative;
 
-        transform: translateZ(-calc(2.5em - 1px));
+        transform: translateZ(-calc(2.5rem - 1px));
         transform-style: preserve-3d;
       }
 
       .face {
-        width: 5em;
-        height: 5em;
+        width: 5rem;
+        height: 5rem;
 
         display: flex;
 
@@ -75,28 +75,28 @@ const Cube = (props: CubeProps) => (
       }
 
       .front {
-        transform: rotateY(0deg) translateZ(calc(2.5em - 1px));
+        transform: rotateY(0deg) translateZ(calc(2.5rem - 1px));
       }
 
       .top {
         /* Guess what? Yeah, you guessed right. Safari can't render shit. */
-        transform: rotateX(89.99999999999999deg) translateZ(calc(2.5em - 1px));
+        transform: rotateX(89.99999999999999deg) translateZ(calc(2.5rem - 1px));
       }
 
       .back {
-        transform: rotateY(180deg) translateZ(calc(2.5em - 1px));
+        transform: rotateY(180deg) translateZ(calc(2.5rem - 1px));
       }
 
       .bottom {
-        transform: rotateX(-89.99999999999999deg) translateZ(calc(2.5em - 1px));
+        transform: rotateX(-89.99999999999999deg) translateZ(calc(2.5rem - 1px));
       }
 
       .right {
-        transform: rotateY(89.99999999999999deg) translateZ(calc(2.5em - 1px));
+        transform: rotateY(89.99999999999999deg) translateZ(calc(2.5rem - 1px));
       }
 
       .left {
-        transform: rotateY(-89.99999999999999deg) translateZ(calc(2.5em - 1px));
+        transform: rotateY(-89.99999999999999deg) translateZ(calc(2.5rem - 1px));
       }
     `,
       }}
diff --git a/site/_includes/text.vto b/site/_includes/text.vto
index a1a07f2..4cc02fb 100644
--- a/site/_includes/text.vto
+++ b/site/_includes/text.vto
@@ -24,7 +24,7 @@ layout: base.vto
     font-size: large;
 
     display: initial;
-    width: min(100vw - 2em, 50em);
+    width: min(100vw - 2rem, 50rem);
   }
 
   .rotated {
@@ -43,16 +43,16 @@ layout: base.vto
     overflow-x: auto;
 
     background-color: white;
-    padding: 0.3em 0.6em;
+    padding: 0.3rem 0.6rem;
 
     /* Rotated 180deg so it's top instead of bottom. */
-    border-top-left-radius: 1em;
-    border-top-right-radius: 1em;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
   }
 
   @media (prefers-color-scheme: light) {
     nav {
-      border: 0.15em solid black;
+      border: 0.15rem solid black;
       border-bottom-width: 0;
     }
   }
@@ -60,7 +60,7 @@ layout: base.vto
   nav a {
     color: black;
     font-weight: bold;
-    margin-right: 0.6em;
+    margin-right: 0.6rem;
   }
 
   a {
@@ -72,15 +72,15 @@ layout: base.vto
   }
 
   footer {
-    border-top: 0.15em solid var(--foreground);
+    border-top: 0.15rem solid var(--foreground);
 
     display: flex;
     justify-content: center;
 
     font-size: small;
 
-    margin-bottom: 1em;
-    padding-top: 0.5em;
+    margin-bottom: 1rem;
+    padding-top: 0.5rem;
   }
 </style>