ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

article headlines: --fs-h2 instead of --fs-h1 (long news titles filled the viewport at 56px; editorial 32-40px convention)

Browse Source
This commit is contained in:
ctao
2026-09-03 15:14:44 +02:00
parent c4d21b59be
commit 2e6d374b4b
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+2 -2
View File
@@ -39,8 +39,8 @@ Type scale — the ONLY font sizes in the codebase (no ad-hoc rem values):
| (base) | 1rem | Body, line-height 1.5 (1.65 only on `.prose`; 1.55 `.standfirst`; 1.45 cards/footer) | | (base) | 1rem | Body, line-height 1.5 (1.65 only on `.prose`; 1.55 `.standfirst`; 1.45 cards/footer) |
| `--fs-l` | 1.125rem | Card titles, standfirst, panel titles, hero subtitle | | `--fs-l` | 1.125rem | Card titles, standfirst, panel titles, hero subtitle |
| `--fs-xl` | 1.5rem | Prose h2, featured title, auth h1 | | `--fs-xl` | 1.5rem | Prose h2, featured title, auth h1 |
| `--fs-h2` | clamp(1.75–2.5rem) | Section heads | | `--fs-h2` | clamp(1.75–2.5rem) | Section heads, article headlines (news titles run long — full `--fs-h1` would fill the viewport) |
| `--fs-h1` | clamp(2.25–3.5rem) | Page/article headlines | | `--fs-h1` | clamp(2.25–3.5rem) | Short page heads only ("News & Announcements") |
| `--fs-display` | clamp(2.5–4.75rem) | Home hero only | | `--fs-display` | clamp(2.5–4.75rem) | Home hero only |
Font tokens end with a generic (`sans-serif`); use them bare — Font tokens end with a generic (`sans-serif`); use them bare —
src/styles/global.css
+5 -1
View File
@@ -515,7 +515,11 @@ span.page-step { color: var(--muted); } /* disabled end stop — non-interactive
.article-layout { display: grid; grid-template-columns: minmax(0, 70ch); } .article-layout { display: grid; grid-template-columns: minmax(0, 70ch); }
.article { padding-block: var(--space-l) var(--space-xl); max-width: 70ch; } .article { padding-block: var(--space-l) var(--space-xl); max-width: 70ch; }
.article .back { color: var(--muted); font-size: var(--fs-s); } .article .back { color: var(--muted); font-size: var(--fs-s); }
.article h1 { color: var(--galaxy); font-size: var(--fs-h1); margin: 14px 0 10px; } /* Article headlines use the SMALLER head token (--fs-h2, 28–40px), not
--fs-h1: news titles run long (10+ words) and at 56px a title fills the
viewport — editorial convention (Guardian/BBC/NYT ~32–40px). --fs-h1 stays
for short page heads ("News & Announcements"). */
.article h1 { color: var(--galaxy); font-size: var(--fs-h2); margin: 14px 0 10px; }
.article .meta { .article .meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
color: var(--muted); font-size: var(--fs-s); margin-bottom: var(--space-l); color: var(--muted); font-size: var(--fs-s); margin-bottom: var(--space-l);