From 4b68f6840d7b3bef6f766675074ffb28e9e36e43 Mon Sep 17 00:00:00 2001 From: Ravi Teja KNTS Date: Sat, 10 Oct 2026 16:41:41 +0530 Subject: [PATCH 1/2] Keep h1 descenders above the highlight and darken light accent text - The h1 mark paints behind the title's other text, so letters on the line above (the y in "every", the g in "Zigbee") aren't cut off. - Light theme --color-accent-text goes from #3f7a00 to #3a7000: 4.99:1 on surface-2, up from 4.37:1, for selected chips and buttons. Co-Authored-By: Claude Opus 5.5 --- app/globals.css | 2 +- app/ui/site/page-header.module.css | 8 ++++++++ app/ui/site/prose.module.css | 3 +++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/app/globals.css b/app/globals.css index d611fd20..294dcfa3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -10,7 +10,7 @@ /* accent: --color-accent for fills only, --color-accent-text for colored text */ --color-accent: #bafc3c; - --color-accent-text: #3f7a00; + --color-accent-text: #3a7000; --color-accent-contrast: #141414; --color-link: var(--color-accent-text); diff --git a/app/ui/site/page-header.module.css b/app/ui/site/page-header.module.css index 16875633..767ed93d 100644 --- a/app/ui/site/page-header.module.css +++ b/app/ui/site/page-header.module.css @@ -23,7 +23,15 @@ overflow-wrap: anywhere; } +/* The tight h1 line height lets the highlight reach the line above. Painting it + behind the title's other text keeps those descenders on top. */ +.header h1 { + isolation: isolate; +} + .header h1 mark { + position: relative; + z-index: -1; background: var(--color-accent); border-radius: var(--radius); box-decoration-break: clone; diff --git a/app/ui/site/prose.module.css b/app/ui/site/prose.module.css index f0344238..737ae328 100644 --- a/app/ui/site/prose.module.css +++ b/app/ui/site/prose.module.css @@ -14,10 +14,13 @@ .prose h1 { font-size: var(--text-h1); + isolation: isolate; line-height: var(--line-h1); } .prose h1 mark { + position: relative; + z-index: -1; background: var(--color-accent); border-radius: var(--radius); box-decoration-break: clone; From f7b9f964985c5860fec70ad0d6337df87c263887 Mon Sep 17 00:00:00 2001 From: Ravi Teja KNTS Date: Sat, 10 Oct 2026 17:03:43 +0530 Subject: [PATCH 2/2] Keep linked h1 highlights clickable Co-Authored-By: Claude Opus 5.5 --- app/ui/site/page-header.module.css | 6 ++++++ app/ui/site/prose.module.css | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/app/ui/site/page-header.module.css b/app/ui/site/page-header.module.css index 767ed93d..22dd3000 100644 --- a/app/ui/site/page-header.module.css +++ b/app/ui/site/page-header.module.css @@ -40,6 +40,12 @@ padding-inline: 0.16em; } +/* A highlight that is or holds a link paints normally, so the link stays clickable. */ +.header h1 a mark, +.header h1 mark:has(a) { + z-index: auto; +} + .header > p { color: var(--color-text); font-size: var(--text-body); diff --git a/app/ui/site/prose.module.css b/app/ui/site/prose.module.css index 737ae328..a71a6981 100644 --- a/app/ui/site/prose.module.css +++ b/app/ui/site/prose.module.css @@ -29,6 +29,12 @@ padding: 0 0.18em; } +/* A highlight that is or holds a link paints normally, so the link stays clickable. */ +.prose h1 a mark, +.prose h1 mark:has(a) { + z-index: auto; +} + .prose h2 { font-size: var(--text-h2); }