Navigation

Index tile

The door to a page: its name, one quiet word for what it is, and the real top of the page at its own layout, scaled down.

Examples

Two tiles from the IndexOpen “Two tiles from the Index” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

When to use it

Only on the home (and the home ending of every page). Six tiles in three rows of two, from proof to offer. A new tile is the owner’s decision.

Live: Home and every page’s ending.

Anatomy

Link: a.tile-link: the whole tile is one link.
Name: .tile-name with .tile-kind stacked under it (“Book”, “Essays”).
Frame: .tile-frame: 5px rule (4px phone), aspect 520:360 (square on phone).
Miniature: .mini: the page’s top at 1440 (390 on phone), scaled with scale(tan(atan2(100cqw, 1440px))). Written by sync-index.sh, never by hand; its links become spans.
Unused: .tile-wide (a full-width tile) is defined in site.css; no page uses it today.

States

Hover and focus: Rule and name turn link colour, 150ms.
Current page: aria-current="page" in the home ending; looks the same.

Behaviour

Phone, tablet, desktop: Two up at every width; frames line up even when names wrap (the frame sits at the bottom).
Motion: Hover colour. A click starts the tile-to-page transition (see Patterns).

Accessibility

Miniature is aria-hidden; screen readers hear “Unresolved, Book”. Plain text and images only inside a tile: no buttons or forms.

Words

Name as the page title. Kind in one to four words, sentence case.

Code

Classes: .tiles .tile .tile-link .tile-name .tile-kind .tile-frame .mini. Styles in site/assets/css/site.css.

<ul class="tiles">
<!-- tiles -->
<li class="tile"><a class="tile-link" href="/agents/"><span class="tile-name">Agents<span class="vh">, </span><span class="tile-kind">Built and run</span></span>
<div aria-hidden="true" class="tile-frame" data-vt="agents"><div class="mini">
<div class="band wrap">
<span class="band-back"><span aria-hidden="true">←  </span>Index</span>
<div class="band-title cols">
<p class="band-label">Agents</p>
<div>
<p class="display">I build agents to learn what they can carry.</p>
<p class="lede">Four agents, from a weekly check of our websites to an app for iPhone, iPad, and Mac built with a team of coding agents. Each one shows what it does, where it went wrong, and what changed. The list grows as new ones earn their place.</p>
</div>
</div>
</div>
<div class="main wrap cols">
<div class="rail">
<p class="rail-crumbs"><span><span><span aria-hidden="true">←  </span>Index</span></span></p>
<ol>
<li><span><span class="rail-n">01</span><span class="rail-t">  Spot</span></span></li>
<li><span><span class="rail-n">02</span><span class="rail-t">  Hirsla</span></span></li>
<li><span><span class="rail-n">03</span><span class="rail-t">  Briefing</span></span></li>
<li><span><span class="rail-n">04</span><span class="rail-t">  Handshake</span></span></li>
<li><span><span class="rail-n">05</span><span class="rail-t">  What carries over</span></span></li>
</ol>
<span class="rail-mark" hidden=""></span>
</div>
<div class="read">
</div>
</div>
</div></div></a></li>
<li class="tile"><a class="tile-link" href="/unresolved/"><span class="tile-name">Unresolved<span class="vh">, </span><span class="tile-kind">Book</span></span>
<div aria-hidden="true" class="tile-frame" data-vt="unresolved"><div class="mini">
<div class="band band-cover wrap">
<span class="band-back"><span aria-hidden="true">←  </span>Index</span>
<div class="band-title cols">
<div></div>
<div>
<p class="display">Unresolved</p>
<p class="lede">How complex organisations move, stall, and cost the people who lead them.</p>
</div>
</div>
</div>
<div class="cover-row wrap cols">
<div></div>
<picture class="cover">
<source sizes="240px" srcset="/assets/img/unresolved-cover-350.avif 350w, /assets/img/unresolved-cover-700.avif 700w, /assets/img/unresolved-cover-980.avif 980w" type="image/avif"/>
<img alt="" decoding="async" height="700" loading="lazy" sizes="240px" src="/assets/img/unresolved-cover-700.webp" srcset="/assets/img/unresolved-cover-350.webp 350w, /assets/img/unresolved-cover-700.webp 700w, /assets/img/unresolved-cover-980.webp 980w" width="700"/>
</picture>
</div>
</div></div></a></li>
<!-- /tiles -->
</ul>