友链收集 适量的移动端适配

Author: LingLambda

src/layouts/BlogLayout.astro

@@ -13,5 +13,6 @@ import BaseLayout from "./BaseLayout.astro";
     max-width: 65ch;
     padding: 0;
     /* padding:8% */
+    width: 85%
   }
 </style>

src/layouts/FriendsLayout.astro

@@ -1,15 +1,33 @@
 ---
-import BaseLayout from "./BaseLayout.astro";
 import MainLayout from "./MainLayout.astro";
 ---
 
 <MainLayout>
   <div id="cards">
     <slot>暂时还没有内容哦</slot>
   </div>
+  
+  <div id="info">
+    <p>前辈！和我交换友链吧！</p>
+    <p>
+      提供你的 <strong>名字</strong>、<strong>描述</strong>、<strong
+        >头像</strong
+      >、<strong>地址</strong>， 或者按照如下格式发送到
+      <a href="mailto:[email protected]" target="_blank">这里！</a>
+    </p>
+    <pre><code>
+  "name": "田所浩二",
+  "des": "逸一时误一世。",
+  "icon": "https://icon.shimo/114514",
+  "url": "https://tadokorokouji.homo"
+</code></pre>
+  </div>
 </MainLayout>
 
 <style>
+  #info{
+    padding: 20px 50px;
+  }
   #cards {
     display: grid;
     grid-template-columns: repeat(2, 300px); /* 每张卡片固定宽度 */

src/layouts/MainLayout.astro

@@ -14,5 +14,6 @@ import BaseLayout from "./BaseLayout.astro";
     flex-grow: 1; /* 使 main 占据剩余空间 */
     font-size: 1rem;
     line-height: 1.75;
+    width: 85%
   }
 </style>

src/styles/global.css

@@ -51,4 +51,9 @@ a {
   font-weight: normal;
   font-style: normal;
   font-display: swap;
-}
+}
+
+code {
+  font-family: "Maple Mono", sans-serif;
+  font-size: 0.9rem;
+}

src/styles/markdown.css

@@ -36,5 +36,9 @@
     font-size: 0.9rem;
   }
 
-
+  @media (max-width: 768px) {
+    code {
+      font-size: 0.7rem;
+    }
+  }
 }