重构 friendlinks 布局

Author: LingLambda

src/layouts/FriendsLayout.astro

@@ -1,27 +1,61 @@
 ---
 import { Image } from "astro:assets";
-import FriendsLayout from "../layouts/FriendsLayout.astro";
 import friends from "../../public/assets/friends.json";
+import MainLayout from "../layouts/MainLayout.astro";
 friends.sort(() => Math.random() - 0.5);
 ---
 
-<FriendsLayout>
-  {
-    friends.map(({ name, des, icon, url }) => (
-      <a class="main" href={url}>
-        <div class="left">
-          <Image src={icon} alt={name + " avatar"} width="96" height="96" />
-        </div>
-        <div class="right">
-          <p class="name">{name}</p>
-          <p class="description">{des}</p>
-        </div>
-      </a>
-    ))
-  }
-</FriendsLayout>
+<MainLayout description="本页面供奉着我的朋友们(不是" keywords="friends,links">
+  <div id="cards">
+    {
+      friends.map(({ name, des, icon, url }) => (
+        <a class="main" href={url}>
+          <div class="left">
+            <Image src={icon} alt={name + " avatar"} width="96" height="96" />
+          </div>
+          <div class="right">
+            <p class="name">{name}</p>
+            <p class="description">{des}</p>
+          </div>
+        </a>
+      ))
+    }
+  </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); /* 每张卡片固定宽度 */
+    justify-content: center; /* 整体网格居中 */
+    gap: 20px;
+  }
+  @media (max-width: 600px) {
+    #cards {
+      grid-template-columns: 1fr; /* 在小屏幕上改为单列 */
+      width: 90vw;
+    }
+  }
+
   .main {
     text-decoration: none; /* 去除下划线 */
     color: inherit; /* 继承父元素的颜色 */