Nav
The site navigation: text links over the top of every page. Included by BaseLayout.
- Links: Home · About · Work · CV · LinkedIn · Contact. CV and LinkedIn open in a new tab and are hidden below 744 (four links fit on a phone, six don't).
- Current page in orange (
--color-text-brand); hover and focus show an underline. - Position: absolute over the page, on the page margin (
--grid-margin), above everything (--z-nav).
| Token | Base | ≥ 744 | Note |
|---|---|---|---|
--nav-gap | var(--spacing-lg) | var(--spacing-xl) | |
--nav-extra-display | none | list-item | |
--type-nav-size | 16px | constant at all widths | |
--z-nav | 100 | site nav, above everything |
Chapter nav
Inside a case study, a second, sticky bar navigates the article's chapters, in the article's accent. Full guidance on its own page: Chapter nav.