abqari 1.1.0

data/themes/notebook/css/app.css

@@ -0,0 +1,205 @@
+/* Notebook — paper + ochre, mono-typeface character, dense typography.
+   Inherits all structural CSS from `_common.css`. This file is
+   intentionally near-empty: palette tokens express the visual
+   identity, density tokens express the typographic feel, and a tiny
+   set of refinements add docs-style decoration that can't be a token
+   (bracket banners, mono accents on specific UI elements, dashed
+   section dividers).
+
+   The signature trick: `--font-heading: var(--font-mono)` swaps
+   every h1–h6 to mono without any heading-specific rule.
+
+   To get the full visual experience, self-host JetBrains Mono and
+   Inter via the `fonts:` block in `config/site.yml` and run
+   `bin/fetch-fonts`. Without them, mono falls back to ui-monospace
+   and body falls back to system-ui — still distinct, just less
+   "design-aware".
+*/
+
+
+/* ==========================================================================
+   Theme tokens — palette + typography + density.
+   ========================================================================== */
+
+:root {
+  /* Base palette — paper background, ochre accent. The ochre family
+     (warm rust → goldenrod) is the colour signature; pairs with a
+     subtle paper-warm background and dark-graphite text. */
+  --color-text:    #2a2a2a;
+  --color-bg:      #f7f7f4;            /* warm paper */
+  --color-muted:   #6e6e6e;            /* 4.5:1+ on the paper bg */
+  --color-link:    #a06419;            /* deep ochre — links + primary */
+  --color-accent:  #c4811f;            /* lighter ochre — code-block left border, etc */
+  --color-rule:    rgba(0, 0, 0, 0.1);
+  --color-card-bg: #fff;
+  --color-code-bg: #ecebe6;
+
+  /* Component palette */
+  --color-primary:        #a06419;     /* deep ochre — buttons, links */
+  --color-on-primary:     #fff;
+  --color-secondary:      #6e6e6e;
+  --color-on-secondary:   #fff;
+  --color-success:        #3a8050;
+  --color-on-success:     #fff;
+  --color-danger:         #b03a3a;
+  --color-on-danger:      #fff;
+  --color-warning:        #c98a2e;     /* lighter ochre — 4.5:1+ under dark text */
+  --color-on-warning:     #2a2a2a;
+  --color-info:           #2a5d8f;     /* dusty navy — distinct from primary */
+  --color-on-info:        #fff;
+  --color-light:          #f7f7f4;
+  --color-on-light:       #2a2a2a;
+  --color-dark:           #2a2a2a;
+  --color-on-dark:        #f7f7f4;
+
+  /* Typography — Inter sans body, JetBrains Mono everywhere mono
+     appears. Both fall back to system fonts when not self-hosted.
+     `--font-heading: var(--font-mono)` is the move that makes every
+     h1–h6 read as docs/terminal — the always-visible theme signature. */
+  --font-body:    ui-sans-serif, "Inter", system-ui, -apple-system, sans-serif;
+  --font-heading: var(--font-mono);
+  --font-meta:    var(--font-mono);
+  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --font-sans:    var(--font-body);
+
+  /* Density — denser than the engine default (1.0625rem / 1.7).
+     Reinforces the "docs vibe" without overriding the `body` rule. */
+  --font-size-body:   1rem;
+  --line-height-body: 1.55;
+
+  /* Tag chip — outlined rectangle in mono, "label" feel. The engine
+     default is a plain inline link; these tokens express most of the
+     chip style. A small `.post-list__tag` rule below adds the border
+     and tighter margin (the only details that aren't expressible as
+     tokens). */
+  --tag-padding:    0.0625rem 0.4375rem;
+  --tag-radius:     2px;
+  --tag-font:       var(--font-mono);
+  --tag-font-size:  0.8125rem;
+}
+
+/* Dark deltas — only values that differ from `:root`. The
+   `:not([data-theme="light"])` guard lets an explicit toggle to
+   light fall through to `:root`'s light defaults; no dedicated
+   `[data-theme="light"]` block needed. Both blocks must stay in
+   sync — pure CSS can't share rule bodies across selectors. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-text:    #e6e6e6;
+    --color-bg:      #1c1d1f;
+    --color-muted:   #949494;
+    --color-link:    #e0a857;            /* lighter ochre for legibility on dark */
+    --color-accent:  #e0a857;
+    --color-rule:    rgba(255, 255, 255, 0.1);
+    --color-card-bg: #25262a;
+    --color-code-bg: #2a2b2e;
+
+    --color-primary:        #e0a857;
+    --color-on-primary:     #1c1d1f;
+    --color-secondary:      #949494;
+    --color-on-secondary:   #1c1d1f;
+    --color-success:        #5ba679;
+    --color-on-success:     #1c1d1f;
+    --color-danger:         #d97070;
+    --color-on-danger:      #1c1d1f;
+    --color-warning:        #e0a857;
+    --color-on-warning:     #1c1d1f;
+    --color-info:           #7ab3e3;     /* lighter dusty blue */
+    --color-on-info:        #1c1d1f;
+    --color-light:          #25262a;
+    --color-on-light:       #e6e6e6;
+    --color-dark:           #e6e6e6;
+    --color-on-dark:        #1c1d1f;
+  }
+}
+
+[data-theme="dark"] {
+  --color-text:    #e6e6e6;
+  --color-bg:      #1c1d1f;
+  --color-muted:   #949494;
+  --color-link:    #e0a857;
+  --color-accent:  #e0a857;
+  --color-rule:    rgba(255, 255, 255, 0.1);
+  --color-card-bg: #25262a;
+  --color-code-bg: #2a2b2e;
+
+  --color-primary:        #e0a857;
+  --color-on-primary:     #1c1d1f;
+  --color-secondary:      #949494;
+  --color-on-secondary:   #1c1d1f;
+  --color-success:        #5ba679;
+  --color-on-success:     #1c1d1f;
+  --color-danger:         #d97070;
+  --color-on-danger:      #1c1d1f;
+  --color-warning:        #e0a857;
+  --color-on-warning:     #1c1d1f;
+  --color-info:           #7ab3e3;
+  --color-on-info:        #1c1d1f;
+  --color-light:          #25262a;
+  --color-on-light:       #e6e6e6;
+  --color-dark:           #e6e6e6;
+  --color-on-dark:        #1c1d1f;
+}
+
+
+/* ==========================================================================
+   Notebook-specific aesthetic refinements
+   --------------------------------------------------------------------------
+   Kept minimal — these are decorations that can't be expressed as token
+   values. Everything else (mono headings, dense body, code/pre mono, paper
+   background, ochre accents) is driven by the tokens above.
+   ========================================================================== */
+
+/* Nav, pagination, and buttons in mono — carries the docs/terminal
+   voice through the page chrome. Without this only headings and meta
+   were mono and the nav was indistinguishable from minimal's; the
+   nav is the most persistent identity surface a theme has. */
+nav[aria-label="Primary"],
+.pagination,
+.btn,
+.folio-button {
+  font-family: var(--font-mono);
+}
+
+/* Buttons squared to 2px — the same corner treatment as the tag
+   chips, so interactive elements read as terminal-style labels
+   rather than the engine's default rounded rectangles. */
+.btn,
+.folio-button {
+  border-radius: 2px;
+}
+
+/* Section dividers — dashed, in the notebook docs idiom. */
+hr,
+.next-item,
+.related,
+.photo__related {
+  border-top-style: dashed;
+}
+
+/* Code blocks get a thin left border in the ochre accent. */
+pre {
+  border-left: 3px solid var(--color-accent);
+}
+
+/* Photo single-page — 1px outline on the image + colon-suffixed `key:`
+   labels in the metadata list (terminal-style key/value rendering). */
+.photo__image { border: 1px solid var(--color-rule); }
+.photo__meta dt::after { content: ":"; }
+
+/* Banners — `[draft]` / `[future]` brackets around the strong label,
+   reinforcing the docs/terminal feel. Base styling (colours, padding)
+   comes from `_common.css`; we just add the bracket decoration. */
+.draft-banner strong::before,
+.future-banner strong::before { content: "["; }
+.draft-banner strong::after,
+.future-banner strong::after  { content: "]"; }
+
+/* Tag chips — the bulk of the chip style (padding / radius / mono
+   font / smaller size) is driven by `--tag-*` tokens above. Only the
+   border + tighter margin live here as a rule, since they aren't
+   currently expressible as tokens. */
+.post-list__tag {
+  border: 1px solid var(--color-rule);
+  margin-right: 0.25rem;
+}

data/themes/sand/css/app.css

@@ -0,0 +1,179 @@
+/* Sand — sun-bleached earth for prose-led sites (memoirs, travel
+   writing, fiction). Merriweather body + Merriweather Sans headings,
+   brand-red accents, brick links, olive-charcoal dark mode. Inherits
+   structural CSS from `_common.css`. This file just sets:
+
+     1. Theme tokens (palette + typography) for both light and dark
+     2. Light/dark mode overrides
+     3. Theme-specific aesthetic refinements
+
+   Identity notes (vs the other warm theme, magazine): sand's light
+   surface is sandier/yellower than magazine's pinkish cream, its
+   accent family is brick/crimson rather than rust/orange, headings
+   are SANS (Merriweather Sans) against the serif body, and dark mode
+   is an olive-charcoal "desert night" rather than magazine's warm
+   brown-black. Links carry a real hue in both modes — the previous
+   grey `#444` links were nearly indistinguishable from body text.
+
+   The Merriweather faces are webfonts — scaffolds created with
+   `abqari new --theme sand` carry the matching `fonts:` block; see
+   docs/theming.md "Webfonts per shipped theme" if adopting sand on
+   an existing site. Without them the body falls back to Georgia. */
+
+
+/* ============================================================
+ * Theme tokens — overrides _common.css defaults.
+ *
+ * Light is declared in `:root`. Dark redeclares only the values
+ * that differ from light, in two contexts:
+ *
+ *   1. @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
+ *      — system-pref dark, unless the user toggled to light.
+ *   2. [data-theme="dark"] — explicit user toggle to dark.
+ *
+ * No [data-theme="light"] block — `:root` already holds light, and
+ * the `:not()` guard lets explicit light fall through.
+ * ============================================================ */
+
+:root {
+  /* Base palette — sun-bleached sand */
+  --color-text:    #2a2521;
+  --color-bg:      #f4efe6;
+  --color-muted:   #6f6656;
+  --color-link:    #8f2f21;            /* brick — kin to the brand red, real affordance */
+  --color-rule:    rgba(90, 70, 40, 0.22);
+  --color-card-bg: #fffdf7;
+  --color-code-bg: #eae3d2;
+
+  /* Component palette */
+  --color-primary:        #990000;             /* brand red */
+  --color-on-primary:     #fff;
+  --color-secondary:      #6f6656;
+  --color-on-secondary:   #fff;
+  --color-success:        #2d6a4f;
+  --color-on-success:     #fff;
+  --color-danger:         #c1121f;
+  --color-on-danger:      #fff;
+  --color-warning:        #e6a700;
+  --color-on-warning:     #2a2521;
+  --color-info:           #4a6fa5;
+  --color-on-info:        #fff;
+  --color-light:          #f4efe6;
+  --color-on-light:       #2a2521;
+  --color-dark:           #2a2521;
+  --color-on-dark:        #f4efe6;
+
+  /* Typography — serif prose under sans display. The sans headings
+     are sand's clearest structural difference from magazine (serif
+     over serif); both faces are webfonts, see the header comment. */
+  --font-body:    "Merriweather", Georgia, serif;
+  --font-heading: "Merriweather Sans", system-ui, sans-serif;
+  --font-meta:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  /* Buttons + UI elements use the same display sans as headings,
+     keeping the theme's typographic voice consistent across h1–h6
+     and `.btn` / `.folio-button`. */
+  --font-sans:    var(--font-heading);
+
+  /* Tag chip — soft filled chip with a small radius: quieter than
+     minimal/magazine's pills, softer than notebook's outlined
+     rectangles. Set in the meta sans so chips read as UI, not prose. */
+  --tag-bg:       var(--color-code-bg);
+  --tag-padding:  0.125rem 0.5rem;
+  --tag-radius:   var(--radius-1);
+  --tag-font:     var(--font-meta);
+
+  /* Shadow tokens — warm tints for light mode */
+  --shadow-card:  0 2px 8px rgba(70, 55, 30, 0.10);
+}
+
+/* Dark deltas — "desert night": olive-charcoal ground, bone text,
+   dry-grass gold links. Alert accents flip to dark-text-on-brighter-
+   accent (the usual dark-mode inversion; white-on-deep fails 4.5:1
+   here). Only values that differ from `:root` are redeclared; tokens
+   whose light value already works in dark (e.g. --color-on-primary:
+   #fff, --color-warning: #e6a700) are omitted. Both blocks must stay
+   in sync — pure CSS can't share rule bodies across selectors. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-text:    #eae4d3;
+    --color-bg:      #1b1a12;
+    --color-muted:   #a29a84;
+    --color-link:    #cdb380;          /* dry-grass gold */
+    --color-rule:    rgba(205, 190, 150, 0.16);
+    --color-card-bg: #252217;
+    --color-code-bg: #211f14;
+
+    --color-primary:        #c14545;   /* brighter red for dark contrast */
+    --color-secondary:      #a29a84;
+    --color-on-secondary:   #1b1a12;
+    --color-success:        #5aa07e;
+    --color-on-success:     #1b1a12;
+    --color-danger:         #e0685e;
+    --color-on-danger:      #1b1a12;
+    --color-on-warning:     #1b1a12;
+    --color-info:           #7a9cc6;
+    --color-on-info:        #1b1a12;
+    --color-light:          #252217;
+    --color-on-light:       #eae4d3;
+    --color-dark:           #eae4d3;
+    --color-on-dark:        #1b1a12;
+  }
+}
+
+[data-theme="dark"] {
+  --color-text:    #eae4d3;
+  --color-bg:      #1b1a12;
+  --color-muted:   #a29a84;
+  --color-link:    #cdb380;
+  --color-rule:    rgba(205, 190, 150, 0.16);
+  --color-card-bg: #252217;
+  --color-code-bg: #211f14;
+
+  --color-primary:        #c14545;
+  --color-secondary:      #a29a84;
+  --color-on-secondary:   #1b1a12;
+  --color-success:        #5aa07e;
+  --color-on-success:     #1b1a12;
+  --color-danger:         #e0685e;
+  --color-on-danger:      #1b1a12;
+  --color-on-warning:     #1b1a12;
+  --color-info:           #7a9cc6;
+  --color-on-info:        #1b1a12;
+  --color-light:          #252217;
+  --color-on-light:       #eae4d3;
+  --color-dark:           #eae4d3;
+  --color-on-dark:        #1b1a12;
+}
+
+
+/* ============================================================
+ * Theme-specific aesthetic refinements
+ * ============================================================ */
+
+/* Anchor decoration — a translucent tint of the link colour rather
+   than the default neutral rule colour, so underlines read warm
+   without shouting. One declaration serves both modes: the tint
+   follows `--color-link` wherever the mode takes it. */
+a {
+  text-decoration-color: color-mix(in srgb, var(--color-link) 45%, transparent);
+}
+
+/* Buttons — pill-shaped, in the display sans (via --font-sans above)
+   with a bumped weight. The pill silhouette is sand's button
+   signature; minimal/magazine keep the engine's rounded rectangle
+   and notebook squares its corners. */
+.btn,
+.folio-button {
+  border-radius: var(--radius-pill);
+  font-weight: 500;
+}
+
+/* Nav-link hover: deepen to body text rather than light up in the
+   link colour. Matches the footer social icons' muted→text treatment
+   — a low-key pointer affordance that doesn't compete with the page
+   content. The active-page indicator (`[aria-current="page"]`) keeps
+   its stronger treatment for a clear "you are here" cue. */
+.nav__links a:hover {
+  color: var(--color-text);
+}