[PR #1524] [MERGED] polish(tinytorch): sidebar + headers + flat tier cards + PDF milestone transitions #7390

New Issue

GiteaMirror · 2026-04-24T17:27:45-05:00

GiteaMirror commented

2026-04-24 17:27:45 -05:00

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1524
Author: @profvjreddi
Created: 4/24/2026
Status: ✅ Merged
Merged: 4/24/2026
Merged by: @profvjreddi

Base: dev ← Head: polish/tinytorch-sidebar-headers-transitions

📝 Commits (1)

44baf0c polish(tinytorch): sidebar titles + HTML milestone removal + flat tier

📊 Changes

9 files changed (+72 additions, -66 deletions)

View changed files

📝 shared/styles/partials/_sidebar.scss (+11 -0)
📝 tinytorch/quarto/_quarto.yml (+14 -28)
📝 tinytorch/quarto/assets/styles/style.scss (+28 -27)
📝 tinytorch/quarto/milestones/01_perceptron.qmd (+2 -0)
📝 tinytorch/quarto/milestones/04_cnn.qmd (+2 -0)
📝 tinytorch/quarto/milestones/06_mlperf.qmd (+2 -0)
📝 tinytorch/quarto/modules/08_training.qmd (+4 -2)
📝 tinytorch/quarto/modules/13_transformers.qmd (+4 -6)
📝 tinytorch/quarto/modules/19_benchmarking.qmd (+5 -3)

📄 Description

Summary

Six independent polish items in one PR — they all landed on the same mental walkthrough of the TinyTorch site.

#	What	Where
1	Sidebar title renames (no more wrapping)	`_quarto.yml`
2	Milestones removed from HTML sidebar (PDF untouched)	`_quarto.yml`
3	Sidebar `overscroll-behavior: contain` (all ecosystem sites benefit)	shared `_sidebar.scss`
4	H2 L-shape decoration stripped on TinyTorch only	`style.scss` override
5	Tier cards flattened — neutral fill + colored left-border	`style.scss`
6	PDF milestone transitions (tier-ending modules + milestone openers)	6 `.qmd` files
7	Pre-existing corrupted trailing content removed	`13_transformers.qmd`

Details

1 + 2. Sidebar structure (`_quarto.yml`)

"Capstone Competition" → "Capstone"; "TITO CLI Reference" → "TITO CLI" (also in the navbar). All three milestone sections removed from the HTML sidebar because they interleaved between tiers and broke the Foundation → Architecture → Optimization → Capstone reading flow. Milestones stay reachable via the navbar's "Historical Milestones" entry; the PDF build has its own config (`pdf/_quarto.yml`) and is untouched.

3. Sidebar scroll chaining (`shared/styles/partials/_sidebar.scss`)

`overscroll-behavior: contain` on `#quarto-sidebar` prevents scrolls that hit the sidebar's top/bottom from chain-scrolling the body. Every Quarto site in the ecosystem picks this up — not just TinyTorch.

4. H2 L-shape (`tinytorch/quarto/assets/styles/style.scss`)

The shared `_headers.scss` partial decorates H2-H6 with a thick accent left-border plus a thin accent bottom line — an "L-shape" that works in the textbook's long-form prose. TinyTorch is framework documentation (code blocks, comparison grids, card layouts) and the decoration felt heavy. Scoped override strips `border-left`/`border-bottom`/`padding-left`/`padding-bottom` from H2-H6 on TinyTorch only — book/kits/labs/mlsysim keep the decoration.

5. Tier cards (`tinytorch/quarto/assets/styles/style.scss`)

`.tier-foundation` / `.tier-architecture` / `.tier-optimization` / `.tier-olympics` previously used four heavy gradient fills that fought the comparison grid on the same page (and tier-optimization read as specifically orange-heavy). Flattened to the same `#fafafa` neutral fill used by `.audience-card` and preface.qmd's cards, with a 4px colored left-border per tier carrying the identity color.

6. PDF milestone transitions (6 `.qmd` files)

Milestones appeared suddenly in the PDF after each tier. Added short transitions:

`modules/08_training.qmd`: forward-hook into Foundation Milestones, naming the components (Tensor/Linear/autograd/optimizer/Trainer) they exercise
`modules/13_transformers.qmd`: forward-hook into Architecture Milestones (LeNet-5, 2017 Transformer)
`modules/19_benchmarking.qmd`: forward-hook into Optimization Milestone (MLPerf 2018)
`milestones/01_perceptron.qmd`: opening naming the Foundation Tier components used
`milestones/04_cnn.qmd`: first-Architecture-Milestone framing + three-tier arc
`milestones/06_mlperf.qmd`: sole-Optimization-Milestone + "third act" framing

Files left untouched because their transitions were already good: `milestones/index.qmd`, `02_xor.qmd`, `03_mlp.qmd`, `05_transformer.qmd`.

7. Drive-by: corruption cleanup (`modules/13_transformers.qmd`)

Pre-existing orphan content at the end of the file (duplicate sentence + two orphan table rows `44B parameters |` and a duplicate Capstone row). Removed since we were already editing the file.

Verification (Playwright against local `quarto preview`)

Check	Result
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."	`border-left-width: 0px`, `border-bottom-width: 0px`, `padding-left: 0px`
`.tier-card`	all `bg: rgb(250, 250, 250)`, each with `border-left: 4px solid {tier-color}`

Test plan

Local `quarto preview` build renders cleanly
Playwright DOM/style checks pass
Pre-commit hooks pass
Post-merge: preview deploy for visual confirmation on the deployed tinytorch site

_{🔄 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/1524 **Author:** [@profvjreddi](https://github.com/profvjreddi) **Created:** 4/24/2026 **Status:** ✅ Merged **Merged:** 4/24/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `polish/tinytorch-sidebar-headers-transitions` --- ### 📝 Commits (1) - [`44baf0c`](https://github.com/harvard-edge/cs249r_book/commit/44baf0c757c0f5df366bc70d266565e48c875a7f) polish(tinytorch): sidebar titles + HTML milestone removal + flat tier ### 📊 Changes **9 files changed** (+72 additions, -66 deletions) <details> <summary>View changed files</summary> 📝 `shared/styles/partials/_sidebar.scss` (+11 -0) 📝 `tinytorch/quarto/_quarto.yml` (+14 -28) 📝 `tinytorch/quarto/assets/styles/style.scss` (+28 -27) 📝 `tinytorch/quarto/milestones/01_perceptron.qmd` (+2 -0) 📝 `tinytorch/quarto/milestones/04_cnn.qmd` (+2 -0) 📝 `tinytorch/quarto/milestones/06_mlperf.qmd` (+2 -0) 📝 `tinytorch/quarto/modules/08_training.qmd` (+4 -2) 📝 `tinytorch/quarto/modules/13_transformers.qmd` (+4 -6) 📝 `tinytorch/quarto/modules/19_benchmarking.qmd` (+5 -3) </details> ### 📄 Description ## Summary Six independent polish items in one PR — they all landed on the same mental walkthrough of the TinyTorch site. | # | What | Where | |---|---|---| | 1 | Sidebar title renames (no more wrapping) | \`_quarto.yml\` | | 2 | Milestones removed from HTML sidebar (PDF untouched) | \`_quarto.yml\` | | 3 | Sidebar \`overscroll-behavior: contain\` (all ecosystem sites benefit) | shared \`_sidebar.scss\` | | 4 | H2 L-shape decoration stripped on TinyTorch only | \`style.scss\` override | | 5 | Tier cards flattened — neutral fill + colored left-border | \`style.scss\` | | 6 | PDF milestone transitions (tier-ending modules + milestone openers) | 6 \`.qmd\` files | | 7 | Pre-existing corrupted trailing content removed | \`13_transformers.qmd\` | ## Details ### 1 + 2. Sidebar structure (\`_quarto.yml\`) \"Capstone Competition\" → \"Capstone\"; \"TITO CLI Reference\" → \"TITO CLI\" (also in the navbar). All three milestone sections removed from the HTML sidebar because they interleaved between tiers and broke the Foundation → Architecture → Optimization → Capstone reading flow. Milestones stay reachable via the navbar's \"Historical Milestones\" entry; the PDF build has its own config (\`pdf/_quarto.yml\`) and is untouched. ### 3. Sidebar scroll chaining (\`shared/styles/partials/_sidebar.scss\`) \`overscroll-behavior: contain\` on \`#quarto-sidebar\` prevents scrolls that hit the sidebar's top/bottom from chain-scrolling the body. Every Quarto site in the ecosystem picks this up — not just TinyTorch. ### 4. H2 L-shape (\`tinytorch/quarto/assets/styles/style.scss\`) The shared \`_headers.scss\` partial decorates H2-H6 with a thick accent left-border plus a thin accent bottom line — an \"L-shape\" that works in the textbook's long-form prose. TinyTorch is framework documentation (code blocks, comparison grids, card layouts) and the decoration felt heavy. Scoped override strips \`border-left\`/\`border-bottom\`/\`padding-left\`/\`padding-bottom\` from H2-H6 on TinyTorch **only** — book/kits/labs/mlsysim keep the decoration. ### 5. Tier cards (\`tinytorch/quarto/assets/styles/style.scss\`) \`.tier-foundation\` / \`.tier-architecture\` / \`.tier-optimization\` / \`.tier-olympics\` previously used four heavy gradient fills that fought the comparison grid on the same page (and tier-optimization read as specifically orange-heavy). Flattened to the same \`#fafafa\` neutral fill used by \`.audience-card\` and preface.qmd's cards, with a 4px colored left-border per tier carrying the identity color. ### 6. PDF milestone transitions (6 \`.qmd\` files) Milestones appeared suddenly in the PDF after each tier. Added short transitions: - **\`modules/08_training.qmd\`**: forward-hook into Foundation Milestones, naming the components (Tensor/Linear/autograd/optimizer/Trainer) they exercise - **\`modules/13_transformers.qmd\`**: forward-hook into Architecture Milestones (LeNet-5, 2017 Transformer) - **\`modules/19_benchmarking.qmd\`**: forward-hook into Optimization Milestone (MLPerf 2018) - **\`milestones/01_perceptron.qmd\`**: opening naming the Foundation Tier components used - **\`milestones/04_cnn.qmd\`**: first-Architecture-Milestone framing + three-tier arc - **\`milestones/06_mlperf.qmd\`**: sole-Optimization-Milestone + \"third act\" framing Files left untouched because their transitions were already good: \`milestones/index.qmd\`, \`02_xor.qmd\`, \`03_mlp.qmd\`, \`05_transformer.qmd\`. ### 7. Drive-by: corruption cleanup (\`modules/13_transformers.qmd\`) Pre-existing orphan content at the end of the file (duplicate sentence + two orphan table rows \`44B parameters |\` and a duplicate Capstone row). Removed since we were already editing the file. ## Verification (Playwright against local \`quarto preview\`) | Check | Result | |---|---| | 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.\" | \`border-left-width: 0px\`, \`border-bottom-width: 0px\`, \`padding-left: 0px\` | | \`.tier-card\` | all \`bg: rgb(250, 250, 250)\`, each with \`border-left: 4px solid {tier-color}\` | ## Test plan - [x] Local \`quarto preview\` build renders cleanly - [x] Playwright DOM/style checks pass - [x] Pre-commit hooks pass - [ ] Post-merge: preview deploy for visual confirmation on the deployed tinytorch site --- <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-04-24 17:27:45 -05:00

GiteaMirror closed this issue

2026-04-24 17:27:46 -05:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#7390