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

learn site: navigable chapter headers and a richer landing masthead

Browse Source 
Both chapters now carry a back link to the index and a chapter number in the
eyebrow, so the section reads as a series rather than three separate pages.
The Mirror gains a standfirst, a gradient title and a four-cell fact strip;
the landing page gains an accent rule, a stats strip and a hover wash on the
cards. The forming chapter now reads Coming soon rather than To be decided.
This commit is contained in:
Jonathon Wright
2026-08-25 18:47:16 +10:00
parent 8f2224deca
commit ff2b8dabdc
3 changed files with 68 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pilot/arc.tpl.html
+6 -1
View File
@@ -1,6 +1,7 @@
<header class="masthead">
<div class="introbg" aria-hidden="true"><img src="__HERO_INTRO__" alt=""></div>
<p class="eyebrow">The Exploded Cluster &middot; The Delivery Arc</p>
<nav class="chapnav" aria-label="Site"><a href="/">&larr; The Teaching Lab</a></nav>
<p class="eyebrow">Chapter 01 &middot; The Exploded Cluster &middot; The Delivery Arc</p>
<h1>The machine was the easy part.<br><em>Now watch how software reaches it.</em></h1>
<p class="lede">The foundations first - what an image is, what a cluster is - then the toolchain
that delivers to them: how change travels, how images are named, and how one definition serves
@@ -799,6 +800,10 @@ b{color:var(--ink)} .mono{font-family:var(--mono);font-size:.9em;color:var(--cya
mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 82%,transparent 100%)}
@media (max-width:900px){.introbg{inset:58% -60vw -2vh}.introbg img{opacity:.4}}
.masthead > :not(.introbg){position:relative}
.chapnav{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;margin:0 0 2.2rem}
.chapnav a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;
padding-bottom:2px;transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.chapnav a:hover,.chapnav a:focus-visible{color:var(--cyan);border-color:var(--cyan)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--cyan);margin:0 0 1.5rem}
.masthead h1,.thesis{font-size:clamp(1.9rem,4.8vw,3.2rem);line-height:1.1;margin:0 0 1.3rem;
pilot/index.tpl.html
+29 -5
View File
@@ -9,7 +9,25 @@
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}
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)}
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}
@@ -40,11 +58,17 @@ footer a{color:var(--cyan)}
</style>
<header class="mast wrap">
<div class="rule" aria-hidden="true"><span></span><span></span><span></span></div>
<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">
<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>
</header>
<nav class="wrap" aria-label="Chapters">
@@ -73,11 +97,11 @@ footer a{color:var(--cyan)}
</a>
<div class="card ghost" aria-hidden="true">
<span class="thumb">CHAPTER 03 &middot; FORMING</span>
<span class="thumb">IN THE WORKSHOP</span>
<span class="meta">
<span class="k">Next teardown</span>
<h2>To be decided</h2>
<p class="outcome">The lab keeps running; the chapters keep forming.</p>
<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>
pilot/mirror.tpl.html
+33 -10
View File
@@ -23,9 +23,24 @@
line-height:.98;margin:.5rem 0 1rem;text-wrap:balance;letter-spacing:-.01em}
.outcome{max-width:36rem;color:var(--ink-dim);font-size:1.12rem}
.outcome b{color:var(--ink);font-weight:600}
.backlink{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;margin-bottom:2rem}
.backlink a{color:var(--cyan);text-decoration:none}
.backlink a:hover{text-decoration:underline}
.chapnav{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;margin:0 0 2.4rem}
.chapnav a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid transparent;
padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.chapnav a:hover,.chapnav a:focus-visible{color:var(--cyan);border-color:var(--cyan)}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),var(--magenta));
-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em}
.standfirst{font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--ink);font-weight:600;
margin:.2rem 0 1rem;letter-spacing:-.01em;max-width:34rem}
.herostats{display:flex;flex-wrap:wrap;gap:0;margin:2.4rem 0 0;border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.herostats div{flex:1 1 8rem;padding:.85rem 1.1rem .85rem 0;border-right:1px solid var(--line)}
.herostats div:last-child{border-right:0}
.herostats dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-dim);margin:0 0 .25rem}
.herostats dd{margin:0;font-family:var(--mono);font-size:.92rem;color:var(--cyan)}
.scrollcue{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-dim);margin-top:3rem;display:flex;flex-direction:column;gap:.7rem}
.scrollcue span{display:block;width:1px;height:46px;background:linear-gradient(var(--cyan),transparent)}
h2{font-family:var(--sans);font-weight:700;font-size:1.85rem;letter-spacing:0;
margin:4.2rem 0 1rem;text-wrap:balance;scroll-margin-top:2.5rem}
h2 .n{color:var(--cyan);font-family:var(--mono);font-weight:500;font-size:1rem;vertical-align:.35em;margin-right:.65rem;letter-spacing:.1em}
@@ -111,13 +126,21 @@
<div class="layout">
<header class="hero">
<p class="backlink"><a href="/">&larr; The Teaching Lab</a></p>
<p class="eyebrow">Dossier / 005 &middot; operations</p>
<h1>The Mirror</h1>
<p class="outcome"><b>Outcome</b> &mdash; a pull-through OCI registry taken apart: what
the deployed version guarantees, the retention behaviour that evicts digest-pinned
content, and how each lesson translates to production. Claims carry evidence labels
throughout.</p>
<nav class="chapnav" aria-label="Site"><a href="/">&larr; The Teaching Lab</a></nav>
<p class="eyebrow">Chapter 02 &middot; Dossier 005 &middot; operations</p>
<h1>The <em>Mirror</em></h1>
<p class="standfirst">A pull-through OCI registry, taken apart.</p>
<p class="outcome">What the deployed version guarantees, the retention behaviour that
evicts digest-pinned content, and how each lesson translates to production. Every claim
carries an evidence label &mdash; and the corrections to my own first draft are on the
page, not quietly edited out.</p>
<dl class="herostats">
<div><dt>Registry</dt><dd>zot v2.1.17</dd></div>
<div><dt>Upstreams</dt><dd>5, on-demand</dd></div>
<div><dt>Platform</dt><dd>Talos / containerd</dd></div>
<div><dt>Open tests</dt><dd>6</dd></div>
</dl>
<p class="scrollcue" aria-hidden="true">scroll<span></span></p>
</header>
<div class="facts">