feat: layout

src/components/BaseFooter.astro

@@ -0,0 +1,27 @@
+<style>
+  footer {
+    background-color: #1a1a1a;
+    height: 70px;
+    overflow: hidden;
+  }
+
+  .content {
+    color: aliceblue;
+    width: var(--layout-width);
+    margin: 0 auto;
+    color: #f9f8f6;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    font-size: 14px;
+    justify-content: center;
+  }
+</style>
+
+<footer>
+  <div class="content">
+    <a href="https://beian.miit.gov.cn/#/Integrated/index">
+      备案号：鄂ICP备2023000060号-2
+    </a>
+  </div>
+</footer>

src/components/BaseHeader.astro

@@ -0,0 +1,41 @@
+<style>
+  header {
+    height: 60px;
+    position: sticky;
+    top: 0;
+    z-index: 99999;
+    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
+  }
+
+  .main-nav {
+    width: var(--layout-width);
+    margin: 0 auto;
+    height: 100%;
+    padding: 0 16px;
+  }
+
+  .main-nav .menu {
+    list-style: none;
+    display: flex;
+    gap: 20px;
+    height: 100%;
+    align-items: center;
+  }
+
+  /* element: menu-item */
+  .main-nav .menu-item a {
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  .main-nav .menu-item a:hover {
+  }
+</style>
+
+<header>
+  <nav class="main-nav">
+    <ul class="menu">
+      <li class="menu-item"><a href="/">首页</a></li>
+    </ul>
+  </nav>
+</header>

src/components/Demo.tsx

@@ -0,0 +1,4 @@
+
+export default function HelloWorld() {
+  return <div>Hello World!</div>;
+}