jekyll-theme-zer0 1.27.0 → 1.29.0

data/_sass/components/_book.scss

@@ -0,0 +1,423 @@
+// ============================================================================
+// BOOK COLLECTION — children's picture-book presentation (Feature: ZER0-080)
+// ----------------------------------------------------------------------------
+// Styles for the `books` collection: bookshelf cards, the book landing page
+// (cover hero + table of contents), and the immersive story reading surface.
+//
+// Used by:
+//   _layouts/book.html, _layouts/book-story.html, _layouts/book-abc.html
+//   _includes/components/bookshelf.html, book-card.html, book-toc.html,
+//   _includes/components/book-nav.html, book-plate.html, abc-letter.html
+//
+// Theming: everything reads Bootstrap's runtime custom properties
+// (var(--bs-*)) so light/dark color modes and theme skins work for free.
+// Consumer knobs are exposed as --zer0-book-* custom properties.
+// ============================================================================
+
+:root {
+  // Friendly, readable storybook serif — system stacks only (no CDN fonts).
+  --zer0-book-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
+    "Times New Roman", serif;
+  --zer0-book-font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
+  --zer0-book-measure: 42rem; // comfortable line length for read-aloud text
+  --zer0-book-plate-radius: 1rem;
+}
+
+// ----------------------------------------------------------------------------
+// Cover frame — shared by bookshelf cards and the book landing hero.
+// A portrait "physical book" look: 3/4 ratio, soft spine shadow, hover lift.
+// ----------------------------------------------------------------------------
+.book-cover-frame {
+  position: relative;
+  display: block;
+  aspect-ratio: 3 / 4;
+  overflow: hidden;
+  border-radius: 0.5rem 1rem 1rem 0.5rem; // subtle spine on the left
+  box-shadow:
+    inset 0.35rem 0 0.5rem -0.35rem rgba(0, 0, 0, 0.45), // spine crease
+    0 0.75rem 1.5rem rgba(0, 0, 0, 0.25);
+  background-color: var(--bs-secondary-bg);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.book-card {
+  .book-cover-frame {
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  &:hover .book-cover-frame,
+  &:focus-within .book-cover-frame {
+    transform: translateY(-0.25rem) rotate(-1deg);
+    box-shadow:
+      inset 0.35rem 0 0.5rem -0.35rem rgba(0, 0, 0, 0.45),
+      0 1.25rem 2rem rgba(0, 0, 0, 0.3);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Book landing hero (cover + title block)
+// ----------------------------------------------------------------------------
+.book-hero {
+  .book-hero-title {
+    font-family: var(--zer0-book-serif);
+    letter-spacing: -0.01em;
+  }
+
+  .book-hero-cover {
+    max-width: 22rem;
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Table of contents — one row per story/chapter
+// ----------------------------------------------------------------------------
+.book-toc {
+  .book-toc-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--bs-border-color);
+    border-radius: 0.75rem;
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    text-decoration: none;
+    transition: transform 0.15s ease, border-color 0.15s ease;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    &:hover,
+    &:focus-visible {
+      border-color: var(--bs-primary);
+      transform: translateX(0.25rem);
+    }
+  }
+
+  .book-toc-number {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    font-weight: 700;
+    background-color: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-text-emphasis);
+  }
+
+  .book-toc-thumb {
+    flex: 0 0 auto;
+    width: 4.5rem;
+    height: 3rem;
+    object-fit: cover;
+    border-radius: 0.5rem;
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Story reading surface — big friendly type, generous leading, drop cap
+// ----------------------------------------------------------------------------
+.book-story-content {
+  max-width: var(--zer0-book-measure);
+  margin-inline: auto;
+  font-family: var(--zer0-book-serif);
+  font-size: var(--zer0-book-font-size);
+  line-height: 1.8;
+
+  p {
+    margin-bottom: 1.25em;
+  }
+
+  // Storybook drop cap on the opening paragraph.
+  > p:first-of-type::first-letter {
+    float: left;
+    font-size: 3.2em;
+    line-height: 0.85;
+    padding-right: 0.12em;
+    font-weight: 700;
+    color: var(--bs-primary-text-emphasis);
+  }
+
+  // Bare markdown images inside a story get the plate treatment too, so
+  // content written without the book-plate include still looks right.
+  > p > img,
+  > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--zer0-book-plate-radius);
+    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.2);
+  }
+}
+
+// Illustration plate (figure + optional caption). Plates break out a little
+// wider than the text measure to feel like full-bleed picture-book art.
+.book-plate {
+  margin: 2rem auto;
+  max-width: min(52rem, 100%);
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: var(--zer0-book-plate-radius);
+    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.2);
+  }
+
+  figcaption {
+    margin-top: 0.5rem;
+    text-align: center;
+    font-style: italic;
+    font-size: 0.875rem;
+    color: var(--bs-secondary-color);
+  }
+}
+
+// "The End" flourish
+.book-the-end {
+  font-family: var(--zer0-book-serif);
+  font-style: italic;
+  text-align: center;
+  color: var(--bs-secondary-color);
+
+  &::before,
+  &::after {
+    content: "❦";
+    margin-inline: 0.75rem;
+    color: var(--bs-primary-text-emphasis);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Colophon — collapsed "how the illustrations were made" provenance block
+// ----------------------------------------------------------------------------
+.book-colophon {
+  max-width: var(--zer0-book-measure);
+  margin-inline: auto;
+
+  summary {
+    cursor: pointer;
+    color: var(--bs-secondary-color);
+
+    &:hover {
+      color: var(--bs-body-color);
+    }
+  }
+
+  .book-colophon-prompt {
+    font-size: 0.85rem;
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-tertiary-bg);
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Print — read/print the story cleanly (plates keep their ink, chrome goes)
+// ----------------------------------------------------------------------------
+@media print {
+  .book-story-nav,
+  .book-colophon {
+    display: none !important;
+  }
+
+  .book-plate img,
+  .book-story-content img {
+    box-shadow: none;
+    break-inside: avoid;
+  }
+}
+
+// ============================================================================
+// ABC BOARD BOOKS — the "ABC & Language" series (Feature: ZER0-081)
+// ----------------------------------------------------------------------------
+// Single-scroll toddler alphabet books: _layouts/book-abc.html renders a grid
+// of abc-letter cards. Each art style (art_style front matter) adds a
+// .abc-style--<id> skin that tints the placeholder tiles and letter badges.
+// ============================================================================
+
+// A–Z quick-jump strip.
+.abc-jump {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  justify-content: center;
+  margin-bottom: 2rem;
+
+  &-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    padding: 0.15rem 0.4rem;
+    font-family: var(--zer0-book-serif);
+    font-weight: 700;
+    text-decoration: none;
+    color: var(--bs-primary-text-emphasis);
+    background-color: var(--bs-primary-bg-subtle);
+    border-radius: 0.4rem;
+
+    &:hover,
+    &:focus-visible {
+      color: var(--bs-body-bg);
+      background-color: var(--bs-primary);
+    }
+  }
+}
+
+// The board: a responsive grid of letter cards.
+.abc-board {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
+  gap: 1.5rem;
+  --abc-tint: var(--bs-primary-bg-subtle);
+  --abc-badge-bg: var(--bs-primary);
+  --abc-badge-ink: var(--bs-body-bg);
+}
+
+.abc-letter {
+  scroll-margin-top: 5rem; // clear the sticky navbar on #letter-x jumps
+  text-align: center;
+
+  &-plate {
+    position: relative;
+    aspect-ratio: 1 / 1;
+    border-radius: var(--zer0-book-plate-radius);
+    overflow: hidden;
+    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
+    background-color: var(--abc-tint);
+  }
+
+  &-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  // Placeholder tile shown until the plate is rendered.
+  &-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    background-image: radial-gradient(
+      circle at 50% 40%,
+      color-mix(in srgb, var(--abc-tint) 55%, white),
+      var(--abc-tint)
+    );
+  }
+
+  &-glyph {
+    font-family: var(--zer0-book-serif);
+    font-weight: 800;
+    font-size: clamp(4rem, 10vw, 7rem);
+    line-height: 1;
+    color: var(--abc-badge-bg);
+  }
+
+  &-planned {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--bs-secondary-color);
+  }
+
+  // The big letter, always shown as HTML type (never baked into the art).
+  &-badge {
+    position: absolute;
+    left: 0.6rem;
+    bottom: 0.6rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.6rem;
+    height: 2.6rem;
+    border-radius: 0.7rem;
+    font-family: var(--zer0-book-serif);
+    font-weight: 800;
+    font-size: 1.5rem;
+    color: var(--abc-badge-ink);
+    background-color: var(--abc-badge-bg);
+    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.25);
+  }
+
+  &-word {
+    font-family: var(--zer0-book-serif);
+    font-weight: 700;
+    font-size: 1.4rem;
+    margin: 0.8rem 0 0.15rem;
+    color: var(--bs-emphasis-color);
+  }
+
+  &-tagline {
+    font-family: var(--zer0-book-serif);
+    font-size: 1rem;
+    line-height: 1.4;
+    color: var(--bs-secondary-color);
+    max-width: 22rem;
+    margin-inline: auto;
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Art-style skins — one per art_style id in the shared catalog. Each tints the
+// placeholder ground and letter badge so a book reads as one look before (and
+// after) its plates render. Ids are the cross-repo contract with zer0-CMS +
+// zer0-image-generator (data/abc_art_styles.yml).
+// ----------------------------------------------------------------------------
+.abc-style--isometric-tech-toy {
+  --abc-tint: #dceaff;
+  --abc-badge-bg: #2b7de9;
+  --abc-badge-ink: #fff;
+}
+.abc-style--chalkboard-doodle {
+  --abc-tint: #2f4f45;
+  --abc-badge-bg: #f4d35e;
+  --abc-badge-ink: #23342d;
+
+  .abc-letter-glyph { color: #f7fbf9; }
+  .abc-letter-planned { color: rgba(255, 255, 255, 0.7); }
+}
+.abc-style--soft-plush {
+  --abc-tint: #ffe6ef;
+  --abc-badge-bg: #f48fb1;
+  --abc-badge-ink: #5a2436;
+}
+.abc-style--crayon-primary {
+  --abc-tint: #fff3c4;
+  --abc-badge-bg: #e23b3b;
+  --abc-badge-ink: #fff;
+}
+.abc-style--paper-cutout {
+  --abc-tint: #ffe8d1;
+  --abc-badge-bg: #d98b4a;
+  --abc-badge-ink: #fff;
+}
+.abc-style--watercolor-storybook {
+  --abc-tint: #eef4e6;
+  --abc-badge-bg: #7fa05a;
+  --abc-badge-ink: #fff;
+}
+
+@media print {
+  .abc-jump { display: none !important; }
+  .abc-letter-plate { box-shadow: none; break-inside: avoid; }
+}

data/_sass/components/_callout.scss

@@ -17,7 +17,7 @@
 
   background: var(--zer0-color-bg-elevated);
   border-left: 0.25rem solid var(--zer0-callout-color, var(--zer0-color-primary));
-  border-radius: 0.375rem;
+  border-radius: var(--zer0-radius);
   color: var(--zer0-color-ink);
 }
 

data/_sass/components/_footer.scss

@@ -64,6 +64,12 @@
     }
   }
 
+  // Element-agnostic: applied to <a> (external credits), <span> (credits with
+  // no url) and <button> (the in-page "Info" dialog trigger — it opens the
+  // #info-section offcanvas rather than navigating, so it is a button, not a
+  // link; WCAG 4.1.2). Reboot already inherits margin/font for <button>, but
+  // not background, border or colour — reset those and restate the colours
+  // `.bd-footer a` supplies so all three elements render identically.
   .powered-by-link {
     display: inline-flex;
     align-items: center;
@@ -75,10 +81,18 @@
     text-decoration: none;
     border-radius: var(--bs-border-radius-sm, 0.25rem);
     white-space: nowrap;
+    // Reboot sets `-webkit-appearance: button`, which the unprefixed property
+    // does not cancel on older WebKit — reset both.
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: 0;
+    color: var(--bs-body-color);
 
     &:hover,
     &:focus-visible {
       text-decoration: none;
+      color: var(--bs-link-hover-color);
     }
   }
 
@@ -132,6 +146,9 @@
   // Block padding grows the tap target without changing the visual text size;
   // icon links get an explicit minimum box. (`d-block` links — e.g. the
   // truncated Latest Posts titles — keep their display but gain the padding.)
+  // `> button` is matched alongside `> a` because the policy row's "Cookie
+  // Preferences" control is a <button> (it opens a modal rather than
+  // navigating) and must keep the same 1.75rem tap target as its siblings.
   .footer-dark-block {
     ul.list-unstyled li > a,
     p > a {
@@ -139,7 +156,8 @@
       padding-block: 0.25rem;
     }
 
-    ul.list-inline li > a {
+    ul.list-inline li > a,
+    ul.list-inline li > button {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -171,6 +189,24 @@
     }
   }
 
+  // A <button> that must sit in running text exactly like the <a> beside it —
+  // used by the "Cookie Preferences" control, which opens #cookieSettingsModal
+  // rather than navigating (WCAG 4.1.2). Reboot inherits margin/font for
+  // <button> but leaves the UA background, border and padding in place, so
+  // strip those; colour comes from the `.text-light` utility as before.
+  .footer-inline-button {
+    // Reboot sets `-webkit-appearance: button`, which the unprefixed property
+    // does not cancel on older WebKit — reset both.
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: 0;
+    padding: 0;
+    vertical-align: baseline;
+    text-align: inherit;
+    cursor: pointer;
+  }
+
   .footer-policy-links {
     @media (max-width: 767.98px) {
       font-size: 0.8125rem;

data/_sass/components/_page-views.scss

@@ -0,0 +1,36 @@
+// Feature: ZER0-083
+// ============================================================================
+// Page-view counter badge
+// ----------------------------------------------------------------------------
+// Markup:     _includes/components/page-views.html
+// Behaviour:  assets/js/page-views.js
+// Config:     _config.yml → page_views:
+// Theming:    inherits the surrounding meta-row color (.post-meta is
+//             .text-muted), so it follows [data-bs-theme] light/dark for free.
+// ============================================================================
+
+.page-views {
+  display: inline-flex;
+  align-items: baseline;
+  gap: .25rem;
+  white-space: nowrap;
+
+  // The badge is server-rendered hidden and revealed by JS once a count is
+  // known. `!important` because a utility class on the include's `class`
+  // param (e.g. `d-inline-flex`) would otherwise win over [hidden].
+  &[hidden] {
+    display: none !important;
+  }
+
+  // Digits change as the count updates — tabular figures keep the meta row
+  // from reflowing when 9 becomes 10.
+  &__count {
+    font-variant-numeric: tabular-nums;
+  }
+
+  // Leading separator for meta rows; hides with the badge because it lives
+  // inside it (see the include's `separator` param).
+  &__sep {
+    display: inline;
+  }
+}