Right-side actions (Support / Star / Subscribe / GitHub) were clipping
past the viewport in two bands measured with Playwright on the dev
landing:
- 1200-1279 px: icon-only mode at default 0.75 rem padding overflowed
by up to 12 px.
- 1400-1479 px: Bootstrap's xxl breakpoint pulled labels back in but
the row still needs ~1480 px to fit them, so right items clipped
4-64 px past the viewport edge.
Extend the icon-only media query upper bound from 1399 to 1479 px and
tighten right-nav nav-link horizontal padding to 0.45 rem inside that
band. The row now stays single-line from the xl hamburger threshold
(1200 px) all the way up.
1) release-pill.html: nested HTML comment broke every Quarto site that
included it via include-after-body. The Pattern B documentation
block contained a literal `<!-- in footer -->` inside the outer
`<!-- ... -->` doctring; HTML disallows nested comments, so the
inner `-->` terminated the outer comment early and the example
markup that followed (`<span data-release-pill>` and
`<script src="/release-pill.js">`) leaked into the rendered page —
producing a 404 on every page that fetched the script. Replaced
with a `// in footer:` pseudo-comment and added a NOTE warning.
2) shared/_navbar.scss: dim the SEAS shield in dark mode. The logo
asset is transparent-bg, but the white "VE RI TAS" books area at
the top of the crest read as a bright square against the dark
navbar. `filter: brightness(0.85) contrast(1.05)` softens the
crest without losing the crimson. Targets both `body.quarto-dark`
(Quarto's class) and `[data-bs-theme="dark"]` (Bootstrap 5+).
3) EcosystemBar.tsx: mirror Quarto's brand-title abbreviation.
StaffML was always rendering the full "Machine Learning Systems"
string with CSS ellipsis, so narrow viewports ellipsis-truncated
it mid-word — visually distinct from every Quarto site, which
swap to a clean "ML Systems" via the
`_mobile.scss @media (max-width: 1199px)` rule. Added an
`nav-xl:hidden` / `nav-xl:inline` pair (with an `sr-only` full
string for screen readers) so the abbreviation behaves
identically to Quarto on the same screen widths.
Two breakage points with the same flavor — the navbar configuration
disagreed with the responsive CSS, and the deploy script discarded the
asset bundle the about/community/newsletter pages depend on.
- navbar-common.yml: collapse-below "lg" → "xl". With 6 left dropdowns
and 4 right tools, the full navbar needs ~1100 px. At 992–1199 px
the dropdowns wrapped into a vertical stack and "Machine Learning
Systems" broke across three lines. _mobile.scss was already written
against an "xl" assumption (its 769–1199 px block targets a collapsed
navbar that never appeared); the YAML now matches.
- _mobile.scss: bump the abbreviated-title media query from 991 px to
1199 px so "ML Systems" appears the moment the navbar collapses,
not 200 px later.
- site-publish-live.yml: stop skipping site_libs/ when copying the
landing build to root. The about/community/newsletter HTML reference
../site_libs/… which resolves to /site_libs/ at runtime; skipping it
shipped those subsites with no Bootstrap or Quarto CSS at all (raw
<ul> navbar, 3000 px of empty whitespace before the hero, dark mode
unstyled). Also rm -rf each non-subsite item before re-copying so a
removed top-level file doesn't linger on gh-pages.
Verified locally with Playwright at 425/768/991/992/1100/1199/1280/
1400/1920 px in light + dark mode against a fresh tinytorch render.
Not addressed here: the right-TOC's position:sticky lets go on
big-picture.html because Quarto closes <main> mid-article (a few
content-visible blocks end up after </main>). That's a per-page
content-structure fix, not a shared-chrome change — separate commit.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
cards + header decoration + PDF milestone transitions
Polishes several rough edges in the TinyTorch site surfaced by a visual
walkthrough. Six independent fixes in one PR because they all landed on
the same mental pass:
HTML SIDEBAR
- Rename two sections so their titles don't wrap on the 250px sidebar:
"Capstone Competition" -> "Capstone"
"TITO CLI Reference" -> "TITO CLI"
(navbar link "TITO CLI Reference" -> "TITO CLI" too, for
consistency)
- Remove all three milestone sections ("Foundation Milestones",
"Architecture Milestones", "Optimization Milestones") from the HTML
sidebar. They interleaved between tiers and broke the
Foundation -> Architecture -> Optimization -> Capstone flow the
sidebar is meant to communicate. Milestones stay fully accessible
via the navbar's "Historical Milestones" entry, and the PDF build
(which has its own _quarto.yml) is untouched -- interleaved
milestones are the correct reading experience in print.
- YAML comment added where the milestone sections used to live so a
future contributor knows the removal was intentional.
SIDEBAR SCROLL
- shared/styles/partials/_sidebar.scss: add
`overscroll-behavior: contain` to #quarto-sidebar and
.sidebar-navigation. Before: hovering-and-scrolling over the sidebar
chained the scroll to the body the moment the sidebar hit a
boundary -- so scrolling the sidebar felt like it was never actually
engaging. After: the sidebar's scroll stays in the sidebar.
- Single-source-of-truth win: this improves every Quarto site in the
ecosystem (book/kits/labs/mlsysim/tinytorch/site), not just tinytorch.
H2 L-SHAPE DECORATION (TINYTORCH ONLY)
- shared/styles/partials/_headers.scss decorates H2-H6 with a thick
accent left-border + thin accent bottom line -- an "L-shape" that
reads well in long-form textbook prose. For tinytorch (framework
docs with code blocks, comparison grids, card-based layouts) the
decoration felt heavy and competed with the content itself.
- tinytorch/quarto/assets/styles/style.scss: add a local override
that strips border-left/border-bottom/padding-left/padding-bottom
from H2-H6. Scoped to tinytorch -- book/kits/labs/mlsysim keep the
decoration.
TIER CARDS
- index.qmd's .tier-foundation / .tier-architecture /
.tier-optimization / .tier-olympics cards used four different
gradient fills (blue/purple/orange/pink). Visually loud; fought
the comparison grid and hero on the same page; tier-optimization
read as specifically orange-heavy.
- Flatten to the same neutral #fafafa fill the .audience-card and
preface.qmd cards use, with just a 4px colored left-border carrying
the tier's identity. Each tier still has its distinct color cue;
the page calms down.
PDF NARRATIVE TRANSITIONS
Milestones appeared suddenly in the PDF when a tier ended. Readers
lost context for why they were there and which just-built modules
they were about to exercise. Six short transition paragraphs added
via the narrative-flow-analyzer subagent:
modules/08_training.qmd forward-hook into Foundation Milestones
modules/13_transformers.qmd forward-hook into Architecture Milestones
modules/19_benchmarking.qmd forward-hook into Optimization Milestone
milestones/01_perceptron.qmd tier-components open
(Tensor/Linear/BCELoss/SGD/Trainer)
milestones/04_cnn.qmd first-Architecture-Milestone framing +
three-tier arc explanation
milestones/06_mlperf.qmd sole-Optimization-Milestone +
"third act" framing
Files left as-is because the transitions were already good:
milestones/index.qmd, milestones/02_xor.qmd, milestones/03_mlp.qmd,
milestones/05_transformer.qmd.
DRIVE-BY FIX
modules/13_transformers.qmd had four lines of pre-existing corrupted
trailing content after the last callout (duplicate sentence,
orphan "44B parameters |" table row, orphan Capstone row). Removed
since this PR was already editing the file.
Verification (Playwright against local preview):
- Sidebar section labels: ["Getting Started", "Foundation Tier",
"Architecture Tier", "Optimization Tier", "Capstone",
"Conclusion", "TITO CLI", "Reference", "Community"] -- no
wrapping, no milestones.
- #quarto-sidebar overscroll-behavior: "contain"
- H2 "Don't import it. Build it." computed border-left-width: 0px,
border-bottom-width: 0px, padding-left: 0px
- .tier-card backgrounds: all rgb(250, 250, 250);
border-lefts: 4px solid {tier-color} each.
The shared sidebar partial had looser vertical rhythm than the four sites
that ship their own local override (book, kits, labs, mlsysim). Result:
TinyTorch and the landing site rendered noticeably airier than the book's
sidebar — same repo, different feel. The partial's comment was also wrong:
it rationalized "more air than CSS-reset minimums to improve scanning" as
a deliberate choice, but the book (which has 60+ sidebar items per volume
and is the worst case for scanability) actually runs the tighter form,
and the extra vertical air hurt scanability rather than helping it. The
"more air" instinct was for *horizontal* padding (keep 6px so items are
comfortable mouse/touch targets), not vertical — conflating the two put
the sidebar on the wrong rhythm.
Changes to #quarto-announcement-affecting rules:
.sidebar-item a
padding: 4px 8px -> 2px 6px
margin: 1px 0 -> 0.5px 0
line-height: 1.45 -> removed (use Bootstrap default ~1.5)
.sidebar-item a[data-bs-toggle="collapse"] (section headers)
padding: 6px 8px -> removed (inherit from item rule above)
margin-top: 4px -> removed (no section gap; header reads as part of
the same vertical column as its children)
These are the exact values book/kits/labs/mlsysim already ship in their
per-site overrides, so this change:
- immediately tightens TinyTorch and site (they import this partial)
- is a no-op visually on book/kits/labs/mlsysim (their local rules win)
- becomes the single source of truth we can consolidate against later
The partial's file header now documents the rationale so a future pass
doesn't re-loosen vertical padding thinking the tight value was a bug.
The sidebar partial is shared across book, tinytorch, kits, labs, and
instructors. Its current `padding: 2px 6px` + `margin: 0.5px 0` was
optimized for cramming long chapter lists into limited height, but it
reads as claustrophobic on shorter nav sets (tinytorch's 20 modules,
kits' hardware labs) and makes scanning harder.
- padding: 2px 6px → 4px 8px (still compact, easier target)
- margin: 0.5px 0 → 1px 0 (visible separation between items)
- line-height: 1.45 (new; explicit so wrapping labels don't crowd)
- section headers: +6px 8px padding + 4px top margin for clearer hierarchy
Touches only sidebar items and section headers; hover/active colors,
section indentation, and mobile overrides (which already use !important
inside a media query) are unchanged. All five sites pick it up via the
shared partial imports.
Playwright verification at 992-1199 px showed the Quarto wrapper element
.navbar-brand-container (which holds both the logo <a> and title <a>)
being shrunk to 0 px by the nav dropdowns, hiding the shield and title
entirely on laptops. The earlier fix targeted .navbar-brand anchors but
left the enclosing container with default flex-shrink and min-width: 0.
Pin the container's flex-shrink to 0, widen its max-width from
100%-115px to 100%-60px, and keep the title's ellipsis on the inner
span only. Shield + full "Machine Learning Systems" now render at every
width >= 992 px; title truncates only when genuinely out of room.
Verified with Playwright across 380/480/768/900/992/1100/1200/1400 px
on instructors, tinytorch, and slides — 80/80 assertions pass.
On instructors and slides pages, the floating sidebar steals horizontal
space from the top navbar, and at widths just above the hamburger
breakpoint the Harvard shield was being clipped while the long title
"Machine Learning Systems" stayed fully rendered.
- .navbar-brand img: flex-shrink 0 so the shield never compresses
- .navbar-brand: inline-flex + min-width 0 + overflow hidden, with
.navbar-title gaining text-overflow ellipsis, so the title truncates
instead of pushing the shield out of frame
- _mobile.scss: extend the abbreviated "ML Systems" title from
max-width 480px up to max-width 991px, i.e. at all widths below
the hamburger breakpoint. The shortest form stays at 480px.
Two fixes:
1. Clicking "Machine Learning Systems" title/logo now navigates to
https://mlsysbook.ai/ (the main landing page) from any subsite.
Set via shared navbar-common.yml href so all sites inherit it.
2. Fix dark mode toggle positioning when navbar collapses at half-screen
width. The floating .top-right toggle is now fixed-positioned to
align cleanly next to the search icon instead of floating awkwardly.
Move dark mode .navbar-brand color from _site-dark.scss into
_navbar.scss using body.quarto-dark selector. This ensures ALL
Quarto sites get the correct light title (#e6e6e6) on dark navbar
backgrounds — not just the main site.
Mobile phone abbreviation now uses color: inherit so it automatically
follows the light/dark mode parent color.
The "Machine Learning Systems" title text was inconsistent:
- Desktop light: Quarto default (varied by site)
- Mobile <480px: accent-colored (crimson/teal/amber per site)
- Dark mode (site only): accent-dark colored
Standardize to: dark gray (#333) in light mode across all viewports,
light gray (#e6e6e6) in dark mode. Neutral title keeps visual focus
on the page content, not the navbar chrome.
- Fix Newsletter card linking to community/ instead of newsletter/
- Fix "Meet our sponsors" linking to about/ instead of community/partners.html
- Unify navbar hover colors: all items now use crimson ($accent) on hover
instead of inconsistent dark gray (#495057) for dropdown toggles
- Standardize Global Network hero to eyebrow/title/body pattern
- Remove redundant Explore and Join Us sections (duplicated navbar/footer)
- Move WALC 2025 from Upcoming to Past Events (Nov 2025 is past)
- Move StaffML app from /interviews/ to /staffml/ (basePath, destination_dir)
- Add /interviews/ → /staffml/ redirect for old URL support
- Add staffml to site deploy skip list
- Upgrade interviews/README.md with star funnel hero + Launch StaffML CTA
- Promote v3 rich-card landing page to default index.qmd
- Archive original landing as index-v1.qmd
- Fix navbar wrapping: icon-only below 1400px, no-wrap on right-side items
- Update star CTA copy: "helps others discover" (inclusive wording)
- Replace favicon with SEAS shield as navbar logo
- Change collapse-below from xl to lg so hamburger kicks in earlier
- Hide right-side nav text labels between lg-xl breakpoints (icon only)
- Constrain logo to 28px height
- Remove content-visible wrapper from community index.qmd so Quarto
generates TOC entries for the four ## sections
- Add ul.collapse override in _toc.scss to ensure TOC list is visible
- Add explicit .quarto-dark overrides in community.css for opening text,
card headings, and body text visibility
- Scope dark mode blockquote rule to blockquote:not([class]) to avoid
overriding custom spotlight quotes
- Add .content p/li dark mode color rule in _site-dark.scss
- Replace MIT Press SVG placeholder with proper PNG logo
- Update community index.qmd to reference mit-press.png
- Fix Global Network navbar link to /community/ (remove #outreach anchor)
- Update landing _quarto.yml to use shared style-site.scss and site-head.html
- Create shared/ directory with centralized SCSS partials and site-head.html
so site subsites (about, community, newsletter) no longer duplicate
inline header config or reference book-only styles
- Fix subscribe modal: change script src from broken relative path
(../../book/quarto/assets/scripts/subscribe-modal.js) to absolute URL
(https://mlsysbook.ai/vol1/assets/scripts/subscribe-modal.js) which
the rewrite-dev-urls.sh script converts for dev preview automatically
