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/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">