page transition, optimize lighting
This commit is contained in:
Vincent van der Wal
+111
-44
@@ -3,22 +3,20 @@
|
||||
// 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;
|
||||
--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.75);
|
||||
--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%, #ffe7d3 60%, #ffd4b3 100%);
|
||||
--fade-bg: #ffe7d3;
|
||||
--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.85);
|
||||
--panel-bg: rgba(255, 248, 240, 0.6);
|
||||
--panel-border: rgba(244, 79, 4, 0.4);
|
||||
}
|
||||
|
||||
@@ -34,39 +32,66 @@ body {
|
||||
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 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;
|
||||
// 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;
|
||||
}
|
||||
|
||||
&.done {
|
||||
::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 {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
z-index: 20;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
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: 18px;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -75,26 +100,34 @@ canvas {
|
||||
}
|
||||
}
|
||||
|
||||
// back-link on the exploration pages; bottom-left because stats sits top-left
|
||||
// and lil-gui top-right
|
||||
// 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;
|
||||
bottom: 16px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: baseline;
|
||||
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: 6px 12px;
|
||||
padding: 14px 26px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
|
||||
&:hover {
|
||||
border-color: #f44f04;
|
||||
@@ -103,7 +136,7 @@ canvas {
|
||||
|
||||
span {
|
||||
color: var(--ink-soft);
|
||||
font-size: 14px;
|
||||
font-size: 17px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
}
|
||||
@@ -121,16 +154,22 @@ canvas {
|
||||
--number-color: #ff9a5c;
|
||||
--string-color: #ff9a5c;
|
||||
--font-family: Georgia, 'Times New Roman', serif;
|
||||
--font-size: 13px;
|
||||
--input-font-size: 13px;
|
||||
--widget-border-radius: 6px;
|
||||
--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: 12px;
|
||||
margin: 16px;
|
||||
width: 370px;
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(6px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
&.root > .title {
|
||||
@@ -143,16 +182,37 @@ html[data-theme='light'] .lil-gui {
|
||||
--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.65);
|
||||
--card-bg-hover: rgba(42, 18, 4, 0.85);
|
||||
--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.6);
|
||||
--card-bg-hover: rgba(255, 255, 255, 0.95);
|
||||
--card-bg: rgba(255, 255, 255, 0.45);
|
||||
--card-bg-hover: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.landing-bg {
|
||||
@@ -202,6 +262,7 @@ html[data-theme='light'] body.landing {
|
||||
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;
|
||||
@@ -228,7 +289,13 @@ html[data-theme='light'] body.landing {
|
||||
}
|
||||
|
||||
.soon {
|
||||
margin-top: 72px;
|
||||
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 {
|
||||
@@ -247,7 +314,7 @@ html[data-theme='light'] body.landing {
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
color: var(--ink-faint);
|
||||
color: var(--ink-soft);
|
||||
margin: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user