mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-06 09:38:33 -05:00
c67770ce03
Round-2 UX polish pass after a full Playwright walkthrough surfaced a few
cheap, high-impact wins. Scoped to three files.
HOME (index.qmd)
- Hero hierarchy swap. The prior markup rendered a 2.5rem <p> "Build
Your Own ML Framework" followed by an <h2> "Don't import it.
Build it." — which flipped the semantic hierarchy: the tagline
subtitle read as the most important element, and the memorable
slogan (which matches the pagetitle) read as secondary.
Fix: "Don't import it. Build it." is now the page's h1; "Build your
own ML framework — from tensors to systems." is the subtitle below
it. Screen readers, search engines, and the eye all agree now.
- Preview badge: "Classroom ready 2026" -> "Classroom ready Fall 2026".
The date is now unambiguous (we're in 2026; old copy read as "not
yet shipped in 2026" or "already shipped in 2026" depending on
reader).
- Star-count CTA copy: was "⭐ 23,763 learners · every ⭐ helps
support free ML education". Problem: the dynamic number is the
GitHub stars count, not a learner count — conflating the two is
misleading. Rewrite: "⭐ 23,763 stars on GitHub — add yours and
support free ML education". Concrete number, concrete verb, honest.
MILESTONES HUB (milestones/index.qmd)
- Add a six-card roster at the top showing 1958 -> 2018 at a glance
(Perceptron, XOR Crisis, MLP Revival, CNN Revolution, Transformers,
MLPerf). Previously the hub opened with two prose paragraphs before
the journey table; a first-time reader had to scroll past them to
see the milestone list. The 6-card grid makes the arc instantly
legible; the detailed per-milestone journey table stays in place
further down for the reader who wants module-by-module dependencies.
- Cards are links, each to the milestone's own page.
- Color coding mirrors the tier that produces the milestone's modules:
Foundation (blue), Architecture (purple), Optimization (orange).
CSS (tinytorch/quarto/assets/styles/style.scss)
- New .milestone-grid + .milestone-card classes, styled to match the
preface audience-card aesthetic shipped in the previous polish PR
(neutral #fafafa fill, colored left-border carrying the tier
identity). Responsive: 3-col desktop, 2-col tablet, 1-col mobile.
- data-era="{foundation|architecture|optimization}" attribute on each
card drives the border-left color via the attribute selector, so
the era -> color mapping stays declarative and doesn't need per-card
inline style.
Verified (Playwright against local quarto preview):
- Home h1 is now "Don't import it. Build it." at 42.5px; badge reads
"Preview · Classroom ready Fall 2026"; star link reads "⭐ {N}
stars on GitHub — add yours and support free ML education"
- Milestones hub renders the 6-card grid with correct data-era colors
(foundation = rgb(25, 118, 210), architecture = rgb(123, 31, 162),
optimization = rgb(245, 124, 0)).
Deferred — acknowledged as valid observations in the UX walkthrough but
out of scope for this PR:
- Swap module-page action cards above Module Info (touches ~20 module
files; wants a template-level change, not ad-hoc QMD rewrites).
- Sticky per-module progress indicator (wants JS + scroll listener).
- Announcement-bar collapse on narrow viewport (JS + cross-site).
- Olympics "Coming Soon" -> dated promise (intentionally left alone:
the real Olympics launch content is landing in a separate PR in
the next few days).