abqari 1.1.0

data/themes/custom/css/app.css

@@ -0,0 +1,176 @@
+/* Custom — your starting point for a site that looks like you.
+
+   Edit the copy in YOUR SITE, not this one: for gem-installed sites
+   this file lives inside the gem. `abqari new --theme custom` copies
+   it to your site's `themes/custom/css/app.css` automatically, and
+   `abqari theme eject custom` does the same for an existing site.
+   A site-local copy always shadows the gem's.
+
+   The layout, component library, and page structure all live in
+   `app/assets/css/_common.css` and load automatically — you don't
+   need to copy that. Themes own just three things:
+
+     1. PALETTE      — colour CSS variables (light + dark)
+     2. FONTS        — typography variables
+     3. REFINEMENTS  — small theme-specific aesthetic tweaks
+
+   The full token reference is in the engine's docs/theming.md.
+   To activate: set `theme: custom` in `config/site.yml`.
+
+   Want to start from one of the other shipped themes instead?
+   `abqari theme eject minimal --as mytheme` (or magazine, notebook,
+   sand) forks it under your own name.
+*/
+
+
+/* ============================================================
+ * Theme tokens — palette + typography.
+ *
+ * Change these CSS variables and most of your site follows. Light
+ * is declared in `:root`; dark redeclares only the values that
+ * differ.
+ *
+ * Two dark 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 above lets explicit light fall through.
+ * ============================================================ */
+
+:root {
+  /* Base palette */
+  --color-text:    #1a1a1a;                  /* main body text */
+  --color-bg:      #fafafa;                  /* page background */
+  --color-muted:   #6b6b6b;                  /* dates, captions, secondary text */
+  --color-link:    #0066cc;                  /* link colour + focus-visible outline */
+  --color-rule:    rgba(127, 127, 127, 0.2); /* lines, borders */
+  --color-card-bg: #fff;                     /* card / testimonial / book-grid bg */
+  --color-code-bg: rgba(127, 127, 127, 0.08);/* inline code + pre */
+
+  /* Component palette — feeds the .btn-*, .folio-button-*, .card
+     classes in _common.css. Each colour has a paired
+     `--color-on-<name>` which is the text colour to use when that
+     colour is the background. */
+  --color-primary:        #0066cc;
+  --color-on-primary:     #fff;
+  --color-secondary:      #6b6b6b;
+  --color-on-secondary:   #fff;
+  --color-success:        #198754;
+  --color-on-success:     #fff;
+  --color-danger:         #dc3545;
+  --color-on-danger:      #fff;
+  --color-warning:        #ffc107;
+  --color-on-warning:     #1a1a1a;
+  --color-info:           #0dcaf0;
+  --color-on-info:        #1a1a1a;
+  --color-light:          #f8f9fa;
+  --color-on-light:       #1a1a1a;
+  --color-dark:           #1a1a1a;
+  --color-on-dark:        #f8f9fa;
+
+  /* Typography. The two knobs you'll typically adjust are
+     --font-body and --font-heading. --font-meta / --font-mono /
+     --font-sans default to sensible values and only need overriding
+     when the theme wants a specific face. */
+  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-heading: var(--font-body);
+  --font-meta:    var(--font-body);
+  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --font-sans:    var(--font-body);
+}
+
+/* Dark deltas — only redeclare values that differ from `:root`. 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:    #ececec;
+    --color-bg:      #111;
+    --color-muted:   #9a9a9a;
+    --color-link:    #6cb;
+    --color-rule:    rgba(255, 255, 255, 0.15);
+    --color-card-bg: #1c1c1c;
+    --color-code-bg: rgba(255, 255, 255, 0.08);
+
+    --color-primary:        #6cb;
+    --color-on-primary:     #111;
+    --color-secondary:      #9a9a9a;
+    --color-on-secondary:   #111;
+    --color-success:        #4caf7a;
+    --color-on-success:     #111;
+    --color-danger:         #f06b75;
+    --color-on-danger:      #111;
+    --color-on-warning:     #111;
+    --color-info:           #6cb;
+    --color-on-info:        #111;
+    --color-light:          #1c1c1c;
+    --color-on-light:       #ececec;
+    --color-dark:           #ececec;
+    --color-on-dark:        #111;
+  }
+}
+
+[data-theme="dark"] {
+  --color-text:    #ececec;
+  --color-bg:      #111;
+  --color-muted:   #9a9a9a;
+  --color-link:    #6cb;
+  --color-rule:    rgba(255, 255, 255, 0.15);
+  --color-card-bg: #1c1c1c;
+  --color-code-bg: rgba(255, 255, 255, 0.08);
+
+  --color-primary:        #6cb;
+  --color-on-primary:     #111;
+  --color-secondary:      #9a9a9a;
+  --color-on-secondary:   #111;
+  --color-success:        #4caf7a;
+  --color-on-success:     #111;
+  --color-danger:         #f06b75;
+  --color-on-danger:      #111;
+  --color-on-warning:     #111;
+  --color-info:           #6cb;
+  --color-on-info:        #111;
+  --color-light:          #1c1c1c;
+  --color-on-light:       #ececec;
+  --color-dark:           #ececec;
+  --color-on-dark:        #111;
+}
+
+
+/* ============================================================
+ * Theme-specific aesthetic refinements
+ *
+ * The structural CSS in `_common.css` already handles 95% of styling
+ * via the variables you set above. Add small overrides here for the
+ * details that make your theme feel distinct: anchor decoration,
+ * heading sizes, button font, custom hover effects, etc.
+ *
+ * Examples below — uncomment / edit / delete as you go. Keep the
+ * file small; if you find yourself rewriting a whole component,
+ * that's a sign the structural rule itself should change in
+ * `_common.css`.
+ * ============================================================ */
+
+/* Hover state for the brand link — lower opacity gives a subtle press
+   feel without changing the colour. */
+/* .nav__brand:hover { opacity: 0.7; } */
+
+/* Tighter underline-offset for a more compact reading feel. */
+/* a { text-underline-offset: 2px; } */
+
+/* Article header — date directly under the h1, no extra spacing. */
+/* article header h1 { margin-bottom: 0.25rem; } */
+/* article header p  { margin-top: 0; font-size: 0.875rem; color: var(--color-muted); } */
+
+/* Pill-shaped tag chips on post-list cards. The engine's default is
+   a plain inline link with no chrome; set these `--tag-*` tokens in
+   `:root` above (rather than re-declaring `.post-list__tag`) to opt
+   into the chip style. To restore the historical `#tagname` prefix,
+   set `--tag-prefix: "#";` in `:root`. */
+/* :root {
+  --tag-padding: 0.125rem 0.5rem;
+  --tag-bg:      var(--color-code-bg);
+  --tag-radius:  var(--radius-pill);
+} */

data/themes/magazine/css/app.css

@@ -0,0 +1,242 @@
+/* Magazine — serif headings with drop caps, warm cream palette,
+   editorial vibe. Inherits structural CSS from `_common.css`. This
+   file just sets:
+
+     1. Theme tokens (palette + serif fonts) for both light and dark
+     2. Light/dark mode overrides
+     3. Magazine-specific aesthetic refinements (drop cap, uppercase
+        nav, italic metadata, drop-shadow-free covers)
+*/
+
+
+/* ==========================================================================
+   Theme tokens
+   ========================================================================== */
+
+:root {
+  /* Base palette — warm cream */
+  --color-text:    #1a1410;
+  --color-bg:      #fbf8f3;
+  --color-muted:   #6e655c;
+  --color-link:    #a8431a;
+  --color-rule:    rgba(120, 90, 60, 0.18);
+  --color-card-bg: #fff;
+  --color-code-bg: rgba(120, 90, 60, 0.08);
+
+  /* Component palette */
+  --color-primary:        #a8431a;     /* warm rust */
+  --color-on-primary:     #fff;
+  --color-secondary:      #6e655c;
+  --color-on-secondary:   #fff;
+  --color-success:        #4a7c4f;
+  --color-on-success:     #fff;
+  --color-danger:         #b04030;
+  --color-on-danger:      #fff;
+  --color-warning:        #b8860b;
+  --color-on-warning:     #1a1410;
+  --color-info:           #4d7095;   /* deep enough for 4.5:1 with white text */
+  --color-on-info:        #fff;
+  --color-light:          #fbf8f3;
+  --color-on-light:       #1a1410;
+  --color-dark:           #1a1410;
+  --color-on-dark:        #fbf8f3;
+
+  /* Typography — serif body, display-serif headings. Magazine's
+     body/heading are both serif, so `--font-sans` (used by buttons +
+     nav + footer in `_common.css`) explicitly declares the standard
+     system sans stack — buttons stay crisp against the serif body. */
+  --font-body:    "Charter", "Iowan Old Style", "Palatino", Georgia, serif;
+  --font-heading: "Playfair Display", "Charter", Georgia, serif;
+  --font-meta:    var(--font-body);
+  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;
+  --font-sans:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  /* Tag chip — pill-shaped with code-bg fill (slightly wider padding
+     than minimal to suit the display serif). Engine default is a
+     plain inline link; setting these tokens opts into the chip style. */
+  --tag-padding:  0.125rem 0.625rem;
+  --tag-bg:       var(--color-code-bg);
+  --tag-radius:   var(--radius-pill);
+}
+
+/* Dark deltas — only redeclare 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:    #ece4d6;
+    --color-bg:      #1a1612;
+    --color-muted:   #9d9080;
+    --color-link:    #e09060;
+    --color-rule:    rgba(220, 200, 170, 0.15);
+    --color-card-bg: #221d18;
+    --color-code-bg: rgba(220, 200, 170, 0.08);
+
+    --color-primary:        #e09060;          /* brighter rust for dark contrast */
+    --color-on-primary:     #1a1612;
+    --color-secondary:      #9d9080;
+    --color-on-secondary:   #1a1612;
+    --color-success:        #6ba872;
+    --color-on-success:     #1a1612;
+    --color-danger:         #d97070;
+    --color-on-danger:      #1a1612;
+    --color-warning:        #d4a040;
+    --color-on-warning:     #1a1612;
+    --color-info:           #8aa6c2;
+    --color-on-info:        #1a1612;
+    --color-light:          #221d18;
+    --color-on-light:       #ece4d6;
+    --color-dark:           #ece4d6;
+    --color-on-dark:        #1a1612;
+  }
+}
+
+[data-theme="dark"] {
+  --color-text:    #ece4d6;
+  --color-bg:      #1a1612;
+  --color-muted:   #9d9080;
+  --color-link:    #e09060;
+  --color-rule:    rgba(220, 200, 170, 0.15);
+  --color-card-bg: #221d18;
+  --color-code-bg: rgba(220, 200, 170, 0.08);
+
+  --color-primary:        #e09060;
+  --color-on-primary:     #1a1612;
+  --color-secondary:      #9d9080;
+  --color-on-secondary:   #1a1612;
+  --color-success:        #6ba872;
+  --color-on-success:     #1a1612;
+  --color-danger:         #d97070;
+  --color-on-danger:      #1a1612;
+  --color-warning:        #d4a040;
+  --color-on-warning:     #1a1612;
+  --color-info:           #8aa6c2;
+  --color-on-info:        #1a1612;
+  --color-light:          #221d18;
+  --color-on-light:       #ece4d6;
+  --color-dark:           #ece4d6;
+  --color-on-dark:        #1a1612;
+}
+
+
+/* ==========================================================================
+   Magazine-specific aesthetic refinements
+   ========================================================================== */
+
+/* Heading weights + tracking — display-serif character. */
+h1, h2, h3, h4 {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+/* Drop cap on the first paragraph of an article — the magazine
+   signature. Anchored to `.e-content` (the microformats2 wrapper
+   every body-rendering layout puts around the markdown): the old
+   `article > p:first-of-type` selector matched NOTHING on post
+   pages, because the body's paragraphs aren't direct children of
+   <article> — the only direct <p> child is the classed back-link.
+   The `:not([class])` guard stays as a belt-and-braces exclusion
+   for any classed paragraph a layout may inject above the prose. */
+.e-content > p:first-of-type:not([class])::first-letter {
+  font-family: var(--font-heading);
+  font-size: 4rem;
+  float: left;
+  line-height: 0.85;
+  margin: 0.25rem 0.5rem 0 0;
+  font-weight: 700;
+  color: var(--color-link);
+}
+
+/* Uppercase nav with display-serif tracking. */
+nav[aria-label="Primary"] {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.site-header { border-bottom: 2px solid var(--color-text); }
+body > footer { border-top: 2px solid var(--color-text); }
+
+/* Active nav link uses the same warm-rust `--color-primary` as the
+   hover state. Overrides the engine default (which sets active to
+   body text colour) with matching specificity — the theme stylesheet
+   loads after `_common.css`, so source-order resolves the tie. The
+   engine's `font-weight: 600` on active links stays. */
+nav[aria-label="Primary"] [aria-current="page"] {
+  color: var(--color-primary);
+}
+
+/* (Removed) The previous theme italicised `article header p` and
+   `.post-list__meta` to give the post-meta line an editorial feel.
+   Both selectors were too broad:
+     - `article header p` cascades into every `<p>` inside a show-
+       view `<header>`, including `.publication__isbn`,
+       `.publication__pages`, `.publication__published`, and
+       (critically) `.publication__buttons` — which made the buy /
+       add-to-cart button text render in italic alongside the
+       intended metadata. Italic buttons read as decorative and lose
+       the CTA contrast that the workshop "Register" button (which
+       sits outside the header and was never affected) preserves.
+     - `.post-list__meta` and the post-show meta line are functional
+       metadata, not editorial copy; italicising them mirrors the
+       publication header issue and conflicts with the engine-wide
+       convention of plain meta text in `--font-meta`.
+   Taglines (which DO read better in italic) keep their italic
+   styling via dedicated `.publication__tagline` / `.publications-
+   index__tagline` / etc. rules in `_common.css` — those are not
+   affected by removing this broad rule. */
+
+/* Pagination — display-serif uppercase. */
+.pagination {
+  font-family: var(--font-heading);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+/* Buttons — display serif with a touch of tracking, so CTAs speak in
+   the same editorial voice as the nav and pagination. Sentence case
+   stays (uppercase buttons fight long labels like "Add to cart"). */
+.btn,
+.folio-button {
+  font-family: var(--font-heading);
+  letter-spacing: 0.04em;
+}
+
+/* Code block — branded left border. */
+pre { border-left: 3px solid var(--color-link); }
+
+/* Italic quote with branded border. */
+blockquote {
+  border-left: 3px solid var(--color-link);
+  padding-left: 1.25rem;
+}
+
+/* Photo single-page — italic caption + uppercase metadata labels. */
+.photo__caption { font-style: italic; }
+.photo__meta dt {
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+}
+
+/* (Removed) `.publications-index__description { font-style: italic; }`
+   — the description on a publication card is functional metadata
+   (the long marketing prose), not editorial copy. The tagline above
+   it already renders italic via the engine's
+   `.publications-index__tagline` rule; italicising both made the
+   card visually noisy.
+
+   The publication card's title still uses the display serif via
+   the engine's `.publications-index__title` rule routing through
+   `var(--font-heading)` — no theme override needed. */
+
+/* Gallery card titles use the display serif. The engine default
+   leaves the font alone so each theme can decide; magazine opts in
+   for editorial consistency with publication cards.
+
+   (Removed) `.gallery-index__location { font-style: italic; }` —
+   the photo's location is meta, not editorial; matches the engine-
+   wide convention of plain meta text in `--font-meta`. */
+.gallery-index__title { font-family: var(--font-heading); }

data/themes/minimal/css/app.css

@@ -0,0 +1,151 @@
+/* Minimal — system fonts, max-width prose, light/dark via
+   `prefers-color-scheme`. The default theme that ships with Abqari.
+   Inherits all structural CSS from `_common.css` (layout, components,
+   page structure). This file just sets:
+
+     1. Theme tokens (palette + fonts) for both light and dark
+     2. Light/dark mode overrides
+     3. Minimal-specific aesthetic refinements
+*/
+
+
+/* ==========================================================================
+   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 explicitly 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 the explicit light setting fall through.
+   ========================================================================== */
+
+:root {
+  /* Base palette — minimal's signature is "near-white page with a
+     hint of grey, clear web-blue accents". The bg is a perceptible
+     light grey so cards (`--color-card-bg: #fff`) sit as subtly
+     brighter rectangles against it. */
+  --color-text:    #1a1a1a;
+  --color-bg:      #f5f5f5;            /* very light grey, just visibly off-white */
+  --color-muted:   #6b6b6b;
+  --color-link:    #0066cc;            /* clear web-blue — links + primary */
+  --color-rule:    rgba(127, 127, 127, 0.2);
+  --color-card-bg: #fff;
+  --color-code-bg: rgba(127, 127, 127, 0.08);
+
+  /* Component palette */
+  --color-primary:        #0066cc;
+  --color-on-primary:     #fff;
+  --color-secondary:      #6b6b6b;
+  --color-on-secondary:   #fff;
+  --color-success:        #198754;
+  --color-on-success:     #fff;
+  --color-danger:         #dc3545;
+  --color-on-danger:      #fff;
+  --color-warning:        #ffc107;
+  --color-on-warning:     #1a1a1a;
+  --color-info:           #0dcaf0;
+  --color-on-info:        #1a1a1a;
+  --color-light:          #f8f9fa;
+  --color-on-light:       #1a1a1a;
+  --color-dark:           #1a1a1a;
+  --color-on-dark:        #f8f9fa;
+
+  /* Typography — system fonts, no web-font dependency. Body is sans,
+     so `--font-sans` (buttons / nav / footer) just follows. */
+  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-heading: var(--font-body);
+  --font-meta:    var(--font-body);
+  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --font-sans:    var(--font-body);
+
+  /* Tag chip — pill-shaped with a subtle code-bg fill. The engine's
+     default is a plain inline link with no chrome; setting these
+     three tokens opts into the chip style without re-declaring the
+     `.post-list__tag` rule. */
+  --tag-padding:  0.125rem 0.5rem;
+  --tag-bg:       var(--color-code-bg);
+  --tag-radius:   var(--radius-pill);
+
+  /* Minimal's primary IS its link blue, so a blue price reads as a
+     link. Prices render in body text instead; weight and heading
+     font (from `_common.css`) keep them prominent. The var()
+     indirection follows `--color-text` into dark mode on its own. */
+  --color-price:  var(--color-text);
+}
+
+/* Dark deltas — only values that differ from `:root`. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-text:    #ececec;
+    --color-bg:      #111;
+    --color-muted:   #9a9a9a;
+    --color-link:    #6cb;
+    --color-rule:    rgba(255, 255, 255, 0.15);
+    --color-card-bg: #1c1c1c;
+    --color-code-bg: rgba(255, 255, 255, 0.08);
+
+    --color-primary:        #6cb;
+    --color-on-primary:     #111;
+    --color-secondary:      #9a9a9a;
+    --color-on-secondary:   #111;
+    --color-success:        #4caf7a;
+    --color-on-success:     #111;
+    --color-danger:         #f06b75;
+    --color-on-danger:      #111;
+    --color-on-warning:     #111;
+    --color-info:           #6cb;
+    --color-on-info:        #111;
+    --color-light:          #1c1c1c;
+    --color-on-light:       #ececec;
+    --color-dark:           #ececec;
+    --color-on-dark:        #111;
+  }
+}
+
+[data-theme="dark"] {
+  --color-text:    #ececec;
+  --color-bg:      #111;
+  --color-muted:   #9a9a9a;
+  --color-link:    #6cb;
+  --color-rule:    rgba(255, 255, 255, 0.15);
+  --color-card-bg: #1c1c1c;
+  --color-code-bg: rgba(255, 255, 255, 0.08);
+
+  --color-primary:        #6cb;
+  --color-on-primary:     #111;
+  --color-secondary:      #9a9a9a;
+  --color-on-secondary:   #111;
+  --color-success:        #4caf7a;
+  --color-on-success:     #111;
+  --color-danger:         #f06b75;
+  --color-on-danger:      #111;
+  --color-on-warning:     #111;
+  --color-info:           #6cb;
+  --color-on-info:        #111;
+  --color-light:          #1c1c1c;
+  --color-on-light:       #ececec;
+  --color-dark:           #ececec;
+  --color-on-dark:        #111;
+}
+
+
+/* ==========================================================================
+   Theme-specific aesthetic refinements
+   ========================================================================== */
+
+/* Minimal's anchors are slightly tighter underline-offset for a
+   denser reading feel. */
+a { text-underline-offset: 2px; }
+
+/* Article header tightening — minimal puts the date/meta under h1
+   without spacing, classic newsprint feel. */
+article header h1 { margin-bottom: 0.25rem; }
+article header p {
+  color: var(--color-muted);
+  font-size: 0.875rem;
+  margin-top: 0;
+}