style: 优化移动端ui

src/components/IndexPage.astro

@@ -3,6 +3,7 @@ import {siteConfig} from "@/consts.ts";
 import PostList from "@/components/Post/List.astro";
 import Pagination from "@/components/Post/Pagination.astro";
 import type {Post} from "@/types";
+import PageHeader from "@/components/PageHeader.astro";
 
 const {siteTitle} = siteConfig;
 
@@ -16,22 +17,12 @@ const {posts, page, totalPage} = Astro.props
 ---
 
 <div class="page-content">
-  <header>
-    <div class="top">
-      <h1>{siteTitle}</h1>
-      <!--<nav>-->
-      <!--  <span>归档</span>-->
-      <!--  <span>/</span>-->
-      <!--  <span>标签</span>-->
-      <!--  <span>/</span>-->
-      <!--  <span>关于</span>-->
-      <!--</nav>-->
-    </div>
+  <PageHeader/>
+
   <div class="intro">
     <p>did you stand too close to the fire?<br>
       like a liar looking for forgiveness from a stone.</p>
   </div>
-  </header>
 
   <main>
     <PostList posts={posts}/>
@@ -53,24 +44,6 @@ const {posts, page, totalPage} = Astro.props
     gap: 24px;
   }
 
-  header {
-    margin-bottom: 24px;
-    margin-top: 48px;
-  }
-
-  .top {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: var(--border-primary);
-    padding-bottom: 16px;
-  }
-
-  h1 {
-    font-size: 24px;
-    font-weight: 600;
-  }
-
   nav {
     display: flex;
     gap: 12px;
@@ -79,11 +52,12 @@ const {posts, page, totalPage} = Astro.props
   }
 
   .intro {
-    padding: 28px 0;
     border-bottom: var(--border-secondary);
     line-height: 2;
     font-size: 15px;
     color: var(--text-secondary);
+    padding-bottom: 32px;
+    margin-bottom: 12px;
   }
 
   main {
@@ -104,4 +78,15 @@ const {posts, page, totalPage} = Astro.props
     gap: 12px;
     color: var(--text-tertiary);
   }
+
+  @media (max-width: 640px) {
+    .page-content {
+      gap: 24px;
+    }
+
+    footer {
+      height: 64px;
+      padding-bottom: 0;
+    }
+  }
 </style>

src/components/PageHeader.astro

@@ -0,0 +1,38 @@
+---
+import {siteConfig} from "@/consts.ts";
+const {siteTitle} = siteConfig;
+---
+
+<header>
+  <a href="/"><h1>{siteTitle}</h1></a>
+  <!--<nav>-->
+  <!--  <span>归档</span>-->
+  <!--  <span>/</span>-->
+  <!--  <span>标签</span>-->
+  <!--  <span>/</span>-->
+  <!--  <span>关于</span>-->
+  <!--</nav>-->
+</header>
+
+<style>
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: var(--border-primary);
+    margin-top: 32px;
+    padding-bottom: 24px;
+  }
+
+  h1 {
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  @media (max-width: 640px) {
+    header {
+      margin-top: 24px;
+      margin-bottom: 0;
+    }
+  }
+</style>

src/components/Post/List.astro

@@ -39,7 +39,7 @@ const {posts} = Astro.props
   }
 
   .post h2 {
-    font-size: 17px;
+    font-size: 16px;
     font-weight: 500;
     flex: 1;
     white-space: nowrap;

src/pages/post/[...slug].astro

@@ -4,6 +4,7 @@ import "@/styles/github-markdown-reset.css";
 import "photoswipe/dist/photoswipe.css";
 
 import Layout from '@/layouts/Layout.astro';
+import PageHeader from '@/components/PageHeader.astro';
 import {createHttp} from "@/lib/request.ts";
 import type {Post} from "@/types";
 import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
@@ -31,10 +32,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
 
 <Layout title={data.title} description="">
   <div class="page-container">
-    <nav class="nav">
-      <a class="nav-title" href="/">{siteTitle}</a>
-      <a href="/">← 返回首页</a>
-    </nav>
+    <PageHeader />
 
     <article>
       <div class="meta">
@@ -69,39 +67,18 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
 
 <style>
   .page-container {
+    width: 100%;
     height: 100%;
     min-height: 100%;
     display: flex;
     flex-direction: column;
   }
 
-  .nav {
-    flex-shrink: 0;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 13px;
-    width: 100%;
-  }
-
-  .nav a {
-    color: #999;
-    text-decoration: none;
-  }
-
-  .nav-title {
-    font-size: 16px;
-  }
-
-  .nav a:hover {
-    color: #24292e;
-  }
 
   article {
     width: 100%;
     margin: 0 auto;
-    padding: 48px 0 0;
+    padding: 24px 0 24px 0;
     flex: 1;
     flex-shrink: 0;
   }
@@ -125,7 +102,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
   }
 
   h1 {
-    font-size: 32px;
+    font-size: 28px;
     line-height: 1.4;
     font-weight: 400;
     margin: 20px 0 20px;
@@ -149,7 +126,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
   }
 
   .tags {
-    margin-top: 44px;
+    margin-top: 24px;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
@@ -166,7 +143,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
   footer{
     flex-shrink: 0;
     width: 100%;
-    margin-top: 44px;
+    margin-top: 24px;
     border-top: var(--border-secondary);
     height: 66px;
     display: flex;