@brandon_m_behring/book-scaffold-astro 4.25.2 → 4.25.3

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.2",
+  "version": "4.25.3",
   "type": "module",
   "license": "MIT",
   "author": "Brandon Behring",

package/styles/chapter.css

@@ -244,4 +244,15 @@
   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);