Three commits on this branch addressing the dark-mode follow-ups from #1529 and adding a persistent framework version indicator. Site-only change — no Python package code touched, no version bump, no PyPI release.
Commit
What
4c2996e0d
Refactor tito/milestones.qmd inline-style panels to .who-card / .callout-note (follows the pattern #1529 established for preface.qmd)
2707c0546
Site-wide dark-mode SCSS coverage — sidebar + 14-color inline-fill safety net + 8-color text safety net + .who-card border
72d2163a7
Persistent framework version chip in sidebar — `🔥 TinyTorch v0.1.10 →` linked to GitHub Releases
Why
After #1529 fixed preface.qmd, three structural gaps remained on every other TinyTorch site page:
Sidebar stayed white in dark mode site-wide — dark-mode.scss declared \$sidebar-bg-dark but never applied it to a selector. White sidebar on every page.
Inline-style panels failed in dark mode across 12+ .qmd files (`background: #f8f9fa` etc. beats class specificity).
No persistent indication of which TinyTorch version the site documents — and the announcement-bar approach was already rejected (see config/announcement.yml header).
How
Per-page refactor of one file (tito/milestones.qmd) following the #1529 pattern — establishes the pattern, reduces inline styles 14 → 10 (the 10 remaining are intentional mode-invariant accents).
Defensive SCSS layer in dark-mode.scss — [style*=\"background: #X\"] attribute selectors for the 14 light-fill hex values used inline across the corpus, plus 8 dark-grey text colors. Catches every page in dark mode without touching individual .qmd files. `!important` is required because inline style= beats class specificity.
Sidebar version chip — small amber pill (#D4740C light / #F59E0B dark) below the existing subtitle, prefixed with `🔥 TinyTorch` so it cannot be mis-read as the textbook's version. Clicks open GitHub Releases filtered for `tinytorch` tags. Source: hardcoded with a TINYTORCH_VERSION_CHIP sed marker for future bumps.
Visually distinct from the subtitle prose (divider + amber pill + 🔥 TinyTorch prefix)
Deployment
Site-only deploy via existing tinytorch-publish-live workflow with site_only: true — skips version bump, tag, PDF build, GitHub release. Just renders Quarto and pushes to gh-pages/tinytorch/.
Known follow-ups (deferred, not blocking)
Per-file refactor of tito/overview/data/modules/troubleshooting.qmd (~140 inline styles total) — code-cleanliness improvement, safety net mitigates user-visible bug now.
Adding sidebar-subtitle.html to the publish workflow's UPDATE_VERSION step's sed list so the chip auto-bumps with settings.ini on each future release.
Test plan
quarto render succeeds across rendered pages (index, big-picture, tito/milestones, tito/overview, tito/troubleshooting)
Playwright dark-mode sweep — all panels meet WCAG AA contrast
Sidebar chip visible on every page in both modes, correct href, correct color
Once merged: tinytorch-publish-live with site_only: true to deploy
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1537
**Author:** [@profvjreddi](https://github.com/profvjreddi)
**Created:** 4/25/2026
**Status:** ✅ Merged
**Merged:** 4/25/2026
**Merged by:** [@profvjreddi](https://github.com/profvjreddi)
**Base:** `dev` ← **Head:** `fix/tinytorch-tito-dark-mode`
---
### 📝 Commits (3)
- [`4c2996e`](https://github.com/harvard-edge/cs249r_book/commit/4c2996e0dc313460895d8d6b21f2225e4e9ece18) fix(tinytorch/ux): restore dark-mode contrast on tito/milestones page
- [`2707c05`](https://github.com/harvard-edge/cs249r_book/commit/2707c0546aac589f7c6a1cab1d11c3ddac88fce2) fix(tinytorch/ux): site-wide dark-mode coverage for sidebar + inline-fill panels
- [`72d2163`](https://github.com/harvard-edge/cs249r_book/commit/72d2163a7012077122a6e2ecbd16a234bde42a40) feat(tinytorch/site): persistent framework version chip in sidebar
### 📊 Changes
**3 files changed** (+173 additions, -23 deletions)
<details>
<summary>View changed files</summary>
📝 `tinytorch/quarto/assets/scripts/sidebar-subtitle.html` (+70 -8)
📝 `tinytorch/quarto/assets/styles/dark-mode.scss` (+84 -0)
📝 `tinytorch/quarto/tito/milestones.qmd` (+19 -15)
</details>
### 📄 Description
## Summary
Three commits on this branch addressing the dark-mode follow-ups from #1529 and adding a persistent framework version indicator. **Site-only change — no Python package code touched, no version bump, no PyPI release.**
| Commit | What |
|---|---|
| `4c2996e0d` | Refactor `tito/milestones.qmd` inline-style panels to `.who-card` / `.callout-note` (follows the pattern #1529 established for `preface.qmd`) |
| `2707c0546` | Site-wide dark-mode SCSS coverage — sidebar + 14-color inline-fill safety net + 8-color text safety net + `.who-card` border |
| `72d2163a7` | Persistent framework version chip in sidebar — \`🔥 TinyTorch v0.1.10 →\` linked to GitHub Releases |
## Why
After #1529 fixed `preface.qmd`, three structural gaps remained on every other TinyTorch site page:
1. **Sidebar stayed white in dark mode site-wide** — `dark-mode.scss` declared `\$sidebar-bg-dark` but never applied it to a selector. White sidebar on every page.
2. **Inline-style panels failed in dark mode** across 12+ `.qmd` files (\`background: #f8f9fa\` etc. beats class specificity).
3. **No persistent indication of which TinyTorch version the site documents** — and the announcement-bar approach was already rejected (see `config/announcement.yml` header).
## How
1. **Per-page refactor** of one file (`tito/milestones.qmd`) following the #1529 pattern — establishes the pattern, reduces inline styles 14 → 10 (the 10 remaining are intentional mode-invariant accents).
2. **Defensive SCSS layer** in `dark-mode.scss` — `[style*=\"background: #X\"]` attribute selectors for the 14 light-fill hex values used inline across the corpus, plus 8 dark-grey text colors. Catches every page in dark mode without touching individual `.qmd` files. \`!important\` is required because inline `style=` beats class specificity.
3. **Sidebar version chip** — small amber pill (`#D4740C` light / `#F59E0B` dark) below the existing subtitle, prefixed with \`🔥 TinyTorch\` so it cannot be mis-read as the textbook's version. Clicks open GitHub Releases filtered for \`tinytorch\` tags. Source: hardcoded with a `TINYTORCH_VERSION_CHIP` sed marker for future bumps.
## Verification (Playwright, full-page screenshots, computed-style assertions)
| Page | Light | Dark | Notes |
|---|---|---|---|
| `index` | ✓ | ✓ | Hero, timeline, 4 dark cards, CTA — consistent |
| `big-picture` | ✓ | ✓ | 4 colored learning-path cards now dark via safety net |
| `tito/milestones` | ✓ | ✓ | Refactored — callouts + who-cards + sidebar all dark, contrast ≥ 11.0 WCAG AA |
| `tito/overview` | ✓ | ✓ | NOT refactored — safety net catches inline panels |
| `tito/troubleshooting` | ✓ | ✓ | NOT refactored — safety net catches inline panels |
Sidebar version chip verified on `index` + `tito/milestones`:
- Light mode: `color: rgb(212, 116, 12)` = `#D4740C` ✓
- Dark mode: `color: rgb(245, 158, 11)` = `#F59E0B` ✓
- `href` = `https://github.com/harvard-edge/cs249r_book/releases?q=tinytorch` ✓
- `target=\"_blank\" rel=\"noopener\"` ✓
- Visually distinct from the subtitle prose (divider + amber pill + `🔥 TinyTorch` prefix)
## Deployment
Site-only deploy via existing `tinytorch-publish-live` workflow with `site_only: true` — skips version bump, tag, PDF build, GitHub release. Just renders Quarto and pushes to `gh-pages/tinytorch/`.
## Known follow-ups (deferred, not blocking)
- Per-file refactor of `tito/overview/data/modules/troubleshooting.qmd` (~140 inline styles total) — code-cleanliness improvement, safety net mitigates user-visible bug now.
- `\$accent` SCSS cascade question from #1529 — static analysis suggests it's fine; render-time verification deferred.
- Adding `sidebar-subtitle.html` to the publish workflow's `UPDATE_VERSION` step's sed list so the chip auto-bumps with `settings.ini` on each future release.
## Test plan
- [x] `quarto render` succeeds across rendered pages (index, big-picture, tito/milestones, tito/overview, tito/troubleshooting)
- [x] Playwright dark-mode sweep — all panels meet WCAG AA contrast
- [x] Sidebar chip visible on every page in both modes, correct href, correct color
- [ ] Once merged: `tinytorch-publish-live` with `site_only: true` to deploy
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/harvard-edge/cs249r_book/pull/1537
Author: @profvjreddi
Created: 4/25/2026
Status: ✅ Merged
Merged: 4/25/2026
Merged by: @profvjreddi
Base:
dev← Head:fix/tinytorch-tito-dark-mode📝 Commits (3)
4c2996efix(tinytorch/ux): restore dark-mode contrast on tito/milestones page2707c05fix(tinytorch/ux): site-wide dark-mode coverage for sidebar + inline-fill panels72d2163feat(tinytorch/site): persistent framework version chip in sidebar📊 Changes
3 files changed (+173 additions, -23 deletions)
View changed files
📝
tinytorch/quarto/assets/scripts/sidebar-subtitle.html(+70 -8)📝
tinytorch/quarto/assets/styles/dark-mode.scss(+84 -0)📝
tinytorch/quarto/tito/milestones.qmd(+19 -15)📄 Description
Summary
Three commits on this branch addressing the dark-mode follow-ups from #1529 and adding a persistent framework version indicator. Site-only change — no Python package code touched, no version bump, no PyPI release.
4c2996e0dtito/milestones.qmdinline-style panels to.who-card/.callout-note(follows the pattern #1529 established forpreface.qmd)2707c0546.who-cardborder72d2163a7Why
After #1529 fixed
preface.qmd, three structural gaps remained on every other TinyTorch site page:dark-mode.scssdeclared\$sidebar-bg-darkbut never applied it to a selector. White sidebar on every page..qmdfiles (`background: #f8f9fa` etc. beats class specificity).config/announcement.ymlheader).How
tito/milestones.qmd) following the #1529 pattern — establishes the pattern, reduces inline styles 14 → 10 (the 10 remaining are intentional mode-invariant accents).dark-mode.scss—[style*=\"background: #X\"]attribute selectors for the 14 light-fill hex values used inline across the corpus, plus 8 dark-grey text colors. Catches every page in dark mode without touching individual.qmdfiles. `!important` is required because inlinestyle=beats class specificity.#D4740Clight /#F59E0Bdark) below the existing subtitle, prefixed with `🔥 TinyTorch` so it cannot be mis-read as the textbook's version. Clicks open GitHub Releases filtered for `tinytorch` tags. Source: hardcoded with aTINYTORCH_VERSION_CHIPsed marker for future bumps.Verification (Playwright, full-page screenshots, computed-style assertions)
indexbig-picturetito/milestonestito/overviewtito/troubleshootingSidebar version chip verified on
index+tito/milestones:color: rgb(212, 116, 12)=#D4740C✓color: rgb(245, 158, 11)=#F59E0B✓href=https://github.com/harvard-edge/cs249r_book/releases?q=tinytorch✓target=\"_blank\" rel=\"noopener\"✓🔥 TinyTorchprefix)Deployment
Site-only deploy via existing
tinytorch-publish-liveworkflow withsite_only: true— skips version bump, tag, PDF build, GitHub release. Just renders Quarto and pushes togh-pages/tinytorch/.Known follow-ups (deferred, not blocking)
tito/overview/data/modules/troubleshooting.qmd(~140 inline styles total) — code-cleanliness improvement, safety net mitigates user-visible bug now.\$accentSCSS cascade question from #1529 — static analysis suggests it's fine; render-time verification deferred.sidebar-subtitle.htmlto the publish workflow'sUPDATE_VERSIONstep's sed list so the chip auto-bumps withsettings.inion each future release.Test plan
quarto rendersucceeds across rendered pages (index, big-picture, tito/milestones, tito/overview, tito/troubleshooting)tinytorch-publish-livewithsite_only: trueto deploy🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.