jwright/exploded-cluster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

learn site: one shared masthead for every page

Browse Source 
The three pages had each grown their own tokens, type scale and alignment, so
the openings looked like three different sites. The document shell now owns the
masthead family - tokens, centred masthead, eyebrow, title, lede, fact strip,
scroll cue and the index component - and the pages carry only their content.
The Mirror gains the section index the arc has, drops its duplicate technical
footer, and its title now uses the same magenta accent instead of a one-off
gradient.
This commit is contained in:
Jonathon Wright
2026-08-25 19:07:48 +10:00
parent ff2b8dabdc
commit f6616a5863
3 changed files with 83 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pilot/index.tpl.html
+9 -31
View File
@@ -1,37 +1,15 @@
<style>
:root{
--void:#070b14; --ink:#c9d7ef; --dim:#7286a8; --line:#1b2740;
--cyan:#3fbaf5; --magenta:#e879f9;
--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--sans);
-webkit-font-smoothing:antialiased}
.wrap{max-width:56rem;margin:0 auto;padding:0 1.25rem}
header.mast{padding:5.5rem 0 2.5rem;position:relative}
.rule{display:flex;gap:6px;margin:0 0 1.6rem}
.rule span{height:2px;border-radius:2px}
.rule span:nth-child(1){width:52px;background:var(--cyan)}
.rule span:nth-child(2){width:20px;background:var(--magenta)}
.rule span:nth-child(3){width:8px;background:var(--dim)}
.wrap{max-width:64ch;margin:0 auto;padding:0 1.25rem}
h1 em{color:transparent;background:linear-gradient(100deg,var(--cyan) 10%,var(--magenta));
-webkit-background-clip:text;background-clip:text;padding-bottom:.12em}
.stats{display:flex;flex-wrap:wrap;gap:0;margin:2.6rem 0 0;border-top:1px solid var(--line);
border-bottom:1px solid var(--line);max-width:44rem}
.stats div{flex:1 1 9rem;padding:.9rem 1.2rem .9rem 0;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--dim);margin:0 0 .3rem}
.stats dd{margin:0;font-family:var(--mono);font-size:.95rem;color:var(--cyan)}
.card{position:relative}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:linear-gradient(120deg,rgba(63,186,245,.10),transparent 55%);transition:opacity .3s ease}
.card:hover::before,.card:focus-visible::before{opacity:1}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;margin:0 0 .8rem}
h1{font-size:clamp(2.2rem,6.5vw,3.6rem);line-height:1.05;margin:0 0 1rem;text-wrap:balance;font-weight:700}
h1 em{color:var(--cyan);font-style:normal}
.lede{max-width:38rem;color:var(--dim);font-size:1.1rem;line-height:1.6;margin:0}
.chapters{display:grid;gap:1.4rem;margin:3rem 0 5rem}
.card{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:0;border:1px solid var(--line);
border-radius:.6rem;overflow:hidden;background:#0a101d;text-decoration:none;color:inherit;
@@ -57,18 +35,18 @@ footer a{color:var(--cyan)}
@media (max-width:640px){.card{grid-template-columns:1fr}.card .thumb{max-height:170px}}
</style>
<header class="mast wrap">
<div class="rule" aria-hidden="true"><span></span><span></span><span></span></div>
<header class="masthead">
<p class="eyebrow">bztmon &middot; the teaching lab</p>
<h1>Taken apart, <em>on purpose.</em></h1>
<p class="lede">Scroll-driven teardowns of machinery this lab actually runs. Each chapter is one
system, exploded - the diagrams move while the words explain them, and every claim traces back to
a running estate: configs lifted from the fleet, incidents told with their receipts.</p>
<dl class="stats">
<h1>Infrastructure is easier to trust<br><em>when you can see it come apart.</em></h1>
<p class="lede">Scroll-driven teardowns of machinery this lab actually runs. Each chapter is
one system, exploded - the diagrams move while the words explain them, and every claim traces
back to a running estate: configs lifted from the fleet, incidents told with their receipts.</p>
<dl class="mastfacts">
<div><dt>Chapters live</dt><dd>02</dd></div>
<div><dt>Subject</dt><dd>container platforms</dd></div>
<div><dt>Evidence</dt><dd>labelled, per claim</dd></div>
<div><dt>Evidence</dt><dd>labelled per claim</dd></div>
</dl>
<p class="scrollcue" aria-hidden="true">chapters<span></span></p>
</header>
<nav class="wrap" aria-label="Chapters">