From 1804138124eba95ebfb3beeb6e00114bdf48962b Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Mon, 17 Nov 2025 23:21:29 +0800
Subject: [PATCH] Add hover/focus accent styles to navbar links

---
 components/site-header.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/site-header.tsx b/components/site-header.tsx
index 3bd0a5b..24dfb77 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -11,13 +11,25 @@ export function SiteHeader() {
   return (
     <header className="bg-white/80 backdrop-blur dark:bg-gray-950/80">
       <div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100">
-        <Link href="/" className="font-semibold">
+        <Link
+          href="/"
+          className="font-semibold transition hover:text-accent focus-visible:outline-none focus-visible:text-accent"
+        >
           {siteConfig.title}
         </Link>
         <nav className="flex items-center gap-4 text-sm">
-          <Link href="/blog">Blog</Link>
+          <Link
+            href="/blog"
+            className="transition hover:text-accent focus-visible:outline-none focus-visible:text-accent"
+          >
+            Blog
+          </Link>
           {pages.map((page) => (
-            <Link key={page._id} href={page.url}>
+            <Link
+              key={page._id}
+              href={page.url}
+              className="transition hover:text-accent focus-visible:outline-none focus-visible:text-accent"
+            >
               {page.title}
             </Link>
           ))}