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;