fix: 移动端适配

Author: Rinai-R

src/components/Navbar.astro

@@ -32,10 +32,12 @@ let links: NavBarLink[] = navBarConfig.links.map(
 <div id="navbar" class="z-50 onload-animation" data-transparent-mode={navbarTransparentMode} data-is-home={isHomePage}>
   <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div>
   <div class:list={[className, "!overflow-visible max-w-[var(--page-width)] h-[4.5rem] mx-auto flex items-center justify-between px-4"]}>
-    <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:filter-vintage-outline" class="text-[1.75rem] mb-1 mr-2" />
-        {siteConfig.title}
+    <a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95 brand-link">
+      <div class="flex flex-row text-[var(--primary)] items-center text-md gap-2">
+        <Icon name="material-symbols:filter-vintage-outline" class="text-[1.75rem]" />
+        <span class="brand-title text-[1.05rem] sm:text-[1.15rem]">
+          {siteConfig.title}
+        </span>
       </div>
     </a>
     <div class="hidden md:flex items-center space-x-2 xl:space-x-1 2xl:space-x-2 navbar-nav-links">
@@ -64,6 +66,29 @@ let links: NavBarLink[] = navBarConfig.links.map(
 <style>
   .navbar-nav-links { min-width: 0; flex-shrink: 1; }
   .navbar-buttons { min-width: 0; flex-shrink: 0; }
+  @media (max-width: 640px) {
+    #navbar > div {
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      border: 1px solid rgb(255 255 255 / 0.35);
+      box-shadow: 0 6px 25px rgb(0 0 0 / 0.15);
+    }
+    #navbar .brand-link {
+      padding-left: 0.35rem;
+      padding-right: 0.35rem;
+    }
+    #navbar .brand-title {
+      font-size: 0.95rem;
+      line-height: 1.15rem;
+    }
+    #navbar .navbar-buttons {
+      gap: 0.35rem;
+    }
+    #navbar .navbar-buttons > button {
+      min-width: 2.8rem;
+      min-height: 2.8rem;
+    }
+  }
 </style>
 
 <script>
@@ -302,4 +327,4 @@ if (document.readyState === 'loading') {
 } else {
   loadPagefind();
 }
-</script>}
+</script>}