322 lines
7.1 KiB
SCSS
322 lines
7.1 KiB
SCSS
// 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%, #52220a 0%, #140801 60%, #000 100%);
|
|
--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.6);
|
|
--panel-border: rgba(244, 79, 4, 0.35);
|
|
}
|
|
|
|
html[data-theme='light'] {
|
|
--page-bg: radial-gradient(ellipse at 50% 30%, #fff8f0 0%, #fdca9e 55%, #ef9d55 100%);
|
|
--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.6);
|
|
--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);
|
|
}
|
|
|
|
// the scenes cast their projection onto the wall, so the glow of the gradient
|
|
// follows it: lib/glow.js projects the wall centre into screen space every
|
|
// frame and drives --glow-x/--glow-y; the landing keeps it centred
|
|
html:not([data-theme='light']) body:not(.landing) {
|
|
background: radial-gradient(ellipse 75% 90% at var(--glow-x, 12%) var(--glow-y, 50%), #5c2609 0%, #140801 65%, #000 100%);
|
|
}
|
|
|
|
html[data-theme='light'] body:not(.landing) {
|
|
background: radial-gradient(ellipse 75% 90% at var(--glow-x, 12%) var(--glow-y, 50%), #fff8f0 0%, #fdca9e 60%, #ef9d55 100%);
|
|
}
|
|
|
|
canvas {
|
|
display: block;
|
|
}
|
|
|
|
// page transitions: while the shapes fly out, the page content fades
|
|
// (html.leaving, set by chrome.js), the browser crossfades the documents
|
|
// (Chromium), and the next page's content fades back in. The gradient
|
|
// background never fades, so pages blend through it instead of through black.
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 0.45s;
|
|
}
|
|
|
|
canvas,
|
|
.page-nav,
|
|
.lil-gui,
|
|
.theme-toggle,
|
|
.landing-content {
|
|
animation: page-enter 0.6s ease;
|
|
transition: opacity 0.45s ease;
|
|
}
|
|
|
|
html.leaving :is(canvas, .page-nav, .lil-gui, .theme-toggle, .landing-content) {
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes page-enter {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.theme-toggle {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 1px solid var(--panel-border);
|
|
border-radius: 50%;
|
|
background: var(--panel-bg);
|
|
backdrop-filter: blur(10px);
|
|
color: var(--ink);
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
border-color: #f44f04;
|
|
}
|
|
}
|
|
|
|
// floating variant (landing page): top right
|
|
body > .theme-toggle {
|
|
position: fixed;
|
|
top: 16px;
|
|
right: 16px;
|
|
z-index: 20;
|
|
}
|
|
|
|
// top bar on the exploration pages: back link, page title, theme toggle
|
|
.page-nav {
|
|
position: fixed;
|
|
top: 16px;
|
|
left: 16px;
|
|
z-index: 10;
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
|
|
a {
|
|
color: var(--ink);
|
|
background: var(--panel-bg);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid var(--panel-border);
|
|
text-decoration: none;
|
|
padding: 14px 26px;
|
|
border-radius: 999px;
|
|
font-size: 18px;
|
|
|
|
&:hover {
|
|
border-color: #f44f04;
|
|
}
|
|
}
|
|
|
|
span {
|
|
color: var(--ink-soft);
|
|
font-size: 17px;
|
|
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: 17px;
|
|
--input-font-size: 17px;
|
|
--title-height: 44px;
|
|
--widget-height: 34px;
|
|
--spacing: 10px;
|
|
--padding: 14px;
|
|
--folder-indent: 14px;
|
|
--widget-border-radius: 8px;
|
|
|
|
&.root {
|
|
margin: 16px;
|
|
width: 370px;
|
|
border: 1px solid var(--panel-border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
&.root > .title {
|
|
letter-spacing: 0.08em;
|
|
}
|
|
}
|
|
|
|
html[data-theme='light'] .lil-gui {
|
|
--number-color: #c2410c;
|
|
--string-color: #c2410c;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.lil-gui.root {
|
|
width: calc(100vw - 24px);
|
|
max-height: 45vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.page-nav {
|
|
gap: 8px;
|
|
|
|
a,
|
|
span {
|
|
font-size: 15px;
|
|
}
|
|
|
|
a {
|
|
padding: 10px 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------- landing ---------- //
|
|
|
|
body.landing {
|
|
--card-bg: rgba(18, 7, 1, 0.5);
|
|
--card-bg-hover: rgba(42, 18, 4, 0.75);
|
|
}
|
|
|
|
html[data-theme='light'] body.landing {
|
|
--card-bg: rgba(255, 255, 255, 0.45);
|
|
--card-bg-hover: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.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);
|
|
backdrop-filter: blur(10px);
|
|
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 {
|
|
width: fit-content;
|
|
margin: 72px auto 0;
|
|
padding: 28px 40px;
|
|
border: 1px solid var(--panel-border);
|
|
border-radius: 12px;
|
|
background: var(--card-bg);
|
|
backdrop-filter: blur(10px);
|
|
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-soft);
|
|
margin: 6px 0;
|
|
}
|
|
}
|
|
}
|