From f57fc44295be602222edee1fd433694cffe34811 Mon Sep 17 00:00:00 2001 From: Vinta Chen Date: Sun, 3 May 2026 18:54:23 +0800 Subject: [PATCH] style: bump tag font size to var(--text-xs) and codify 12px minimum font-size rule Co-Authored-By: Claude --- DESIGN.md | 1 + website/static/style.css | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index dd35e50a..1548dfd5 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -75,6 +75,7 @@ Layout and sizing: - The impeccable skill reference rule "cap line length at ~65-75ch" does NOT apply here. Ignore it. Readability at wide widths is carried by vertical rhythm, leading, and the modular type scale instead. - If you believe a width cap is actually necessary for some specific element, ask first with a concrete reason before adding it. - Body type floor is 16px (`--text-base: 1rem`). Content-heavy passages may go to 1.125rem. +- Absolute minimum font size is 12px (`0.75rem`) for ANY text, including pills, badges, tags, captions, footnotes. Anything smaller hits Chrome's default minimum-font-size floor and renders inconsistently across browsers and user accessibility settings. Use `var(--text-xs)` (`0.8rem`) as the smallest token. - When in doubt about any type size, pick one step larger than what the impeccable skill's scale references suggest. The user has repeatedly corrected sizes upward (11+ separate requests across 8 sessions). Never reduce an existing size unprompted. Footer, meta rows, expand content, labels, headings all trend too small by default. - Row numbers in the table: left-align, no leading zeros. The user tried zero-padding and rejected it. - Adjacent heading levels differ by at least 0.25rem of rendered size. diff --git a/website/static/style.css b/website/static/style.css index a547d95b..f39ffe8c 100644 --- a/website/static/style.css +++ b/website/static/style.css @@ -1050,7 +1050,7 @@ th[data-sort].sort-asc::after { background: var(--accent-soft); color: var(--accent-deep); padding: 0.14rem 0.48rem; - font-size: 0.6rem; + font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; cursor: pointer; @@ -1618,7 +1618,7 @@ th[data-sort].sort-asc::after { .tag { padding: 0.38rem 0.65rem; - font-size: 0.65rem; + font-size: var(--text-xs); } .table-wrap {