添加友链

2026-04-04 12:40:57 +08:00
parent 12e66a644e
commit e466006f81
4 changed files with 58 additions and 35 deletions
--- a/src/assets/style.css
+++ b/src/assets/style.css
@ -16,6 +16,12 @@
    --color-blue: light-dark(oklch(40% 0.2 270), oklch(80% 0.2 270));
    --color-green: light-dark(oklch(50% 0.1 150), oklch(80% 0.15 150));
    --color-link: var(--color-blue);
+
+    --size-nav: 3rem;
+
+    @media (width < 768px) {
+        --size-nav: 4rem;
+    }
 }

 /* == 页面设置 == */
@ -32,6 +38,8 @@ body {
    color: var(--color-fg-0);

    font-family: var(--font-sans);
+
+    /* writing-mode: vertical-rl; */
 }

 /* == 配置默认字体 == */
--- a/src/layout/FullLayoutV1.astro
+++ b/src/layout/FullLayoutV1.astro
@ -4,9 +4,10 @@ import { Icon } from 'astro-icon/components'

 interface Props {
  title?: string
+  withGap?: boolean
 }

-const { title = '小帕的小窝' } = Astro.props
+const { title = '小帕的小窝', withGap = false } = Astro.props
 ---

 <BaseLayout title={title}>
@ -28,11 +29,6 @@ const { title = '小帕的小窝' } = Astro.props
        <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>
@ -42,7 +38,13 @@ const { title = '小帕的小窝' } = Astro.props
          >
        </li>
      </ul>
-      <ul class="right">Hello!</ul>
+      <ul class="right">
+        <li>
+          <a href="https://legacy.passthem.top"
+            ><Icon name="mdi:history" /> 旧博客系统*</a
+          >
+        </li>
+      </ul>
    </nav>
  </div>
  <div
@ -53,6 +55,7 @@ const { title = '小帕的小窝' } = Astro.props
  >
  </div>
  <main>
+    {withGap && <div aria-hidden="true" class="layout-gap" />}
    <slot />
  </main>
 </BaseLayout>
@ -116,15 +119,15 @@ const { title = '小帕的小窝' } = Astro.props

 <style>
  .nav-container {
-    width: 100dvw;
-    height: 3rem;
+    inline-size: 100dvi;
+    block-size: 3rem;
    position: fixed;
    z-index: 10000;
    backdrop-filter: blur(4px);
    background-color: rgb(from var(--color-bg-n) r g b / 0.5);

-    @media (max-width: 767px) {
-      height: 100dvh;
+    @media (width < 768px) {
+      block-size: 100dvh;
      background-color: #00000033;
      transition:
        background-color ease 0.2s,
@ -132,7 +135,7 @@ const { title = '小帕的小窝' } = Astro.props
    }

    &.nav-container-hidden {
-      @media (max-width: 767px) {
+      @media (width < 768px) {
        backdrop-filter: blur(0px);
        background-color: transparent;
        pointer-events: none;
@ -140,25 +143,25 @@ const { title = '小帕的小窝' } = Astro.props
    }

    & > nav {
-      width: 100%;
-      height: 100%;
+      inline-size: 100%;
+      block-size: 100%;
      padding-inline: 40px;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
-      max-width: 1400px;
+      max-inline-size: 1400px;
      margin-inline: auto;

      font-weight: 400;

-      @media (max-width: 767px) {
+      @media (width < 768px) {
        flex-direction: column;
        padding-block: 5rem;
        padding-inline: 2rem;
        align-items: start;
-        width: 70%;
+        inline-size: 70%;
        background-color: var(--color-bg-n);
        margin-inline-start: 0;
        font-size: larger;
@ -166,8 +169,8 @@ const { title = '小帕的小窝' } = Astro.props
      }

      .nav-container-hidden & {
-        @media (max-width: 767px) {
-          transform: translateX(-80dvw);
+        @media (minline-size < 768px) {
+          transform: translateX(-80dvi);
        }
      }

@ -175,19 +178,19 @@ const { title = '小帕的小窝' } = Astro.props
        display: flex;
        flex-direction: row;

-        @media (max-width: 767px) {
+        @media (width < 768px) {
          flex-direction: column;
          gap: 0.25rem;
-          width: 100%;
+          inline-size: 100%;
        }
      }

      & li {
        height: 2rem;

-        @media (max-width: 767px) {
+        @media (width < 768px) {
          height: 3rem;
-          width: 100%;
+          inline-size: 100%;
        }

        &:hover {
@ -201,8 +204,8 @@ const { title = '小帕的小窝' } = Astro.props

        & > a {
          padding-inline: 0.75rem;
-          width: 100%;
-          height: 100%;
+          inline-size: 100%;
+          block-size: 100%;
          display: flex;
          align-items: center;
          gap: 0.25rem;
@ -229,8 +232,8 @@ const { title = '小帕的小窝' } = Astro.props
  }

  .nav-mobile {
-    width: 100dvw;
-    height: 4rem;
+    inline-size: 100dvw;
+    block-size: 4rem;
    position: fixed;
    z-index: 100;
    backdrop-filter: blur(4px);
@ -244,7 +247,7 @@ const { title = '小帕的小窝' } = Astro.props
    gap: 0.5rem;

    & > button {
-      width: 3rem;
+      inline-size: 3rem;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
@ -267,7 +270,7 @@ const { title = '小帕的小窝' } = Astro.props
      }
    }

-    @media (min-width: 768px) {
+    @media (width >= 768px) {
      display: none;
    }
  }
@ -313,4 +316,8 @@ const { title = '小帕的小窝' } = Astro.props
      background-position: var(--loading-x-size) 0;
    }
  }
+
+  .layout-gap {
+    height: var(--size-nav);
+  }
 </style>
--- a/src/pages/blogs.astro
+++ b/src/pages/blogs.astro
@ -10,11 +10,11 @@ const page = isNaN(_page) ? 1 : Math.max(1, _page)
 const blogs = await listBlogs({ page })
 ---

-<FullLayoutV1>
-  <div class="__dev__caution">
+<FullLayoutV1 withGap>
+  <!-- <div class="__dev__caution">
    <h1>仍在开发中，界面会崩坏</h1>
-  </div>
-  <section>
+  </div> -->
+  <main>
    <ul>
      {
        blogs.map((blog) => (
@ -24,7 +24,7 @@ const blogs = await listBlogs({ page })
        ))
      }
    </ul>
-  </section>
+  </main>
 </FullLayoutV1>

 <style>
@ -39,4 +39,7 @@ const blogs = await listBlogs({ page })
      font-weight: 800;
    }
  }
+
+  main {
+  }
 </style>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -175,6 +175,11 @@ try {
            'https://r1kka.one/',
            "Rikka's Blog",
          ],
+          [
+            'https://shimizukaede.top/vite.svg',
+            'https://shimizukaede.top',
+            'Kaede 的博客',
+          ],
          [
            'https://nonerd.tech/assets/apple-touch-icon.png',
            'https://nonerd.tech/',
@ -189,7 +194,7 @@ try {
            'https://legacy.passthem.top/assets/lfxdxy-BogfTZvz.png',
            'https://qm.qq.com/q/QOpCVZcvyS',
            '六方相的新月 (QQ)'
-          ]
+          ],
        ].map(b => <a href={b[1]} class="friend">
          <div class="avatar">
            <Image src={b[0]} width={60} height={60} alt=`网站「${b[2]}」的图标` />