GameCult/gamecult-site
Watch
9
0
Fork
You've already forked gamecult-site
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Meta Vens 2026-10-02 16:21:59 +02:00
commit 77ecff0dfb
2 changed files with 10 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
site/quartz/static/thing/deck.css
View file

@ -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}

5
site/quartz/styles/custom.scss
View file

@ -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);