From e25d198cc96c071e2b70d48c175a5c85d25c6009 Mon Sep 17 00:00:00 2001
From: RGBCube <git@rgbcu.be>
Date: Tue, 3 Jun 2025 03:32:37 +0300
Subject: [PATCH] cube: make cube size a template parameter

---
 site/404.vto            |  1 +
 site/_includes/cube.vto | 26 +++++++++++---------------
 site/index.vto          |  1 +
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/site/404.vto b/site/404.vto
index 4b2bb0a..92af0d0 100644
--- a/site/404.vto
+++ b/site/404.vto
@@ -29,4 +29,5 @@ prevent_zoom: true
 {{ set cube_face_top    = cube_face }}
 {{ set cube_face_bottom = cube_face }}
 
+{{ set cube_size = "5rem" }}
 {{ include "cube.vto" }}
diff --git a/site/_includes/cube.vto b/site/_includes/cube.vto
index de9eeb6..aaccde4 100644
--- a/site/_includes/cube.vto
+++ b/site/_includes/cube.vto
@@ -1,37 +1,33 @@
 <style>
-  :root {
-    --cube-width: 5rem;
-  }
-
   html {
     font-size: min(9svw, 9svh, 4.5rem);
     overscroll-behavior: none;
   }
 
   cube-face {
-    height: var(--cube-width);
-    width: var(--cube-width);
+    height: {{ cube_size }};
+    width: {{ cube_size }};
 
     position: absolute;
   }
 
   /* Guess what? Yeah, you guessed right. Safari can't render shit. */
-  .cube-face-front  { transform: rotateY(0deg)                  translateZ(calc(var(--cube-width) / 2 - 1px)); }
-  .cube-face-top    { transform: rotateX( 89.99999999999999deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
-  .cube-face-back   { transform: rotateY(180deg)                translateZ(calc(var(--cube-width) / 2 - 1px)); }
-  .cube-face-bottom { transform: rotateX(-89.99999999999999deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
-  .cube-face-right  { transform: rotateY( 89.99999999999999deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
-  .cube-face-left   { transform: rotateY(-89.99999999999999deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
+  .cube-face-front  { transform: rotateY(0deg)                  translateZ(calc({{ cube_size }} / 2 - 1px)); }
+  .cube-face-top    { transform: rotateX( 89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
+  .cube-face-back   { transform: rotateY(180deg)                translateZ(calc({{ cube_size }} / 2 - 1px)); }
+  .cube-face-bottom { transform: rotateX(-89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
+  .cube-face-right  { transform: rotateY( 89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
+  .cube-face-left   { transform: rotateY(-89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
 </style>
 
 <cube-scene class="
   h-dvh w-dvw
   flex items-center justify-center
-  perspective-[calc(var(--cube-width)*3)]
+  perspective-[calc({{ cube_size.replaceAll(" ", "_") }}*3)]
 ">
   <cube-itself class="
-    size-(--cube-width)
-    transform-3d transform-[translateZ(-calc(var(--cube-width)/2-1px))]
+    size-[{{ cube_size }}]
+    transform-3d transform-[translateZ(-calc({{ cube_size.replaceAll(" ", "_") }}/2-1px))]
   ">
     <cube-face draggable="false" class="cube-face-front">  {{ cube_face_front }}  </cube-face>
     <cube-face draggable="false" class="cube-face-back">   {{ cube_face_back }}   </cube-face>
diff --git a/site/index.vto b/site/index.vto
index 207b526..d5fe22b 100644
--- a/site/index.vto
+++ b/site/index.vto
@@ -32,4 +32,5 @@ prevent_zoom: true
   <a draggable="false" class="{{ style }}" href="/blog/">blog</a>
 {{ /set }}
 
+{{ set cube_size = "5rem" }}
 {{ include "rgbcube.vto" }}