From 41d846d9fd8482c247e289f8b7f96b32022adb21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E6=A9=98?= <xiaoju@shazhou.work>
Date: Mon, 6 Apr 2026 08:15:49 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20use=20color-mix=20for=20navbar=20transpa?=
 =?UTF-8?q?rency=20=E2=80=94=20compatible=20with=20Tailwind=203.x?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

小橘 🍊
---
 src/components/Navbar.astro | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 13c0005..2a0fdad 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -21,10 +21,11 @@ let links: NavBarLink[] = navBarConfig.links.map(
 );
 ---
 <div id="navbar" class="z-50 onload-animation">
-    <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)]/70 backdrop-blur-md transition"></div> <!-- used for onload animation -->
+    <div class="absolute h-8 left-0 right-0 -top-8 backdrop-blur-md transition" style="background: color-mix(in srgb, var(--card-bg) 70%, transparent)"></div> <!-- used for onload animation -->
     <div class:list={[
         className,
-        "card-base !overflow-visible max-w-[var(--page-width)] h-[4.5rem] !rounded-t-none mx-auto flex items-center justify-between px-4 !bg-[var(--card-bg)]/70 backdrop-blur-md"]}>
+        "card-base !overflow-visible max-w-[var(--page-width)] h-[4.5rem] !rounded-t-none mx-auto flex items-center justify-between px-4 backdrop-blur-md"]}
+        style="background: color-mix(in srgb, var(--card-bg) 70%, transparent)">
         <a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95">
             <div class="flex flex-row text-[var(--primary)] items-center text-md">
                 <Icon name="material-symbols:home-outline-rounded" class="text-[1.75rem] mb-1 mr-2" />