website: redesign part 1

2026-07-02 23:09:01 -07:00 · 2026-06-03 12:34:05 +02:00
parent 5f5563fece
commit 90e8741fb7
209 changed files with 23945 additions and 176 deletions
@@ -0,0 +1,33 @@
+/**
+ * @param {{ fill?: number }} [options]
+ */
+export function createCube({ fill = 0.5 } = {}) {
+  const cube = document.createElement("span");
+  cube.className = "cube";
+  cube.setAttribute("aria-hidden", "true");
+  cube.style.setProperty("--fill", String(fill));
+
+  /** @param {...string} names */
+  const face = (...names) => {
+    const element = document.createElement("span");
+    element.className = `face ${names.join(" ")}`;
+    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"),
+  );
+
+  return cube;
+}
@@ -0,0 +1,132 @@
+.cube {
+  --size: 1rem;
+  --iso-scale: calc(sqrt(3) / 2);
+  --empty-alpha: 0.4;
+  --step: 0.033;
+  --width: calc(var(--size) * 2 * var(--iso-scale));
+  --height: calc(var(--size) * 2);
+  --face-base: currentColor;
+  --face-top: var(--face-base);
+  --face-right: oklch(from var(--face-base) calc(l - var(--step) * 2) c h);
+  --face-left: oklch(from var(--face-base) calc(l - var(--step)) c h);
+  --face-bottom: oklch(from var(--face-base) calc(l - var(--step) * 3) c h);
+  --is-empty: round(down, calc(1 - var(--fill)), 1);
+
+  display: inline-block;
+  position: relative;
+  flex-shrink: 0;
+  width: var(--width);
+  height: var(--height);
+  overflow: visible;
+
+  .face {
+    position: absolute;
+    transform-origin: 0 0;
+    width: var(--size);
+    height: var(--size);
+    transform: translateY(50%) var(--orient)
+      translate(
+        calc(var(--size) * var(--x)),
+        calc(var(--size) * var(--y))
+      )
+      scale(var(--scale-x, 1), var(--scale-y));
+  }
+
+  .liquid {
+    background: var(--face-color);
+    opacity: calc(1 - var(--is-empty));
+    --scale-y: calc(var(--iso-scale) * var(--fill));
+    --stack-shift: calc(var(--iso-scale) * (1 - var(--fill)));
+  }
+
+  .glass {
+    background: oklch(from var(--face-color) l c h / var(--empty-alpha));
+    --scale-y: calc(var(--iso-scale) * (1 - var(--fill)));
+    --stack-shift: 0;
+  }
+
+  .top,
+  .bottom {
+    --orient: rotate(30deg) skewX(-30deg);
+    --scale-y: var(--iso-scale);
+  }
+
+  .right,
+  .rear-left {
+    --orient: rotate(-30deg) skewX(-30deg);
+  }
+
+  .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));
+  }
+}
+
+@keyframes cube-fill {
+  from {
+    --fill: 0.01;
+  }
+
+  to {
+    --fill: 1;
+  }
+}
+
+@property --fill {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}