[PR #1527] [MERGED] fix(tinytorch/ux): restore H2-H6 decoration override + de-header comparison cards #7393

New Issue

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

GiteaMirror commented

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

📋 Pull Request Information

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

Base: dev ← Head: fix/tinytorch-h3-decoration-restore

📝 Commits (1)

b397e5c fix(tinytorch/ux): restore H2–H6 decoration override + de-header comparison cards

📊 Changes

2 files changed (+21 additions, -4 deletions)

View changed files

📝 tinytorch/quarto/assets/styles/style.scss (+19 -2)
📝 tinytorch/quarto/index.qmd (+2 -2)

📄 Description

Summary

Two related fixes from a UX walkthrough of http://localhost:4123/:

1. H2–H6 override regression

PR #1524 added an override stripping the shared _headers.scss L-shape decoration (4px accent left-border + 1px accent bottom-line) from H2–H6 on TinyTorch. The override was dropped in a merge conflict between then and now. Every H3 on a TinyTorch page was rendering with that accent bar again. Restoring with !important so a future partial edit can't drop the same rule silently.

2. Comparison-card titles no longer use H3

The "Why Build Instead of Use?" cards had `### Traditional ML Education` and `### TinyTorch: Build → Use → Reflect` as their titles. Even with the decoration stripped (fix 1), an H3 at 24.65px inside a card reads as a page heading squeezed into a container — wrong scale, wrong semantics (the whole card is the content; there's no "sub-section" for the title to label). Swapped to a styled <span> class:

[Traditional ML Education]{.comparison-title}

New .comparison-title class: 1.15rem (~18.4px), 600 weight, no border — properly card-scaled, zero heading baggage (no TOC entry, no doc-outline pollution, no sidebar auto-entry).

Before / after

Before (h3 with L-shape — user flagged "looks weird"):

font-size: 24.65px, border-left: 4px solid #d4740c, border-bottom: 1px solid rgba(212,116,12,.25)

After (styled span, no decoration):

font-size: 19.55px, border-left: 0, border-bottom: 0

Screenshot of fixed state: /tmp/banner-work/compare-fixed.png — titles render as clean bold text without underline or accent bar.

Font audit (no changes needed)

From a walk of the home, module, and milestone pages:

Element	Font	Size	Weight	Line-height
body	Inter	17px	400	25.5px
h1	Inter	42.5px	700	51px
h2	Inter	28.05px	600	33.66px
h3	Inter	24.65px	600	29.58px
code	JetBrains Mono	14.9px	400	22.3px
sidebar link	Inter	15.7px	500	17px
TOC link	Inter	15.3px	500	18.7px

All consistent with the ecosystem font stack. Nothing else to change — the only real issue was the H3-in-a-card scale problem, which #2 resolves by moving out of heading semantics entirely.

Test plan

Playwright confirms no h3 inside .comparison-bad / .comparison-good
.comparison-title span renders at 19.55px, no borders
Pre-commit passes
Post-merge: eye module pages to confirm H2 / H3 page headings are also decoration-free (they should be — same override applies)

_{🔄 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/1527 **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:** `fix/tinytorch-h3-decoration-restore` --- ### 📝 Commits (1) - [`b397e5c`](https://github.com/harvard-edge/cs249r_book/commit/b397e5cd499b47dc6b7effb4c77e5b77ab461d61) fix(tinytorch/ux): restore H2–H6 decoration override + de-header comparison cards ### 📊 Changes **2 files changed** (+21 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `tinytorch/quarto/assets/styles/style.scss` (+19 -2) 📝 `tinytorch/quarto/index.qmd` (+2 -2) </details> ### 📄 Description ## Summary Two related fixes from a UX walkthrough of [http://localhost:4123/](http://localhost:4123/): ### 1. H2–H6 override regression PR #1524 added an override stripping the shared `_headers.scss` L-shape decoration (4px accent left-border + 1px accent bottom-line) from H2–H6 on TinyTorch. **The override was dropped in a merge conflict between then and now.** Every H3 on a TinyTorch page was rendering with that accent bar again. Restoring with `!important` so a future partial edit can't drop the same rule silently. ### 2. Comparison-card titles no longer use H3 The "Why Build Instead of Use?" cards had \`### Traditional ML Education\` and \`### TinyTorch: Build → Use → Reflect\` as their titles. Even with the decoration stripped (fix 1), an H3 at **24.65px** inside a card reads as a page heading squeezed into a container — wrong scale, wrong semantics (the whole card *is* the content; there's no "sub-section" for the title to label). Swapped to a styled `<span>` class: ```qmd [Traditional ML Education]{.comparison-title} ``` New `.comparison-title` class: 1.15rem (~18.4px), 600 weight, no border — properly card-scaled, zero heading baggage (no TOC entry, no doc-outline pollution, no sidebar auto-entry). ## Before / after **Before** (h3 with L-shape — user flagged "looks weird"): - `font-size: 24.65px`, `border-left: 4px solid #d4740c`, `border-bottom: 1px solid rgba(212,116,12,.25)` **After** (styled span, no decoration): - `font-size: 19.55px`, `border-left: 0`, `border-bottom: 0` Screenshot of fixed state: `/tmp/banner-work/compare-fixed.png` — titles render as clean bold text without underline or accent bar. ## Font audit (no changes needed) From a walk of the home, module, and milestone pages: | Element | Font | Size | Weight | Line-height | |---|---|---|---|---| | body | Inter | 17px | 400 | 25.5px | | h1 | Inter | 42.5px | 700 | 51px | | h2 | Inter | 28.05px | 600 | 33.66px | | h3 | Inter | 24.65px | 600 | 29.58px | | code | JetBrains Mono | 14.9px | 400 | 22.3px | | sidebar link | Inter | 15.7px | 500 | 17px | | TOC link | Inter | 15.3px | 500 | 18.7px | All consistent with the ecosystem font stack. Nothing else to change — the only real issue was the H3-in-a-card scale problem, which #2 resolves by moving out of heading semantics entirely. ## Test plan - [x] Playwright confirms no `h3` inside `.comparison-bad` / `.comparison-good` - [x] `.comparison-title` span renders at 19.55px, no borders - [x] Pre-commit passes - [ ] Post-merge: eye module pages to confirm H2 / H3 page headings are also decoration-free (they should be — same override applies) --- <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:50 -05:00

GiteaMirror closed this issue

2026-04-24 17:27:52 -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#7393