From a2fd1e03ad4b452cda5d974abc414d258dc2944a Mon Sep 17 00:00:00 2001
From: nym21 <expat-epochs0i@icloud.com>
Date: Wed, 3 Jun 2026 12:41:26 +0200
Subject: [PATCH] website: redesign part 2

---
 website/cube/index.js  |  30 ++++++-----
 website/cube/style.css | 120 ++++++++++++++++++-----------------------
 2 files changed, 68 insertions(+), 82 deletions(-)

diff --git a/website/cube/index.js b/website/cube/index.js
index 55116b10b..22d2061c5 100644
--- a/website/cube/index.js
+++ b/website/cube/index.js
@@ -14,20 +14,22 @@ export function createCube({ fill = 0.5 } = {}) {
     return element;
   };
 
-  cube.append(
-    face("glass", "bottom"),
-    face("glass", "rear-right"),
-    face("glass", "rear-left"),
-    face("liquid", "bottom"),
-    face("liquid", "rear-right"),
-    face("liquid", "rear-left"),
-    face("liquid", "right"),
-    face("liquid", "left"),
-    face("liquid", "top"),
-    face("glass", "right"),
-    face("glass", "left"),
-    face("glass", "top"),
-  );
+  const faces = /** @type {const} */ ([
+    ["glass", "front", "bottom"],
+    ["glass", "rear", "right"],
+    ["glass", "rear", "left"],
+    ["liquid", "front", "bottom"],
+    ["liquid", "rear", "right"],
+    ["liquid", "rear", "left"],
+    ["liquid", "front", "right"],
+    ["liquid", "front", "left"],
+    ["liquid", "front", "top"],
+    ["glass", "front", "right"],
+    ["glass", "front", "left"],
+    ["glass", "front", "top"],
+  ]);
+
+  cube.append(...faces.map((names) => face(...names)));
 
   return cube;
 }
diff --git a/website/cube/style.css b/website/cube/style.css
index edd9acd89..c1d645db9 100644
--- a/website/cube/style.css
+++ b/website/cube/style.css
@@ -25,10 +25,7 @@
     width: var(--size);
     height: var(--size);
     transform: translateY(50%) var(--orient)
-      translate(
-        calc(var(--size) * var(--x)),
-        calc(var(--size) * var(--y))
-      )
+      translate(calc(var(--size) * var(--x)), calc(var(--size) * var(--y)))
       scale(var(--scale-x, 1), var(--scale-y));
   }
 
@@ -45,73 +42,61 @@
     --stack-shift: 0;
   }
 
-  .top,
-  .bottom {
-    --orient: rotate(30deg) skewX(-30deg);
-    --scale-y: var(--iso-scale);
+  .front {
+    &.top,
+    &.bottom {
+      --orient: rotate(30deg) skewX(-30deg);
+      --scale-y: var(--iso-scale);
+    }
+
+    &.right {
+      --orient: rotate(-30deg) skewX(-30deg);
+      --face-color: var(--face-right);
+      --x: 1;
+      --y: calc(var(--stack-shift) + var(--iso-scale));
+    }
+
+    &.left {
+      --orient: rotate(30deg) skewX(30deg);
+      --face-color: var(--face-left);
+      --x: 0;
+      --y: var(--stack-shift);
+    }
+
+    &.top {
+      --face-color: var(--face-top);
+      --x: 0;
+      --y: calc(var(--stack-shift) - var(--iso-scale));
+    }
+
+    &.bottom {
+      --face-color: var(--face-bottom);
+      --x: 1;
+      --y: 0;
+    }
   }
 
-  .right,
-  .rear-left {
-    --orient: rotate(-30deg) skewX(-30deg);
+  .rear {
+    &.right {
+      --orient: rotate(30deg) skewX(30deg);
+      --face-color: var(--face-left);
+      --x: 1;
+      --y: calc(var(--stack-shift) - var(--iso-scale));
+    }
+
+    &.left {
+      --orient: rotate(-30deg) skewX(-30deg);
+      --face-color: var(--face-top);
+      --x: 1;
+      --y: var(--stack-shift);
+      --scale-x: -1;
+    }
   }
 
-  .left,
-  .rear-right {
-    --orient: rotate(30deg) skewX(30deg);
-  }
-
-  .top,
-  .rear-right {
-    --y: calc(var(--stack-shift) - var(--iso-scale));
-  }
-
-  .left,
-  .rear-left {
-    --y: var(--stack-shift);
-  }
-
-  .right {
-    --y: calc(var(--stack-shift) + var(--iso-scale));
-  }
-
-  .bottom {
-    --y: 0;
-  }
-
-  .top {
-    --face-color: var(--face-top);
-    --x: 0;
-  }
-
-  .bottom {
-    --face-color: var(--face-bottom);
-    --x: 1;
-  }
-
-  .right {
-    --face-color: var(--face-right);
-    --x: 1;
-  }
-
-  .left {
-    --face-color: var(--face-left);
-    --x: 0;
-  }
-
-  .rear-right {
-    --face-color: var(--face-left);
-    --x: 1;
-  }
-
-  .rear-left {
-    --face-color: var(--face-top);
-    --x: 1;
-    --scale-x: -1;
-  }
-
-  .liquid.top {
-    --x: calc(1 - var(--fill));
+  .liquid {
+    &.front.top {
+      --x: calc(1 - var(--fill));
+    }
   }
 }
 
@@ -119,7 +104,6 @@
   from {
     --fill: 0.01;
   }
-
   to {
     --fill: 1;
   }