feat: 新版ui

src/components/BaseHeader.astro

@@ -8,7 +8,7 @@ import { metadata } from "../consts";
     position: sticky;
     top: 0;
     z-index: 99999;
-    box-shadow: rgba(17, 17, 26, 0.1) 0 1px 0;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
     flex-shrink: 0;
     background: #fff;
   }
@@ -23,6 +23,12 @@ import { metadata } from "../consts";
     justify-content: space-between;
   }
 
+  @media (max-width: 768px) {
+    .main-nav{
+      padding: 16px;
+    }
+  }
+
   .main-nav h1 {
     user-select: none;
     cursor: pointer;
@@ -37,11 +43,16 @@ import { metadata } from "../consts";
     align-items: center;
   }
 
+  .menu-item{
+    text-align: center;
+  }
+
   .main-nav .menu-item a {
     text-decoration: none;
   }
 
   .main-nav .menu-item a:hover {
+    color: #64748b;
   }
 </style>
 
@@ -50,11 +61,11 @@ import { metadata } from "../consts";
     <h1>
       <a href="/">{metadata.siteTitle}</a>
     </h1>
-    <!--<ul class="menu">-->
-    <!--  <li class="menu-item"><a href="/">首页</a></li>-->
-    <!--  <li class="menu-item"><a href="/">文章</a></li>-->
-    <!--  <li class="menu-item"><a href="/">分类</a></li>-->
-    <!--  <li class="menu-item"><a href="/">关于</a></li>-->
-    <!--</ul>-->
+    <ul class="menu">
+      <li class="menu-item"><a href="/">首页</a></li>
+      <!--<li class="menu-item"><a href="/">文章</a></li>-->
+      <li class="menu-item"><a href="/">分类</a></li>
+      <!--<li class="menu-item"><a href="/">关于</a></li>-->
+    </ul>
   </nav>
 </header>