From 77ecff0dfb95dbfa726a777bc79d2f9359cc56e1 Mon Sep 17 00:00:00 2001 From: Meta Vens Date: Fri, 2 Oct 2026 16:21:59 +0200 Subject: [PATCH] Thing deck: the band and confidentiality line in the stage's flow, a min-height stage, and --thing-frame for the masthead and footer box Co-Authored-By: Claude Opus 5.5 --- site/quartz/static/thing/deck.css | 10 +++++----- site/quartz/styles/custom.scss | 5 +++++ 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/site/quartz/static/thing/deck.css b/site/quartz/static/thing/deck.css index 0ced0ea..aec11f1 100644 --- a/site/quartz/static/thing/deck.css +++ b/site/quartz/static/thing/deck.css @@ -34,7 +34,7 @@ .thing-deck .hud-pill b{color:var(--paper);font-weight:500} /* HERO: one screen */ -.thing-deck .stage{position:relative;overflow:hidden;display:flex;flex-direction:column;padding-top:var(--masthead-h,9rem);background:var(--inv);color:var(--inv-ink)} +.thing-deck .stage{position:relative;min-height:100vh;min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:hidden;display:flex;flex-direction:column;padding-top:var(--masthead-h,9rem);background:var(--inv);color:var(--inv-ink)} .thing-deck .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%, var(--accent), transparent 60%);opacity:.3;animation:pulse 3.2s ease-in-out 2s infinite} @keyframes pulse{50%{filter:brightness(1.35)}} .thing-deck .rays{position:absolute;left:50%;top:55%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(from 0deg, var(--inv-accent) 0deg 4deg, transparent 4deg 15deg);-webkit-mask-image:radial-gradient(circle, #000 6%, transparent 42%);mask-image:radial-gradient(circle, #000 6%, transparent 42%);opacity:0;animation:rayin .9s ease-out 2s forwards, spin 70s linear 2s infinite} @@ -43,7 +43,7 @@ .thing-deck #burst{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3} .thing-deck .flash{position:absolute;inset:0;background:var(--inv-ink);opacity:0;pointer-events:none;z-index:4;animation:flash .7s ease-out 2s both} @keyframes flash{0%{opacity:0}8%{opacity:.92}100%{opacity:0}} -.thing-deck .hero-in{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(12px,2.2vh,24px)} +.thing-deck .hero-in{position:relative;z-index:2;margin-block:auto;display:flex;flex-direction:column;gap:clamp(12px,2.2vh,24px)} .thing-deck .hero-in.shake{animation:shake .32s cubic-bezier(.36,.07,.19,.97)} .thing-deck .hero-in.shake-big{animation:shakebig .7s cubic-bezier(.36,.07,.19,.97)} @keyframes shake{20%{transform:translate(-6px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-4px,-3px)}80%{transform:translate(3px,4px)}} @@ -71,13 +71,13 @@ .thing-deck .ring.big{border-width:8px;border-color:var(--inv-ink);animation:ringbig 1.2s cubic-bezier(.1,.7,.3,1) forwards} @keyframes ring{from{transform:scale(.3);opacity:1}to{transform:scale(12);opacity:0}} @keyframes ringbig{from{transform:scale(.3);opacity:1}to{transform:scale(70);opacity:0}} -.thing-deck .ticker-w{z-index:2;transform:rotate(-2deg)} +.thing-deck .ticker-w{position:relative;z-index:2;margin:0 -4vw 8px;transform:rotate(-2deg)} .thing-deck .ticker{background:var(--accent);color:var(--accent-ink);overflow:hidden;white-space:nowrap;font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding-block:10px;animation-name:tkin;animation-duration:.6s} @keyframes tkin{from{transform:translateY(160%) skewY(4deg);opacity:0}} .thing-deck .tk{display:inline-block;animation:marquee 38s linear infinite} .thing-deck .tk span{padding-inline:22px} @keyframes marquee{to{transform:translateX(-50%)}} -.thing-deck .conf{z-index:2;text-align:center;font-family:var(--mono);font-size:12px;color:var(--ink-3);padding-inline:16px} +.thing-deck .conf{position:relative;z-index:2;text-align:center;font-family:var(--mono);font-size:12px;color:var(--ink-3);padding:0 16px 16px} /* SUMMARY */ .thing-deck .scr{display:flex;flex-direction:column} @@ -236,7 +236,7 @@ } /* reduced motion: everything in its finished, readable state */ -.thing-deck.rm .stage{height:auto;min-height:88vh;padding-block:calc(var(--masthead-h,9rem) + 96px) 160px} +.thing-deck.rm .stage{height:auto;min-height:88vh;padding-block:calc(var(--masthead-h,9rem) + 96px) 64px} .thing-deck.rm .in,.thing-deck.rm .li,.thing-deck.rm .strike::after,.thing-deck.rm .ticker,.thing-deck.rm .tk,.thing-deck.rm .flash,.thing-deck.rm .hero-bg,.thing-deck.rm .cue::after{animation:none!important} .thing-deck.rm .rays{animation:none;opacity:.12} .thing-deck.rm .flash{opacity:0} diff --git a/site/quartz/styles/custom.scss b/site/quartz/styles/custom.scss index a21186d..b6ddeb8 100644 --- a/site/quartz/styles/custom.scss +++ b/site/quartz/styles/custom.scss @@ -1126,6 +1126,8 @@ body[data-slug="Thing"] { --thing-inset: 1.7rem; } + --thing-frame: calc(1680px + 2 * var(--thing-inset)); + .page { max-width: none; padding: 0; @@ -1149,12 +1151,15 @@ body[data-slug="Thing"] { align-self: start; justify-self: center; width: 100%; + max-width: var(--thing-frame); box-sizing: border-box; padding: 0 var(--thing-inset); } .page > #quartz-body > footer { width: 100%; + max-width: var(--thing-frame); + min-width: 0; margin-inline: auto; box-sizing: border-box; padding-inline: var(--thing-inset);