添加友链

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>