nav.bookish-running-head · Running head

A nav pattern from Classical Bookish, drawn alone below with this design's tokens and sample copy. Used in this design on: every page, as the nav. Give the section root data-pattern="nav.bookish-running-head". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The site name centred in small caps like a book's running head, plain links centred under it, a double rule beneath.
Slots
siteName, pages
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #7C1C1D · accent2 #B2635D · Libre Caslon Text / Libre Caslon Text · radius 0px · space unit 6px (full list in design/tokens.json)
Section
vertical padding step 3

Pattern notes

  • Like a book's running head: the wordmark centred in small caps, plain page links centred under it, and the `double` rule (3 px) under the whole block. Links scroll horizontally on phones.
Northfold
  • Services
  • Work
  • About
  • Contact
Layout tree (as in design/layout.json)
{
  "pattern": "nav.bookish-running-head",
  "kind": "nav",
  "slots": [
    "siteName",
    "pages"
  ],
  "tree": {
    "el": "box",
    "gap": 2,
    "pad": [
      2,
      0
    ],
    "align": "center",
    "border": "bottom",
    "children": [
      {
        "el": "logo",
        "slot": "siteName",
        "style": "wordmark"
      },
      {
        "el": "nav-links",
        "mobile": "scroll-x",
        "slot": "pages",
        "dir": "row",
        "style": "plain"
      }
    ]
  }
}
Component example: reference/nav.bookish-running-head.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>nav.bookish-running-head — Classical Bookish</title>
<link rel="stylesheet" href="base.css">
<style>
  header { padding: 18px 0 12px; display: grid; gap: 10px; justify-items: center; }
  .wordmark { font: 400 var(--step-1)/1 var(--font-heading); font-variant-caps: all-small-caps; letter-spacing: 0.12em; color: var(--heading); text-decoration: none; }
  nav ul { display: flex; gap: 28px; list-style: none; padding: 0; }
  nav a { color: var(--text); text-decoration: none; font-style: italic; } nav a[aria-current] { text-decoration: underline; }
  @media (max-width: 640px) { nav { max-width: 100%; overflow-x: auto; } nav ul { gap: 18px; white-space: nowrap; } }
</style>
</head>
<body>
<header class="wrap double">
  <a class="wordmark" href="/">Hartwell &amp; Daughters</a>
  <nav aria-label="Main"><ul><li><a href="/" aria-current="page">Catalogue</a></li><li><a href="/about">The shop</a></li><li><a href="/journal">Essays</a></li><li><a href="/visit">Visiting</a></li><li><a href="/contact">Correspondence</a></li></ul></nav>
</header>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page