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 page: the hero runs up behind the masthead, and masthead and footer keep the site's gutters

Browse source 
.center becomes a two-row grid on the Thing page with the masthead stacked
over the article (z-index 5) in the same cell. deck.js measures the masthead
into --masthead-h, and the stage pads its top by that amount, so masthead
plus hero fill one screen. The masthead and the site footer both read
--thing-inset, which is set per breakpoint to equal the gutters on other pages.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Meta Vens 2026-10-02 15:26:57 +02:00
commit 90c2d94eb3
3 changed files with 42 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
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;background:var(--inv);color:var(--inv-ink)}
.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 .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}
@ -236,7 +236,7 @@
}
/* reduced motion: everything in its finished, readable state */
.thing-deck.rm .stage{height:auto;min-height:88vh;padding-block:96px 160px}
.thing-deck.rm .stage{height:auto;min-height:88vh;padding-block:calc(var(--masthead-h,9rem) + 96px) 160px}
.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}

8
site/quartz/static/thing/deck.js
View file

@ -140,9 +140,11 @@
if(sr.top<vh&&sr.bottom>0)tps+=thingsN;
$('.tps').textContent=tps.toLocaleString();
}
var hdr=document.querySelector('.page-header');
function sizeHead(){if(hdr)root.style.setProperty('--masthead-h',hdr.offsetHeight+'px');}
function req(){if(!ticking){ticking=true;requestAnimationFrame(frame);}}
window.addEventListener('scroll',req,{passive:true});
window.addEventListener('resize',function(){sizeCanvas();sizeBurst();req();});
sizeCanvas();sizeBurst();frame();
if(document.fonts&&document.fonts.ready)document.fonts.ready.then(function(){lastN=-1;frame();});
window.addEventListener('resize',function(){sizeHead();sizeCanvas();sizeBurst();req();});
sizeHead();sizeCanvas();sizeBurst();frame();
if(document.fonts&&document.fonts.ready)document.fonts.ready.then(function(){sizeHead();lastN=-1;frame();});
})();

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

@ -1146,6 +1146,16 @@ article > h6 {
}
body[data-slug="Thing"] {
--thing-inset: 1.2rem;
@media all and not ($desktop) {
--thing-inset: 2.2rem;
}
@media all and ($mobile) {
--thing-inset: 1.7rem;
}
.page {
max-width: none;
padding: 0;
@ -1155,13 +1165,36 @@ body[data-slug="Thing"] {
padding: 0;
}
.page > #quartz-body .center {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"stack"
"foot";
}
.page > #quartz-body .center > .page-header {
grid-area: stack;
z-index: 5;
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;
padding: 0 1.2rem;
box-sizing: border-box;
padding-inline: var(--thing-inset);
}
.page > #quartz-body .center > article {
grid-area: stack;
min-width: 0;
background: none;
border: 0;
border-radius: 0;
@ -1174,6 +1207,7 @@ body[data-slug="Thing"] {
}
.page > #quartz-body .center > .page-footer {
grid-area: foot;
margin-top: 0;
}
}