主页框架

src/layout/FullLayoutV1.astro

@@ -0,0 +1,104 @@
+---
+import BaseLayout from './BaseLayout.astro'
+import { Icon } from 'astro-icon/components'
+
+interface Props {
+  title?: string
+}
+
+const { title = '小帕的小窝' } = Astro.props
+---
+
+<BaseLayout title={title}>
+  <div class="nav-container">
+    <nav>
+      <ul class="left">
+        <li class="website-logo">
+          <a href="/">小帕的小窝</a>
+        </li>
+        <li>
+          <a href="https://legacy.passthem.top"
+            ><Icon name="mdi:history" /> 旧博客系统*</a
+          >
+        </li>
+        <li>
+          <a href="/blogs"><Icon name="mdi:invoice-text-outline" />文章</a>
+        </li>
+        <li>
+          <a href="/about"
+            ><Icon name="mdi:information-slab-circle-outline" />关于</a
+          >
+        </li>
+      </ul>
+      <ul class="right">Hello!</ul>
+    </nav>
+  </div>
+  <main>
+    <slot />
+  </main>
+</BaseLayout>
+
+<style>
+  .nav-container {
+    width: 100dvw;
+    height: 3rem;
+    position: fixed;
+    z-index: 100;
+    backdrop-filter: blur(4px);
+    background-color: rgb(from var(--color-bg-n) r g b / 0.5);
+
+    & > nav {
+      width: 100%;
+      height: 100%;
+      padding-inline: 40px;
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      max-width: 1400px;
+      margin-inline: auto;
+
+      font-weight: 400;
+
+      & > ul {
+        display: flex;
+        flex-direction: row;
+      }
+
+      & li {
+        height: 2rem;
+
+        &:hover {
+          background-color: rgb(from var(--color-fg-0) r g b / 0.1);
+        }
+
+        & > a {
+          padding-inline: 0.75rem;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+
+          & > svg {
+            font-size: 1.5rem;
+          }
+        }
+      }
+
+      & .website-logo > a {
+        gap: 0.5rem;
+        font-weight: 600;
+
+        /* & > .logo { */
+        /*   --size: 2.5rem; */
+        /**/
+        /*   width: var(--size); */
+        /*   height: var(--size); */
+        /*   display: inline-block; */
+        /* } */
+      }
+    }
+  }
+</style>