添加友链

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; */
 }
 
 /* == 配置默认字体 == */

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;
+    inline-size: 100dvi;
-    height: 3rem;
+    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) {
+    @media (width < 768px) {
-      height: 100dvh;
+      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%;
+      inline-size: 100%;
-      height: 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) {
+        @media (minline-size < 768px) {
-          transform: translateX(-80dvw);
+          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%;
+          inline-size: 100%;
-          height: 100%;
+          block-size: 100%;
           display: flex;
           align-items: center;
           gap: 0.25rem;
@@ -229,8 +232,8 @@ const { title = '小帕的小窝' } = Astro.props
   }
 
   .nav-mobile {
-    width: 100dvw;
+    inline-size: 100dvw;
-    height: 4rem;
+    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>

src/pages/blogs.astro

@@ -10,11 +10,11 @@ const page = isNaN(_page) ? 1 : Math.max(1, _page)
 const blogs = await listBlogs({ page })
 ---
 
-<FullLayoutV1>
+<FullLayoutV1 withGap>
-  <div class="__dev__caution">
+  <!-- <div class="__dev__caution">
     <h1>仍在开发中，界面会崩坏</h1>
-  </div>
+  </div> -->
-  <section>
+  <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>

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]}」的图标` />