feat: 调整样式

src/components/BaseFooter.astro

@@ -1,16 +1,16 @@
 <style>
   footer {
-    background-color: #1a1a1a;
+    background-color: #ffffff;
     height: 70px;
     overflow: hidden;
     flex-shrink: 0;
+    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
   }
 
   .content {
-    color: aliceblue;
     max-width: var(--layout-width);
     margin: 0 auto;
-    color: #f9f8f6;
+    color: #1f2937;
     display: flex;
     align-items: center;
     height: 100%;

src/components/BaseHeader.astro

@@ -1,3 +1,7 @@
+---
+import { metadata } from "../consts";
+---
+
 <style>
   header {
     height: 60px;
@@ -13,7 +17,17 @@
     max-width: var(--layout-width);
     margin: 0 auto;
     height: 100%;
-    padding: 0 16px;
+    padding: 0 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .main-nav h1 {
+    user-select: none;
+    font-size: 30px;
+    cursor: pointer;
+    font-size: 24px;
   }
 
   .main-nav .menu {
@@ -27,7 +41,6 @@
   /* element: menu-item */
   .main-nav .menu-item a {
     text-decoration: none;
-    font-weight: bold;
   }
 
   .main-nav .menu-item a:hover {
@@ -36,8 +49,14 @@
 
 <header>
   <nav class="main-nav">
+    <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>
   </nav>
 </header>