Chromes

Project site

For a project's site: the sticky header with mark and name, the page frame, sections, hero, tiles, code blocks and the footer. site.css is the stylesheet; chrome/ holds the Astro components (ProjectLayout, Hero, Split, Toc, SectionLabel, DiagramTrack). Used by bairn, the othala site and portal, the keystone site, the cairn site, works.dunn.dev and this site.

@import '@dunn.dev/reference/tokens/index.css';
@import '@dunn.dev/reference/site.css';

import ProjectLayout from '@dunn.dev/reference/chrome/ProjectLayout.astro';

Talk

For a scroll-driven plate-book talk: the rail, the cover, the plates, the pinned stage, the ink classes and the motion. Plain CSS and one ES module, copied beside the talk's index.html. The contract is on Talks. Used by hands-and-feet, ladder-and-meter and structure-over-the-trove.

cp -r node_modules/@dunn.dev/reference/{talk,tokens} dunn.dev/reference/

<link rel="stylesheet" href="./dunn.dev/reference/talk/talk.css">

Lesson

For a lesson: two shells, a numbered rail, unit heads, a sticky side column and a theme toggle. The markup is on Lessons. Used by lesson-representation and the lessons on andrew.dunn.dev.

@import '@dunn.dev/reference/tokens/index.css';
@import '@dunn.dev/reference/lesson/lesson.css';

import { lesson } from '@dunn.dev/reference/lesson/lesson.js';

Auth

For the focused page of a sign-in, consent or device flow: one narrow column under the site header, one card, one primary action, with buttons, fields and notices. auth/auth.css layers on the project site chrome. auth/auth.standalone.css is generated from the tokens, the site.css chrome it needs and auth.css, for a page that inlines it with no build, such as a Worker's <style>. Neither carries a mark: .brand-mark is a slot, and each consumer inlines its own SVG. On a page whose main is .page-narrow the name stays visible at every width, so the reader sees which service is asking. The othala portal and keystone move to it with 0.9.0.

@import '@dunn.dev/reference/tokens/index.css';
@import '@dunn.dev/reference/site.css';
@import '@dunn.dev/reference/auth/auth.css';

<style>/* auth/auth.standalone.css, verbatim */</style>
<a class="brand" href="/"><span class="brand-mark"><svg>…</svg></span><span class="brand-name">name</span></a>
<main class="page page-narrow">…</main>

Own chrome

www.dunn.dev, cycle.dunn.dev, alasdair.dunn.dev and andrew.dunn.dev's own pages import the tokens and keep their own chrome.