@brandon_m_behring/book-scaffold-astro 4.25.1 → 4.25.3

package/layouts/Base.astro

@@ -16,10 +16,14 @@
  *   showSidebar — render the left chapter-navigation sidebar (default: true).
  *                 Set false for the landing page or any full-bleed surface.
  *                 Below 1024px the sidebar is auto-hidden via CSS regardless.
+ *   showChrome  — render the tools chrome (ToolFilter + VersionSelector)
+ *                 (default: true). Set false on a landing/hub page with no
+ *                 chapters/tools/versions; search + theme toggle always render.
  *
  * Tools chrome (ToolFilter, VersionSelector): only mounted when
- * BOOK_PROFILE !== 'academic'. Academic-profile books get no JS islands
- * in the chrome row (search + theme toggle only).
+ * BOOK_PROFILE !== 'academic' AND showChrome !== false. Academic-profile books
+ * (and any page with showChrome={false}) get no JS islands in the chrome row
+ * (search + theme toggle only).
  *
  * Usage:
  *   ---
@@ -61,13 +65,17 @@ import Sidebar from '../components/Sidebar.astro';
 import bookConfig from 'virtual:book-scaffold/book-config';
 
 const profile = import.meta.env.BOOK_PROFILE ?? 'minimal';
-const showToolsChrome = profile !== 'academic';
 
 interface Props {
   title: string;
   description?: string;
   lang?: string;
   showSidebar?: boolean;
+  /** #163: render the optional "tools chrome" — the ToolFilter +
+   *  VersionSelector islands (default true). Set false on landing/hub pages
+   *  with no chapters/tools/versions; the search + theme-toggle cluster always
+   *  renders. (No-op for the academic profile, which never shows them.) */
+  showChrome?: boolean;
   /** v4.6.0: Open Graph image URL (relative to site root, or absolute). */
   ogImage?: string;
   /** v4.6.0: Open Graph type. Defaults to 'website'; Chapter.astro passes 'article'. */
@@ -79,10 +87,18 @@ const {
   description,
   lang = 'en',
   showSidebar = true,
+  showChrome = true,
   ogImage,
   ogType = 'website',
 } = Astro.props;
 
+// Tools chrome (ToolFilter + VersionSelector) renders only for non-academic
+// profiles AND when the page opts in via showChrome (default true). A
+// landing/hub page (no chapters/tools/versions) passes showChrome={false} to
+// get the search + theme-toggle cluster only — the chrome-free path that
+// previously forced borrowing the academic profile (and its katex deps). #163.
+const showToolsChrome = (profile !== 'academic') && showChrome;
+
 // v4.6.0: canonical + og:url need Astro.site. defineBookConfig throws at
 // config-load if `site` is missing, so Astro.site is guaranteed populated
 // here. `new URL` resolves the relative pathname against it.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@brandon_m_behring/book-scaffold-astro",
   "description": "Astro 6 + MDX toolkit for long-form technical books. Profile-aware (academic / tools / minimal); ships Tufte typography, KaTeX, BibTeX citations, Pagefind, Cloudflare Workers deploy. See PACKAGE_DESIGN.md for the API contract.",
-  "version": "4.25.1",
+  "version": "4.25.3",
   "type": "module",
   "license": "MIT",
   "author": "Brandon Behring",

package/styles/chapter.css

@@ -230,3 +230,29 @@
   }
   .chapter-nav .next { grid-column: 1; text-align: left; }
 }
+
+/* Display math (KaTeX) — scroll a too-wide equation WITHIN its own block instead
+   of forcing a horizontal scroll on the whole page. KaTeX sets no `overflow` on
+   `.katex-display`, so it defaults to `visible`; a wide equation (long
+   derivations, big matrices) then overflows the viewport and the page scrolls
+   sideways on mobile. WCAG 1.4.10 Reflow. See book-scaffold-astro#162.
+   overflow-y is deliberately NOT set: once overflow-x is non-visible the CSS
+   overflow rule already computes overflow-y to `auto`, so there is no spurious
+   vertical scrollbar — and an explicit `hidden` would silently clip tall
+   equations if a consumer ever constrains .katex-display's height. */
+.katex-display {
+  overflow-x: auto;
+  /* a little room so the horizontal scrollbar doesn't clip the equation's descenders */
+  padding-block-end: 0.25rem;
+  /* Edge scroll-shadow when a wide equation scrolls (v4.25.3; docs/responsive-reading.md).
+   * Same Lea Verou layered technique as code blocks, page-bg covers. */
+  background-image:
+    linear-gradient(to right, var(--color-bg) 30%, rgba(0, 0, 0, 0)),
+    linear-gradient(to right, rgba(0, 0, 0, 0), var(--color-bg) 70%),
+    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)),
+    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
+  background-position: 0 0, 100% 0, 0 0, 100% 0;
+  background-repeat: no-repeat;
+  background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
+  background-attachment: local, local, scroll, scroll;
+}

package/styles/tokens.css

@@ -108,6 +108,7 @@
    */
   --measure-main: 65ch;        /* default: laptop-friendly typographic measure */
   --measure-side: 28ch;        /* right-margin sidenote column (desktop) */
+  --measure-code: 48rem;       /* code-block break-out width: fits 80-char lines comfortably (≈88 mono chars @14px before padding); docs/responsive-reading.md */
   --breakpoint-narrow: 48rem;  /* ~768px — mobile fold (sidenotes inline) */
   --breakpoint-wide: 90rem;    /* ~1440px — wide-desktop tier */
   --breakpoint-ultrawide: 120rem; /* ~1920px — ultrawide tier */

package/styles/typography.css

@@ -89,6 +89,43 @@ pre code {
   font-size: var(--text-sm);
 }
 
+/* ===== Responsive reading (v4.25.3) — docs/responsive-reading.md =====
+ * Code blocks break out past the prose text measure to fit ~80-char lines,
+ * capped at --measure-code and centered within .prose. CONTAINER-bounded, not
+ * viewport-bounded: the width comes from the .prose column itself, so a left
+ * sidebar offset + the scrollbar gutter can never push the block into horizontal
+ * PAGE scroll. (The earlier `width: min(100vw - …)` overflowed ~8px at the
+ * 1024px sidebar boundary — #171 review finding A1, guarded by
+ * gallery/tests/fixtures/layout-overflow.spec.ts.) `.wide`/`.column-page` keep
+ * their full-bleed behavior (excluded here). */
+.prose > pre:not(.wide):not(.column-page) {
+  max-width: var(--measure-code);
+  margin-inline: auto;
+  /* Lea Verou layered scroll-shadow: bg-colored covers move with content
+   * (attachment:local); shadow layers are fixed → shown only when scrollable. */
+  background-image:
+    linear-gradient(to right, var(--color-code-bg) 30%, rgba(0, 0, 0, 0)),
+    linear-gradient(to right, rgba(0, 0, 0, 0), var(--color-code-bg) 70%),
+    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)),
+    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
+  background-position: 0 0, 100% 0, 0 0, 100% 0;
+  background-repeat: no-repeat;
+  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+/* Phone (≤40rem): shrink code a touch so more fits before scrolling. Tighter
+ * than the 48rem mobile/table breakpoint below — phones benefit from the smaller
+ * glyphs; tablets (40–48rem) keep the full size. */
+@media (max-width: 40rem) {
+  pre code { font-size: 0.75rem; }
+}
+/* Mobile: scroll a wide table within its own block instead of overflowing the
+ * page. Sticky thead intentionally NOT used — it can't stick inside a
+ * horizontal-scroll wrapper (CSS limitation; see docs/responsive-reading.md). */
+@media (max-width: 48rem) {
+  .prose table { display: block; max-width: 100%; overflow-x: auto; }
+}
+
 /* ===== Links ===== */
 a {
   color: var(--color-link);