jwright
b67ada9c65
The shared-masthead change stripped the mirror page's local :root including four tokens the shell does not define (card, void-2, good, bad), leaving card backgrounds and status colours undefined on the live page. The index wrap was also narrowed to 64ch, squeezing the chapter cards; the masthead carries its own width limit so wrap returns to 56rem. Two American spellings in mirror prose corrected to artefact.
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:56rem;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>
|