github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-05-22 14:03:46 -05:00
Code Issues 114 Packages Projects Releases 24 Wiki Activity

[PR #1537] [MERGED] fix(tinytorch/site): site-wide dark-mode coverage + framework version chip #9201

New Issue
Closed
opened 2026-05-03 01:26:16 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-05-03 01:26:16 -05:00
Owner
Copy Link

📋 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)

  • 4c2996e fix(tinytorch/ux): restore dark-mode contrast on tito/milestones page
  • 2707c05 fix(tinytorch/ux): site-wide dark-mode coverage for sidebar + inline-fill panels
  • 72d2163 feat(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.

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

  • 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>
GiteaMirror added the pull-request label 2026-05-03 01:26:16 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area: book
area: collabs
area: kits
area: labs
area: socratiq
area: tinytorch
area: tools
area: website
bug
dependencies
format: epub
format: pdf
javascript
link-health
link-rot
priority-high
pull-request
Mirrored from GitHub Pull Request
 staffml
type: bug
type: citation
type: code
type: errata
type: improvement
type: new
type: question
vault-sli
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#9201
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?