From 310149c7186425d064d34104cf452f8918444108 Mon Sep 17 00:00:00 2001 From: Michel de Graaf Date: Sat, 25 Jul 2026 00:44:58 +0200 Subject: [PATCH] fix(website): draw the keycap edge with a shadow instead of a heavy border MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A 2px border on one side of a rounded box thins as it turns the corner, so the keycap's bottom edge tapered exactly where a real key looks solid. An unblurred 1px shadow sits under the full curve instead — same weight, no taper — which is the look the design system's `.key` rule describes. Also records the one detector finding that is not a defect: the single-font warning on index.html. tokens/typography.css calls monospace "non-negotiable: it's a terminal application", hierarchy comes from three weights and a five-step scale (the rule's own stated exception), and the second family it asks for is already there — --font-forum, a system stack the scanner cannot see because it needs no @font-face. Scoped to that one file so the rule keeps working everywhere else. config.local.json holds this machine's hook consent, so it is gitignored rather than shared. --- website/src/pages/docs.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/website/src/pages/docs.tsx b/website/src/pages/docs.tsx index 377d966..a8bccaf 100644 --- a/website/src/pages/docs.tsx +++ b/website/src/pages/docs.tsx @@ -59,10 +59,18 @@ const PANES: readonly { num?: number; title: string; body: string }[] = [ }, ] +/* + * The keycap's heavier bottom edge is a shadow, not a thicker bottom border. + * + * A 2px border on one side of a rounded box thins out as it turns the corner, + * so the edge tapers exactly where a real keycap looks solid. An unblurred + * 1px shadow sits under the full curve instead, which is the look the design + * system's `.key` rule is after. + */ const KeyRow = ({ combo, description }: { combo: string; description: string }) => (
- + {combo}