jwright
f6616a5863
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.
94 lines
4.9 KiB
HTML
94 lines
4.9 KiB
HTML
<style>
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--sans);
|
|
-webkit-font-smoothing:antialiased}
|
|
.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}
|
|
.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}
|
|
h1 em{color:var(--cyan);font-style:normal}
|
|
.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;
|
|
transition:border-color .25s}
|
|
.card:hover,.card:focus-visible{border-color:var(--cyan)}
|
|
.card .thumb{background:#050810;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
|
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
|
|
.card .meta{padding:1.4rem 1.5rem}
|
|
.card .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
|
|
.card h2{margin:.5rem 0 .5rem;font-size:1.6rem;line-height:1.15}
|
|
.card h2 .arrow{color:var(--cyan);transition:transform .25s;display:inline-block}
|
|
.card:hover h2 .arrow{transform:translateX(6px)}
|
|
.card .outcome{margin:0;color:var(--dim);font-size:.98rem;line-height:1.55}
|
|
.card .outcome b{color:var(--ink);font-weight:600;font-family:var(--mono);font-size:.78rem;
|
|
letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
|
|
.card.ghost{border-style:dashed;opacity:.55}
|
|
.card.ghost .thumb{min-height:130px;font-family:var(--mono);color:var(--dim);font-size:.8rem;letter-spacing:.15em}
|
|
footer{border-top:1px solid var(--line);padding:1.4rem 0 3rem;color:var(--dim);
|
|
font-family:var(--mono);font-size:.82rem}
|
|
footer a{color:var(--cyan)}
|
|
.sig{margin:0;letter-spacing:.12em;line-height:1.9;color:var(--dim)}
|
|
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
|
|
@media (max-width:640px){.card{grid-template-columns:1fr}.card .thumb{max-height:170px}}
|
|
</style>
|
|
|
|
<header class="masthead">
|
|
<p class="eyebrow">bztmon · the teaching lab</p>
|
|
<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>
|
|
</dl>
|
|
<p class="scrollcue" aria-hidden="true">chapters<span></span></p>
|
|
</header>
|
|
|
|
<nav class="wrap" aria-label="Chapters">
|
|
<div class="chapters">
|
|
|
|
<a class="card" href="/cluster">
|
|
<span class="thumb"><img src="__THUMB_CLUSTER__" alt="" width="1200" height="675" loading="eager" decoding="async"></span>
|
|
<span class="meta">
|
|
<span class="k">Chapter 01 · Dossier 004</span>
|
|
<h2>The Exploded Cluster <span class="arrow">→</span></h2>
|
|
<p class="outcome"><b>Outcome</b> — how software reaches a container platform: images,
|
|
clusters, nodes, pods, traffic, GitOps, the image supply chain and Helm - eleven courses,
|
|
each one machine drawn apart and wired to your scroll.</p>
|
|
</span>
|
|
</a>
|
|
|
|
<a class="card" href="/mirror">
|
|
<span class="thumb"><img src="__THUMB_MIRROR__" alt="" width="1600" height="872" loading="eager" decoding="async"></span>
|
|
<span class="meta">
|
|
<span class="k">Chapter 02 · Dossier 005</span>
|
|
<h2>The Mirror <span class="arrow">→</span></h2>
|
|
<p class="outcome"><b>Outcome</b> — how a zot pull-through registry behaves under Talos and
|
|
containerd: upstream routing, digest preservation, garbage collection, authentication
|
|
rollout and failure modes, with the lab evidence behind each decision.</p>
|
|
</span>
|
|
</a>
|
|
|
|
<div class="card ghost" aria-hidden="true">
|
|
<span class="thumb">IN THE WORKSHOP</span>
|
|
<span class="meta">
|
|
<span class="k">Chapter 03</span>
|
|
<h2>Coming soon</h2>
|
|
<p class="outcome">In the workshop now. The lab keeps running, so the chapters keep forming.</p>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
<footer class="wrap">
|
|
<p style="margin:0 0 .9rem">The Teaching Lab · each chapter documents infrastructure I run.</p>
|
|
<p class="sig">© 2026 Jonathon Wright · <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>
|
|
· hand-built static, shipped via GitOps · <a href="https://www.bztmon.com/">bztmon.com</a></p>
|
|
</footer>
|