jekyll-theme-zer0 1.27.0 → 1.28.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/core/_navbar.scss

@@ -489,6 +489,19 @@
     --bs-offcanvas-width: min(21rem, 86vw);
   }
 
+  // #bdNavbar lives INSIDE the fixed header, whose stacking context sits at
+  // Bootstrap's $zindex-fixed (1030) — below the body-level offcanvas
+  // backdrop (1040). The menu's own z-index (1045) only orders it within the
+  // header's context, so without help the whole open menu paints BEHIND the
+  // backdrop and none of its links are tappable. Lift the header above the
+  // backdrop only while its offcanvas is opening/open/closing. Browsers
+  // without :has() just keep the old (dimmed-menu) behavior.
+  body:has(#bdNavbar.offcanvas-lg.showing) header.fixed-top,
+  body:has(#bdNavbar.offcanvas-lg.show) header.fixed-top,
+  body:has(#bdNavbar.offcanvas-lg.hiding) header.fixed-top {
+    z-index: 1046; // $zindex-offcanvas (1045) + 1
+  }
+
   // Wrapper is inert on mobile so offcanvas layout matches pre-wrapper structure
   #bdNavbar .bd-navbar-nav-viewport {
     display: contents;