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