diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx index 25e5521..a67a406 100644 --- a/app/blog/[slug]/page.tsx +++ b/app/blog/[slug]/page.tsx @@ -43,7 +43,7 @@ export default async function BlogPost({ params }: { params: Promise<{ slug: str
← Back to Blog diff --git a/app/contact/page.tsx b/app/contact/page.tsx index c65d9ee..5e41c6c 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -47,7 +47,7 @@ export default function Contact() {
- +

Email

diff --git a/app/globals.css b/app/globals.css index caf3778..11e61fc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -13,6 +13,25 @@ --accent-hover: #0d5a88; /* Darker blue for hover */ --accent-orange: #fc7d0b; /* Bright Orange */ --accent-orange-hover: #c85200; /* Dark Orange/Brown for hover */ + /* Text/icon color to use ON TOP OF an --accent or --accent-orange + background. --accent is dark enough here for white to read clearly; + dark and Xanga themes use a lighter --accent, so they need dark text + instead (see overrides below). --accent-orange is bright in every + theme, so dark text is always the right call for it. */ + --on-accent: #ffffff; + --on-accent-orange: #1a1a1a; + /* Fixed (non-theme-dependent) blue used for the small number of buttons + that are deliberately "the blue button" as opposed to "the theme's + highlight color" (e.g. distinguishing two CTAs from each other on the + same page). Unlike --accent, this never changes with the theme - + Xanga's --accent is bright orange, so reusing --accent here would make + a "blue" button render orange and become indistinguishable from an + orange one. Deliberately not overridden in the dark/Xanga blocks below + so every theme gets the same value. Dark enough that white text always + has sufficient contrast on it. */ + --accent-blue: #1170aa; + --accent-blue-hover: #0d5a88; + --on-accent-blue: #ffffff; --border: #c8d0d9; /* Very Light Gray from palette */ --link: #1170aa; /* Dark Blue for links */ --link-hover: #fc7d0b; /* Bright Orange for link hover */ @@ -35,6 +54,10 @@ --accent-hover: #1170aa; /* Dark Blue */ --accent-orange: #fc7d0b; /* Bright Orange */ --accent-orange-hover: #ffbc79; /* Light Peach for hover */ + /* --accent is a light medium-blue here, so white text on it fails + contrast - use dark text instead. */ + --on-accent: #0b1220; + --on-accent-orange: #1a1a1a; --border: #57606c; /* Dark Gray from palette */ --link: #5fa2ce; /* Medium Blue for links */ --link-hover: #fc7d0b; /* Bright Orange for link hover */ @@ -59,6 +82,10 @@ --accent-light: #ffbc79; /* Tableau Light Peach */ --accent-navy: #1170aa; /* Tableau Dark Blue */ --accent-navy-light: #5fa2ce; /* Tableau Medium Blue */ + /* --accent is bright orange here (same as --accent-orange), so it + needs dark text too. */ + --on-accent: #0a0a0a; + --on-accent-orange: #1a1a1a; --border: #fc7d0b; /* Tableau Bright Orange */ --border-navy: #1170aa; /* Tableau Dark Blue */ --link: #5fa2ce; /* Tableau Medium Blue */ @@ -162,9 +189,13 @@ html[data-theme="xanga"] body .xanga-shell button:hover { border-color: var(--accent-navy) !important; } -/* Keep modern header stable: only restyle these inside Xanga shell */ -html[data-theme="xanga"] body .xanga-shell .bg-bg-secondary, -html[data-theme="xanga"] body .xanga-shell [class*="bg-bg-secondary"] { +/* Keep modern header stable: only restyle these inside Xanga shell. + Excludes elements that switch their own background to --accent(-orange) + on hover/focus (e.g. the Share button, "Back to Blog" link) - otherwise + this pins their resting background !important, and hover:bg-accent can + never actually take effect. */ +html[data-theme="xanga"] body .xanga-shell .bg-bg-secondary:not([class*="hover:bg-accent"]), +html[data-theme="xanga"] body .xanga-shell [class*="bg-bg-secondary"]:not([class*="hover:bg-accent"]) { background-color: var(--bg-secondary) !important; } @@ -232,6 +263,42 @@ html[data-theme="xanga"] body header nav a:focus-visible * { color: var(--accent-orange) !important; } +/* Any link with its own bg-accent background (active mobile-nav items, the + 404 page's "Go Home" button, etc.) needs matching --on-accent text - the + blanket link-color override above (and, in Xanga, --accent being the same + bright orange as --accent-orange) would otherwise put low-contrast text + on top of that background. This is deliberately not scoped to "header" + only: the mobile nav menu is a sibling of