The .inv-table cells and .footer-cta card hardcoded light colors that
made text invisible against the dark theme. Added dark-mode overrides
for column text, hover row, last-column links, and the CTA card.
Markdown blockquotes (e.g. the Sample Decision Log entries on the
Assessment page) inherited Quarto's light-mode text color, leaving the
content nearly unreadable on the dark background. Style blockquotes
with the dark-mode body color, elevated surface, and indigo left border.
Mirrors the kits fix (#1623): navbar submenus rendered with a white
background in dark mode. Sets dropdown surface, items, headers, and
dividers to the Blueprint dark palette with indigo hover/active.
The dark-mode rule targeted .sidebar .sidebar-item a, but the rendered
sidebar uses a.sidebar-link and a.sidebar-item-toggle directly, so the
section headers and leaf links inherited the light theme and were
unreadable on the dark background.
Target the actual selectors (sidebar-link, sidebar-item-toggle,
menu-text), and cover the search input and TOC rail with the same
indigo accent.
Local rendering of the previous redesign showed text bleed on the
longer secondary labels — "Hardware Kits: Reality" and
"TinyTorch: Implementation" sat right at the box edges with no inner
padding, "Labs: Simulation & Discovery" overflowed the rect bounds
on Safari. Per gemini-2.5-flash review (the user's preferred
gemini-3.1-pro-preview was at quota cap):
- Pillar box width 140 -> 170 px (extra ~7px padding either side
of the longest label).
- X coordinates of READ/EXPLORE shifted from 270 -> 255 to keep
them centred at x=340; BUILD shifted 475 -> 460 and DEPLOY
65 -> 50 to keep their outer edges aligned with the canvas
margin.
- Box centres unchanged, so the emoji + title + sublabel rows
stay vertically aligned.
- Re-snapped the four loop-arrow paths to the new box edges so
each marker terminates exactly at the perpendicular border:
READ→BUILD : M425,135 Q500,135 500,195
BUILD→EXPLORE : M500,265 Q500,345 425,345
EXPLORE→DEPLOY : M255,345 Q180,345 180,265
DEPLOY→READ : M180,195 Q180,135 255,135
- Y coords of arrow labels and annotation card text snapped to
the 5/10px grid (gemini change retained).
Verified by local render: no text spills outside any pillar; all
four arrows close into their target box edges; loop reads
clockwise; semantic palette unchanged.
The four-pillar-loop.svg used pill-shape boxes (`rx="12"`), bright
non-semantic accent colors (indigo, mint-green, amber, rose), and
indigo arrow markers — none of which matched .claude/rules/svg-style.md.
Reads as inconsistent next to vol1/vol2 figures and instructor-hub
material.
Changes (geometry preserved, only style):
- Box corners: rx="12" → rx="4" (standard process boxes per spec).
- Annotation cards: rx="6" → rx="4".
- Color roles mapped to the canonical semantic palette:
READ : compute blue (#cfe2f3 / #4a90c4)
BUILD : data-flow green (#d4edda / #3d9e5a)
EXPLORE : routing orange (#fdebd0 / #c87b2a)
DEPLOY : error/cost red (#f9d6d5 / #c44)
Center / annotations : neutral container (#f7f7f7 / #bbb)
- Arrow markers: indigo (#6366f1) → neutral (#555) per spec default.
- Loop arrow paths still curve around the center hub (cyclic
topology is the figure's content), but pulled clear of box
fills to avoid stroke-through-box defects.
- Title moved to canonical y=30 (was y=35).
- Footnote moved to canonical y=448 (was y=420), italic muted #999.
- Annotation cards widened to 180×40 to clear the footnote band.
- All coordinates snapped to 5/10px grid.
- Typography sizes tightened to the spec scale (titles 11/13,
secondary labels 9, sub 8).
Remove instructors-only overrides that made the navbar and page look
different from kits/slides/newsletter:
- body line-height: 1.7 (Quarto default is 1.5)
- body -webkit-font-smoothing (not set on other sites)
- .navbar-brand font-weight: 700 + letter-spacing: -0.03em
- .navbar border-bottom: 1px solid #e2e8f0
Now inherits Quarto defaults like all other subsites.
- instructors: remove Outfit display font, use Inter for headers like
all other sites. Remove redundant @import and h1-h4 font override.
- mlsysim: replace site-specific logo.svg with ecosystem shield logo
- tinytorch: replace TinyTorch-specific logo with ecosystem shield logo
All Quarto sites now have identical navbar: same shield logo, same Inter
font stack, same dark mode toggle, same shared responsive behavior.
Replace duplicated navbar/mobile responsive rules in satellite sites
(instructors, kits, labs, mlsysim, slides) with a single import of
shared/styles/partials/_mobile.scss. Removes ~169 lines of copy-pasted
CSS that would drift out of sync when the shared partial is updated.
- instructors: remove rogue desktop padding, add _mobile import
- kits: remove ~50 lines of duplicated mobile rules, add _mobile import
- labs: remove ~55 lines of duplicated mobile rules, add _mobile import
- mlsysim: remove ~55 lines of duplicated mobile rules, add _mobile import
- slides: add _mobile import (had no mobile rules before)
Every subsite now sets $accent to its brand color and imports
shared/styles/partials/_navbar.scss instead of duplicating the
~40-line navbar block locally. Single source of truth for link
color, hover/active states, brand image height, icon-collapse
media query, and color-scheme toggle.
Drift fix: before this, instructors had font-size: 0.9rem +
weight 500 (making navbar look smaller than peer sites) and
slides had no navbar CSS at all (fell back to Bootstrap defaults).
Both now match the ecosystem.
Also renames $accent in labs/style.scss (previously hot pink
#e94560, used only by .coming-badge) to $coming-badge-pink to
free $accent for the ecosystem convention.
Net: -168 lines of duplicated SCSS across 6 files.
Adds a new "The Books" section to the Instructor Hub between Syllabi
and the Companion Books section, showing the two MLSysBook volumes
(Vol I Foundations, Vol II At Scale) as hardcover cover images with
Read online / PDF / EPUB links.
New flow after Syllabi:
Syllabi -> The Books (what students read) -> Companion Books
(community hands-on books that extend the curriculum).
Volume covers reused from book/quarto/assets/images/covers/ (the MIT
Press hardcover renders already used for OG image metadata elsewhere).
Companion Books intro updated to name the Semester 1 hardware-lab pairing.
Curate four open companion books authored by Marcelo Rovai (TinyML4D
Academic Network Co-Chair, UNIFEI) and feature them in the Instructor
Hub under a new "Companion Books" section between Teaching Resources
and Syllabi. These pair directly with the hardware kits we ship and
give instructors a ready-to-assign tutorial path for Nicla Vision,
XIAO (XIAOML Kit / Grove AI), Raspberry Pi, and the full XIAO handbook.
- instructors/index.qmd: new section with .book-card grid layout,
intro paragraph that names the TinyML4D Academic Network and
positions the books as pairing with the curriculum, not replacing
it. Attribution on every card ties Marcelo to his Co-Chair role.
- instructors/assets/images/companion-books/: 4 book covers fetched
from the authors' sites (Nicla Vision, XIAO ESP32S3, Raspberry Pi,
XIAO Big Power Small Board).
Also updates Marcelo's card on the People page (site/about/people.yml)
with a one-line bio addition mentioning his companion-book authorship
across Nicla Vision, XIAO, and Raspberry Pi paths.
Framing follows the ecosystem-lift principle: MLSysBook curates and
routes discovery through its own surfaces while celebrating work by
network members, strengthening both brands through reciprocity.
- Remove hero/splash layouts from slides, instructors, newsletter
- Switch all subsites to default Quarto layout (sidebar + TOC) matching kits pattern
- Add Google Fonts (Inter + JetBrains Mono) to slides portal
- Change instructors and interviews navbar from dark to light for consistency
- Replace indigo accent with crimson in instructors SCSS to match ecosystem
- Add slide preview carousel with 7 actual Beamer slide renders across Vol I and Vol II
Complete instructor-facing Quarto site with 10 pages:
- Landing page with hero, semester cards, and component overview
- 8-step getting started checklist for adopting instructors
- Week-by-week syllabi for both semesters with direct links
- Course component map with SVG diagrams
- Pedagogy guide with facilitation strategies and cheat sheet
- Assessment rubrics with sample student work
- TA training guide with grading workflows
- Customization guide for quarters, seminars, and emphases
- FAQ addressing common adoption questions
Includes 4 SVG diagrams, ecosystem-aligned SCSS (light + dark),
and navbar structure matching the book sites.
