From d81ac2e81cd089b05cee11425f6b6695b0141e29 Mon Sep 17 00:00:00 2001 From: Derek Lewis Date: Mon, 24 Aug 2026 03:31:23 +0000 Subject: [PATCH] =?UTF-8?q?=E2=99=BF=F0=9F=94=A7=EF=BC=9Amake=20the=20not-?= =?UTF-8?q?yet-published=20tag=20readable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Parchment on a solid quaternary is 4.33:1, and the words are 11px, so the floor is 4.5:1. It sat on the ink bar beside `Install`, where a dark chip on a dark ground also had little to separate it: 3.22:1 against what is behind it. It now reads the way `.tag-when` does a few lines above, a pale fill carrying its own deep text, which is the pairing the handbook's own flags settled on. 6.91:1 for the words, and the chip itself stands off the bar rather than sinking into it. Signed-off-by: Derek Lewis Assisted-by: Claude-Code:claude-opus-5 --- _assets/styles/_home.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/_assets/styles/_home.scss b/_assets/styles/_home.scss index 9625858fc..fc1d71ca0 100644 --- a/_assets/styles/_home.scss +++ b/_assets/styles/_home.scss @@ -17,6 +17,8 @@ --parchment: #{$body-bg}; --primary-tint: #{tint-color($primary, 30%)}; --primary-deep: #{shade-color($primary, 25%)}; + --quaternary-pale: #{tint-color($quaternary, 88%)}; + --quaternary-deep: #{shade-color($quaternary, 25%)}; --nav-h: #{$navbar-height}; --sans: #{$font-family-sans-serif}; --mono: #{$font-family-monospace}; @@ -469,10 +471,13 @@ letter-spacing: 0.08em; } +// A pale fill with its own deep text, as `.tag-when` beside it is: on the ink +// bar the two read as the same kind of chip, and the words clear 4.5:1, which +// parchment on a solid quaternary does not at this size. .tag-soon { margin-left: auto; - color: var(--parchment); - background-color: var(--quaternary); + color: var(--quaternary-deep); + background-color: var(--quaternary-pale); } .install-code {