move to vite, landing page, add more shapes

2026-07-19 10:04:08 +02:00
parent 25595d8281
commit f724cbff6d
25 changed files with 2841 additions and 5017 deletions
@@ -1,3 +1,254 @@
+// theme variables; dark is the default (also covers the instant before JS sets
+// the data-theme attribute), light is the same landing palette inverted.
+// Every page shares --page-bg: the scene canvases are transparent, so the
+// landing gradient is the scenery background, 1:1.
+:root {
+    --page-bg: radial-gradient(ellipse at 50% 30%, #2a1204 0%, #120701 60%, #000 100%);
+    --fade-bg: #120701;
+    --ink: #f5e9de;
+    --ink-soft: rgba(245, 233, 222, 0.7);
+    --ink-faint: rgba(245, 233, 222, 0.55);
+    --panel-bg: rgba(18, 7, 1, 0.75);
+    --panel-border: rgba(244, 79, 4, 0.35);
+}
+
+html[data-theme='light'] {
+    --page-bg: radial-gradient(ellipse at 50% 30%, #fff8f0 0%, #ffe7d3 60%, #ffd4b3 100%);
+    --fade-bg: #ffe7d3;
+    --ink: #1b0a02;
+    --ink-soft: rgba(27, 10, 2, 0.7);
+    --ink-faint: rgba(27, 10, 2, 0.5);
+    --panel-bg: rgba(255, 248, 240, 0.85);
+    --panel-border: rgba(244, 79, 4, 0.4);
+}
+
+html,
+body {
+    min-height: 100vh;
+}
+
 body {
    margin: 0;
-}
+    background: var(--page-bg);
+    font-family: Georgia, 'Times New Roman', serif;
+    color: var(--ink);
+}
+
+canvas {
+    display: block;
+}
+
+// page transition: opaque at first paint, faded out by chrome.js once the page
+// is ready, faded back in before navigating away. High z-index so it also
+// covers stats (z-index 10000) and lil-gui.
+.fade {
+    position: fixed;
+    inset: 0;
+    z-index: 10001;
+    background: var(--fade-bg);
+    opacity: 1;
+    pointer-events: none;
+    transition: opacity 0.35s ease;
+
+    &.done {
+        opacity: 0;
+    }
+}
+
+.theme-toggle {
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    z-index: 20;
+    width: 40px;
+    height: 40px;
+    border: 1px solid var(--panel-border);
+    border-radius: 50%;
+    background: var(--panel-bg);
+    color: var(--ink);
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover {
+        border-color: #f44f04;
+    }
+}
+
+// back-link on the exploration pages; bottom-left because stats sits top-left
+// and lil-gui top-right
+.page-nav {
+    position: fixed;
+    bottom: 16px;
+    left: 16px;
+    z-index: 10;
+    display: flex;
+    gap: 12px;
+    align-items: baseline;
+    font-family: Georgia, 'Times New Roman', serif;
+
+    a {
+        color: var(--ink);
+        background: var(--panel-bg);
+        border: 1px solid var(--panel-border);
+        text-decoration: none;
+        padding: 6px 12px;
+        border-radius: 999px;
+        font-size: 14px;
+
+        &:hover {
+            border-color: #f44f04;
+        }
+    }
+
+    span {
+        color: var(--ink-soft);
+        font-size: 14px;
+        letter-spacing: 0.04em;
+    }
+}
+
+// ---------- control panel (lil-gui reskin) ---------- //
+
+.lil-gui {
+    --background-color: var(--panel-bg);
+    --text-color: var(--ink);
+    --title-background-color: transparent;
+    --title-text-color: #f44f04;
+    --widget-color: rgba(244, 79, 4, 0.18);
+    --hover-color: rgba(244, 79, 4, 0.3);
+    --focus-color: rgba(244, 79, 4, 0.45);
+    --number-color: #ff9a5c;
+    --string-color: #ff9a5c;
+    --font-family: Georgia, 'Times New Roman', serif;
+    --font-size: 13px;
+    --input-font-size: 13px;
+    --widget-border-radius: 6px;
+
+    &.root {
+        margin: 12px;
+        border: 1px solid var(--panel-border);
+        border-radius: 12px;
+        overflow: hidden;
+        backdrop-filter: blur(6px);
+    }
+
+    &.root > .title {
+        letter-spacing: 0.08em;
+    }
+}
+
+html[data-theme='light'] .lil-gui {
+    --number-color: #c2410c;
+    --string-color: #c2410c;
+}
+
+// ---------- landing ---------- //
+
+body.landing {
+    --card-bg: rgba(18, 7, 1, 0.65);
+    --card-bg-hover: rgba(42, 18, 4, 0.85);
+}
+
+html[data-theme='light'] body.landing {
+    --card-bg: rgba(255, 255, 255, 0.6);
+    --card-bg-hover: rgba(255, 255, 255, 0.95);
+}
+
+.landing-bg {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.landing-content {
+    position: relative;
+    z-index: 1;
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 10vh 24px 12vh;
+
+    header {
+        text-align: center;
+        margin-bottom: 64px;
+
+        h1 {
+            font-size: 64px;
+            font-weight: normal;
+            letter-spacing: 0.12em;
+            margin: 0;
+            color: #f44f04;
+        }
+
+        p {
+            margin: 12px 0 0;
+            font-size: 18px;
+            letter-spacing: 0.06em;
+            color: var(--ink-soft);
+        }
+    }
+}
+
+.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 20px;
+}
+
+.card {
+    display: block;
+    padding: 24px;
+    border: 1px solid var(--panel-border);
+    border-radius: 12px;
+    background: var(--card-bg);
+    color: inherit;
+    text-decoration: none;
+    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+
+    &:hover {
+        transform: translateY(-4px);
+        border-color: #f44f04;
+        background: var(--card-bg-hover);
+    }
+
+    h2 {
+        margin: 0 0 10px;
+        font-size: 22px;
+        font-weight: normal;
+        color: #f44f04;
+    }
+
+    p {
+        margin: 0;
+        font-size: 14px;
+        line-height: 1.55;
+        color: var(--ink-soft);
+    }
+}
+
+.soon {
+    margin-top: 72px;
+    text-align: center;
+
+    h3 {
+        font-weight: normal;
+        font-size: 15px;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        color: var(--ink-faint);
+        margin: 0 0 16px;
+    }
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            font-size: 14px;
+            color: var(--ink-faint);
+            margin: 6px 0;
+        }
+    }
+}