merge: merge PR #2 from keritial

Author: LingLambda

src/components/FriendCard.astro

@@ -7,12 +7,7 @@ const { name, url, description, icon } = Astro.props;
 
 <a class="main" href={url}>
   <div class="left">
-    <Image
-      src={icon}
-      alt="descriptive text"
-      width="128"
-      height="128"
-    />
+    <Image src={icon} alt="descriptive text" width="96" height="96" />
   </div>
   <div class="right">
     <p class="name">{name}</p>
@@ -28,29 +23,35 @@ const { name, url, description, icon } = Astro.props;
     display: flex;
     align-items: center;
     justify-content: space-around;
-    width: 23rem;
-    height: 10rem;
-
+    height: 8rem;
+    width: auto;
     background-color: white;
     border: 1px solid black; /* 添加黑色的边框，宽度为 2px */
-    border-radius: 2.9rem;
+    border-radius: 1rem;
+    padding: 6%;
+  }
+
+  @media (max-width: 320px) {
+    .left{
+      display: none;
+    }
   }
-  .main:hover{
+  .main:hover {
     background-color: #f4f3f6;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
 
-  .name{
-    font-size: 1.5rem;
+  .name {
+    font-size: 1.2rem;
     white-space: nowrap;
     overflow: hidden; /* 超出隐藏 */
     text-overflow: ellipsis; /* 超出显示省略号 */
     width: 100%; /* 超出显示省略必须有明确的宽度 */
   }
-  
-  .description{
+
+  .description {
     font-weight: lighter;
-    font-size: 1.2rem;
+    font-size: 1rem;
     color: #808080;
     white-space: nowrap;
     overflow: hidden; /* 超出隐藏 */

src/components/HeadMenu.astro

@@ -26,18 +26,15 @@
 </script>
 
 <style>
-  @media (max-width: 50rem) {
-  }
-
   .menu {
     display: flex;
     align-items: center;
     justify-content: space-around;
     height: 3.5rem;
     width: 38rem;
-    max-width: 100dvw;
+    /* max-width: 100dvw;
     overflow-x: auto;
-    overflow-y: hidden;
+    overflow-y: hidden; */
     background-color: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(4px);
     border: 1px solid rgba(0, 0, 0, 0.2); /* 添加黑色的边框，宽度为 2px */
@@ -54,7 +51,7 @@
     transition:
       background-color 0.2s ease-in-out,
       color 0.2s ease-in-out;
-    flex-shrink: 0;
+    /* flex-shrink: 0; */
   }
 
   .menu > a:hover {

src/components/TitileCard.astro

@@ -33,7 +33,6 @@ const { title, date, wordNum } = Astro.props;
     gap: 0.7rem; /* 行间距 */
     align-items: center;
     max-width: 90vw;
-    min-width: 32vw;
     height: 8rem;
     margin: 20px 20px 10px 20px;
     border: 1px solid rgba(0, 0, 0, 0.2); /* 添加黑色的边框，宽度为 2px */

src/layouts/BaseLayout.astro

@@ -16,6 +16,7 @@ const { description, keywords ,selected} = Astro.props;
     <meta name="description" content={description} />
     <meta name="keywords" content={keywords} />
     <meta name="author" content="LingLambda" />
+    <!-- 统一不同浏览器的默认样式 -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <title>Ling的小窝</title>
   </head>
@@ -25,9 +26,7 @@ const { description, keywords ,selected} = Astro.props;
         <HeadMenu/>
       </header>
       <main>
-        <section>
-          <slot />
-        </section>
+        <slot />
       </main>
       <!-- <hr style="width:600px;color:#808080; margin-top: 1rem;" /> -->
       <footer>
@@ -84,7 +83,7 @@ const { description, keywords ,selected} = Astro.props;
   }
 
   #container {
-    height: fit-content;
+    height: fit-content; /*限制最大高度不超过父容器*/
     min-height: 100%;
     display: flex;
     flex-direction: column;
@@ -117,7 +116,7 @@ const { description, keywords ,selected} = Astro.props;
     flex-direction: row;
     justify-content: center;
     padding: 1rem;
-    flex-wrap: wrap;
+    flex-wrap: wrap; /*允许换行*/
   }
 
   footer > * {
@@ -132,7 +131,4 @@ const { description, keywords ,selected} = Astro.props;
     max-width: 36rem;
   }
 
-  section {
-    padding: 8%;
-  }
 </style>

src/layouts/BlogLayout.astro

@@ -0,0 +1,18 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+
+
+---
+<BaseLayout>
+  <section>
+    <slot />
+  </section>
+</BaseLayout>
+
+<style>
+
+section {
+    padding: 0 8%  0 8%;
+    /* padding:8% */
+  }
+</style>

src/layouts/FriendsLayout.astro

@@ -10,9 +10,15 @@ import BaseLayout from "./BaseLayout.astro";
 
 <style>
   #cards {
-    /* display: grid;
-    grid: auto-flow auto / repeat(2, auto); */
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(2, 300px); /* 每张卡片固定宽度 */
+    justify-content: center; /* 整体网格居中 */
+    gap: 20px;
+  }
+  @media (max-width: 600px) {
+    #cards {
+      grid-template-columns: 1fr; /* 在小屏幕上改为单列 */
+      width: 90vw;
+    }
   }
 </style>

src/layouts/MainLayout.astro

@@ -0,0 +1,11 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+
+
+---
+<BaseLayout>
+    <slot />
+</BaseLayout>
+
+<style>
+</style>

src/pages/about.astro

@@ -1,11 +1,11 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
+import MainLayout from "../layouts/MainLayout.astro";
 import Prose from "../components/Prose.astro";
 import { Content } from "../posts/about.md";
 ---
 
-<BaseLayout description='本页面记录了关于我的信息' keywords="关于,Ling,LingLambda">
+<MainLayout description='本页面记录了关于我的信息' keywords="关于,Ling,LingLambda">
   <Prose>
     <Content />
   </Prose>
-</BaseLayout>
+</MainLayout>

src/pages/blog.astro

@@ -1,13 +1,13 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
 import TitleCard from "../components/TitileCard.astro";
 import { getCollectionOrderByDate, getWordCount } from "../utils/utils.ts";
+import MainLayout from "../layouts/MainLayout.astro";
 const blogs = await getCollectionOrderByDate("blog", ({ data }) => {
   return data.published === true;
 });
 ---
 
-<BaseLayout description='本页面列出了所有blog页面' keywords="blog">
+<MainLayout description='本页面列出了所有blog页面' keywords="blog">
   {
     blogs.map(async (blog) => {
       const { title, date, description } = blog.data;
@@ -19,7 +19,7 @@ const blogs = await getCollectionOrderByDate("blog", ({ data }) => {
       );
     })
   }
-</BaseLayout>
+</MainLayout>
 
 <style>
 </style>

src/pages/blog/[page].astro

@@ -1,12 +1,12 @@
 ---
 import { render } from "astro:content";
-import BaseLayout from "../../layouts/BaseLayout.astro";
 import Prose from "../../components/Prose.astro";
 import {
   getCollectionOrderByDate,
   getWordCount,
   titleToPinyin,
 } from "../../utils/utils";
+import BlogLayout from "../../layouts/BlogLayout.astro";
 
 export const getStaticPaths = async () => {
   const blogs = await getCollectionOrderByDate("blog", ({ data }) => {
@@ -40,7 +40,7 @@ const MIN_READ_COUNT = 350;
 const readTimeMin = Math.ceil(fontNum / MIN_READ_COUNT);
 ---
 
-<BaseLayout description={description} keywords={tags}>
+<BlogLayout description={description} keywords={tags}>
   <div class="blog-head">
     <h1 class="title">{title}</h1>
     <p class="description">{description}</p>
@@ -69,7 +69,7 @@ const readTimeMin = Math.ceil(fontNum / MIN_READ_COUNT);
       data-lang="zh-CN"
       crossorigin="anonymous"
       async></script>
-</BaseLayout>
+</BlogLayout>
 
 <style>
   em {