From d2be48e2952724c7fd10f3bf7a72eb128668cb13 Mon Sep 17 00:00:00 2001 From: svemagie <869694+svemagie@users.noreply.github.com> Date: Thu, 19 Mar 2026 15:34:31 +0100 Subject: [PATCH] style: yellow prose text, blue links/interactive - Set --tw-prose-body to Gruvbox yellow (#b57614 light, #ebdbb2 dark) so article text has warm yellow tone like brennan.day - Revert accent palette back to Gruvbox blue (#076678 / #83a598) for links, focus rings, and interactive elements Co-Authored-By: Claude Sonnet 4.6 --- css/critical.css | 14 +++++++------- css/tailwind.css | 26 +++++++++++++------------- tailwind.config.js | 28 ++++++++++++++++------------ 3 files changed, 36 insertions(+), 32 deletions(-) diff --git a/css/critical.css b/css/critical.css index b365c94..df00030 100644 --- a/css/critical.css +++ b/css/critical.css @@ -56,8 +56,8 @@ main.container{padding-top:1.5rem;padding-bottom:1.5rem} /* Basic typography */ h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:900} -a{color:#b57614} -.dark a{color:#fabd2f} +a{color:#076678} +.dark a{color:#83a598} /* Prevent flash of unstyled content for nav */ .site-nav{display:flex;align-items:center;gap:1rem} @@ -69,13 +69,13 @@ img{max-width:100%;height:auto} svg:not(:root):not([width]){width:1.25rem;height:1.25rem} /* Focus indicators — visible in critical CSS before Tailwind loads */ -a:focus-visible{outline:2px solid #b57614;outline-offset:2px;border-radius:2px} -.dark a:focus-visible{outline-color:#fabd2f} -button:focus-visible,[type="button"]:focus-visible{outline:2px solid #b57614;outline-offset:2px;border-radius:4px} -.dark button:focus-visible,.dark [type="button"]:focus-visible{outline-color:#fabd2f} +a:focus-visible{outline:2px solid #076678;outline-offset:2px;border-radius:2px} +.dark a:focus-visible{outline-color:#83a598} +button:focus-visible,[type="button"]:focus-visible{outline:2px solid #076678;outline-offset:2px;border-radius:4px} +.dark button:focus-visible,.dark [type="button"]:focus-visible{outline-color:#83a598} /* Skip link */ -.skip-link{position:absolute;top:-100%;left:0;z-index:100;background:#b57614;color:#fbf1c7;padding:0.5rem 1rem;font-weight:600;text-decoration:none} +.skip-link{position:absolute;top:-100%;left:0;z-index:100;background:#076678;color:#fbf1c7;padding:0.5rem 1rem;font-weight:600;text-decoration:none} .skip-link:focus{top:0;outline:none} /* Selection colors — Gruvbox orange highlight */ diff --git a/css/tailwind.css b/css/tailwind.css index 20854b0..b7d81f8 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -735,7 +735,7 @@ /* Pagefind UI theme overrides — outside @layer for higher specificity over Pagefind's :root defaults */ #search .pagefind-ui { --pagefind-ui-scale: 1; - --pagefind-ui-primary: #b57614; + --pagefind-ui-primary: #076678; --pagefind-ui-text: #282828; --pagefind-ui-background: #fffef5; --pagefind-ui-border: #d5c4a1; @@ -747,7 +747,7 @@ } .dark #search .pagefind-ui { - --pagefind-ui-primary: #fabd2f; + --pagefind-ui-primary: #83a598; --pagefind-ui-text: #fbf1c7; --pagefind-ui-background: #1d2021; --pagefind-ui-border: #504945; @@ -769,14 +769,14 @@ } #search .pagefind-ui__search-input:focus { - outline: 2px solid #b57614; + outline: 2px solid #076678; outline-offset: 2px; - border-color: #b57614; + border-color: #076678; } .dark #search .pagefind-ui__search-input:focus { - outline-color: #fabd2f; - border-color: #fabd2f; + outline-color: #83a598; + border-color: #83a598; } /* Search clear button */ @@ -800,7 +800,7 @@ /* Result links */ #search .pagefind-ui__result-link { - color: #b57614; + color: #076678; } #search .pagefind-ui__result-link:hover { @@ -808,7 +808,7 @@ } .dark #search .pagefind-ui__result-link { - color: #fabd2f; + color: #83a598; } /* Result excerpts */ @@ -832,7 +832,7 @@ .dark #search .pagefind-ui__result-excerpt mark, .dark #search mark { background-color: #504945; - color: #fabd2f; + color: #83a598; } /* Message (result count) */ @@ -846,7 +846,7 @@ /* "Load more" button */ #search .pagefind-ui__button { - color: #b57614; + color: #076678; background-color: #fffef5; border-color: #d5c4a1; cursor: pointer; @@ -854,18 +854,18 @@ #search .pagefind-ui__button:hover { background-color: #f2e5bc; - border-color: #b57614; + border-color: #076678; } .dark #search .pagefind-ui__button { - color: #fabd2f; + color: #83a598; background-color: #1d2021; border-color: #504945; } .dark #search .pagefind-ui__button:hover { background-color: #282828; - border-color: #fabd2f; + border-color: #83a598; } /* Filter panel labels */ diff --git a/tailwind.config.js b/tailwind.config.js index 9a0b34b..415295c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -30,19 +30,19 @@ export default { 900: "#282828", 950: "#1d2021", }, - // Gruvbox yellow — links, interactive, CTAs, focus rings + // Gruvbox blue — links, interactive, CTAs, focus rings accent: { - 50: "#fdf8e1", - 100: "#faefc0", - 200: "#f5db7a", - 300: "#efc843", - 400: "#d79921", - 500: "#b57614", - 600: "#926208", - 700: "#7a5207", - 800: "#634306", - 900: "#4d3505", - 950: "#3a2804", + 50: "#e8f4f6", + 100: "#c8dfe4", + 200: "#97c5cf", + 300: "#6aabb9", + 400: "#458588", + 500: "#076678", + 600: "#065a6b", + 700: "#054d5c", + 800: "#04404d", + 900: "#03333e", + 950: "#022730", }, }, fontFamily: { @@ -78,6 +78,8 @@ export default { typography: (theme) => ({ DEFAULT: { css: { + "--tw-prose-body": "#b57614", + "--tw-prose-headings": "#3c3836", "--tw-prose-links": theme("colors.accent.500"), maxWidth: "none", }, @@ -90,6 +92,8 @@ export default { }, invert: { css: { + "--tw-prose-body": "#ebdbb2", + "--tw-prose-headings": "#fbf1c7", "--tw-prose-links": theme("colors.accent.400"), }, },