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: delete the absolute ticker and confidentiality line, the fixed stage height, and the Thing chrome's literal 1680px

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

6
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;height:100vh;height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:var(--masthead-h,9rem);background:var(--inv);color:var(--inv-ink)}
.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 .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}
@ -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{position:absolute;left:-4vw;right:-4vw;bottom:56px;z-index:2;transform:rotate(-2deg)}
.thing-deck .ticker-w{z-index:2;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{position:absolute;left:0;right:0;bottom:16px;z-index:2;text-align:center;font-family:var(--mono);font-size:12px;color:var(--ink-3);padding-inline:16px}
.thing-deck .conf{z-index:2;text-align:center;font-family:var(--mono);font-size:12px;color:var(--ink-3);padding-inline:16px}
/* SUMMARY */
.thing-deck .scr{display:flex;flex-direction:column}

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

@ -1149,14 +1149,12 @@ body[data-slug="Thing"] {
align-self: start;
justify-self: center;
width: 100%;
max-width: 1680px;
box-sizing: border-box;
padding: 0 var(--thing-inset);
}
.page > #quartz-body > footer {
width: 100%;
max-width: 1680px;
margin-inline: auto;
box-sizing: border-box;
padding-inline: var(--thing-inset);