From d8b4779dcfc47ef8a61dcbe6128538a8c5968698 Mon Sep 17 00:00:00 2001 From: Julien Danjou Date: Wed, 29 Apr 2026 16:07:58 +0200 Subject: [PATCH] fix(header): solid distinct navbar surface for light-mode readability MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous navbar styling — body-bg-tinted color-mix at 95% opacity plus a backdrop blur — collapsed against the cleaner light gray introduced by the design-system token migration: links became hard to read because the navbar visually merged into the body bg. - Map --theme-navbar-bg to --theme-bg-content (white in light mode). Dark mode is unaffected because --theme-bg-content aliases --theme-bg there. - Drop the color-mix transparency and the backdrop-filter blur. The navbar is now a solid surface; the modern feel comes from the surface contrast plus the divider, not from glassmorphism. - Add a 1px bottom border using --theme-divider for clear separation. Change-Id: I2acd91b68a453f89a2ecdcc92324c976d6857315 --- src/components/Header/Header.astro | 4 ++-- src/styles/theme.css | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index 8c206f9078..f6f086196f 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -124,8 +124,8 @@ const primaryLink = isEnterpriseSection height: var(--theme-navbar-height); z-index: 11; padding: 0.75rem 0; - background-color: color-mix(in srgb, var(--theme-navbar-bg) 95%, transparent); - backdrop-filter: blur(5px); + background-color: var(--theme-navbar-bg); + border-bottom: 1px solid var(--theme-divider); display: flex; align-items: center; justify-content: left; diff --git a/src/styles/theme.css b/src/styles/theme.css index 9c1c497df8..9ab9680e86 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -186,8 +186,10 @@ --theme-code-del-border: hsl(338, 46%, 53%); --theme-code-del-text: hsl(338, 36%, 70%); - /* Navbar */ - --theme-navbar-bg: var(--theme-bg); + /* Navbar — content surface (white in light) so it reads as a distinct + elevated zone over the body bg. Dark mode aliases --theme-bg-content + to --theme-bg, so this is unchanged from the previous behaviour there. */ + --theme-navbar-bg: var(--theme-bg-content); /* Glow */ --theme-glow-highlight: transparent;