From 634824ff44132e77f96a655fc6753f3a7d1f0af5 Mon Sep 17 00:00:00 2001
From: xy <10816187@qq.com>
Date: Tue, 21 Jul 2026 18:14:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon/back-top.svg    |   2 +-
 src/components/BackTop.astro    |   6 +-
 src/components/BaseFooter.astro |  11 ++-
 src/components/BaseHeader.astro |   2 +-
 src/components/IndexView.astro  |  11 ++-
 src/components/PostList.astro   |  10 +-
 src/layouts/Layout.astro        |   4 +-
 src/pages/404.astro             |   4 +-
 src/pages/index.astro           |  26 ++++--
 src/pages/page/[...page].astro  |  32 ++++---
 src/pages/post/[...slug].astro  | 157 +++++++++++++++++---------------
 src/styles/global.css           |  29 +++---
 12 files changed, 161 insertions(+), 133 deletions(-)

diff --git a/src/assets/icon/back-top.svg b/src/assets/icon/back-top.svg
index 3905f18..16aa9dd 100644
--- a/src/assets/icon/back-top.svg
+++ b/src/assets/icon/back-top.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784382428422" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5545" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="5546"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="5547"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784628432297" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9153" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="9154"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="9155"></path></svg>
\ No newline at end of file
diff --git a/src/components/BackTop.astro b/src/components/BackTop.astro
index f8a9a53..109a826 100644
--- a/src/components/BackTop.astro
+++ b/src/components/BackTop.astro
@@ -46,12 +46,16 @@ import backTopIcon from "@/assets/icon/back-top.svg?url";
     display: none;
   }
 
-  .back-top :global(img) {
+  .back-top img {
     width: 100%;
     height: 100%;
     display: block;
   }
 
+  :global(.dark) .back-top img {
+    filter: invert(1);
+  }
+
   .back-top:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: 4px;
diff --git a/src/components/BaseFooter.astro b/src/components/BaseFooter.astro
index 46bdaca..6bac2c8 100644
--- a/src/components/BaseFooter.astro
+++ b/src/components/BaseFooter.astro
@@ -1,8 +1,12 @@
 ---
+import { metadata } from "../consts";
+
+const year = new Date().getFullYear();
 ---
 
 <footer>
   <div class="content">
+    <span>© 2026 {metadata.siteTitle}</span>
     <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
       备案号：鄂ICP备2023000060号-2
     </a>
@@ -12,22 +16,23 @@
 
 <style>
   footer {
-    background: #ffffff;
+    background: #22252b;
     height: 70px;
     overflow: hidden;
     flex-shrink: 0;
-    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 2px;
+    box-shadow: var(--shadow);
   }
 
   .content {
     max-width: var(--layout-width);
     margin: 0 auto;
-    color: #1f2937;
+    color: #fff;
     display: flex;
     align-items: center;
     height: 100%;
     font-size: 14px;
     justify-content: center;
+    gap: 12px;
   }
 
   :global(.dark) footer {
diff --git a/src/components/BaseHeader.astro b/src/components/BaseHeader.astro
index aa9e6ac..d94ab06 100644
--- a/src/components/BaseHeader.astro
+++ b/src/components/BaseHeader.astro
@@ -28,7 +28,7 @@ import ThemeIcon from './ThemeIcon.astro'
     position: sticky;
     top: 0;
     z-index: 99999;
-    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+    box-shadow: var(--shadow);
     flex-shrink: 0;
     background: #fff;
   }
diff --git a/src/components/IndexView.astro b/src/components/IndexView.astro
index f155682..3b16bcd 100644
--- a/src/components/IndexView.astro
+++ b/src/components/IndexView.astro
@@ -12,13 +12,14 @@ interface Props {
 
 const {posts, page, totalPage, categories} = Astro.props
 ---
-
-<div class="container">
-  <PostList posts={posts} page={page} totalPage={totalPage}/>
-
-  <IndexSidebar categories={categories}/>
+<div class="page-content">
+  <div class="container">
+    <PostList posts={posts} page={page} totalPage={totalPage}/>
+    <IndexSidebar categories={categories}/>
+  </div>
 </div>
 
+
 <style>
   .container {
     width: 100%;
diff --git a/src/components/PostList.astro b/src/components/PostList.astro
index 76eb39a..f8ab10c 100644
--- a/src/components/PostList.astro
+++ b/src/components/PostList.astro
@@ -94,9 +94,11 @@ posts.map((post) => {
     gap: 22px;
   }
 
-  .post-card:hover {
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-hover);
+  @media (hover: hover) and (pointer: fine) {
+    .post-card:hover {
+      transform: translateY(-3px);
+      box-shadow: var(--shadow-hover);
+    }
   }
 
   .post-cover {
@@ -233,8 +235,6 @@ posts.map((post) => {
       width: 128px;
       height: 88px;
     }
-
-
   }
 
   @media (max-width: 560px) {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 6356798..0af37de 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -13,7 +13,7 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -28,7 +28,7 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
   </head>
   <body>
     <BaseHeader />
-    <main>
+    <main class="main">
       <slot />
     </main>
     <BaseFooter />
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 73653a1..f91ecdd 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -10,7 +10,7 @@ import Layout from "@/layouts/Layout.astro";
 </Layout>
 
 <style>
-  .not-found{
+  .not-found {
     flex: 1;
     width: 100%;
     display: flex;
@@ -20,7 +20,7 @@ import Layout from "@/layouts/Layout.astro";
     gap: 20px;
   }
 
-  .back-home{
+  .back-home {
     background: black;
     color: white;
     padding: 10px 20px;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0c1df84..7ec218a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,23 +1,29 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 import IndexView from "@/components/IndexView.astro";
-import type {Post, CategoriesStats} from "@/types/post";
-import {createHttp} from "@/lib/request";
-import {metadata} from "@/consts.ts";
+import type { Post, CategoriesStats } from "@/types/post";
+import { createHttp } from "@/lib/request";
+import { metadata } from "@/consts.ts";
 
-const http = createHttp(Astro.request.headers)
+const http = createHttp(Astro.request.headers);
 
-const {list, total} = await http.get<ApiPageResponse<Post>>("post", {
+const { list, total } = await http.get<ApiPageResponse<Post>>("post", {
   searchParams: {
     page: 1,
-    page_size: metadata.postPageSize
-  }
+    page_size: metadata.postPageSize,
+  },
 });
-const totalPage = Math.ceil(total / metadata.postPageSize)
+const totalPage = Math.ceil(total / metadata.postPageSize);
 
-const {data: categories} = await http.get<ApiResponse<CategoriesStats[]>>("category/stats");
+const { data: categories } =
+  await http.get<ApiResponse<CategoriesStats[]>>("category/stats");
 ---
 
 <Layout>
-  <IndexView categories={categories} posts={list} page={1} totalPage={totalPage}/>
+  <IndexView
+    categories={categories}
+    posts={list}
+    page={1}
+    totalPage={totalPage}
+  />
 </Layout>
diff --git a/src/pages/page/[...page].astro b/src/pages/page/[...page].astro
index e5cea66..b4cdf86 100644
--- a/src/pages/page/[...page].astro
+++ b/src/pages/page/[...page].astro
@@ -1,34 +1,40 @@
 ---
 import Layout from "@/layouts/Layout.astro";
-import type {CategoriesStats, Post} from "@/types/post";
-import {createHttp} from "@/lib/request";
-import {metadata} from "@/consts.ts";
+import type { CategoriesStats, Post } from "@/types/post";
+import { createHttp } from "@/lib/request";
+import { metadata } from "@/consts.ts";
 import IndexView from "@/components/IndexView.astro";
 
-const {page} = Astro.params
+const { page } = Astro.params;
 
 if (isNaN(Number(page))) {
-  return Astro.redirect('/')
+  return Astro.redirect("/");
 }
 
-const http = createHttp(Astro.request.headers)
+const http = createHttp(Astro.request.headers);
 
-const {list, total} = await http.get<ApiPageResponse<Post>>("post", {
+const { list, total } = await http.get<ApiPageResponse<Post>>("post", {
   searchParams: {
     page,
-    page_size: metadata.postPageSize
-  }
+    page_size: metadata.postPageSize,
+  },
 });
 
-const totalPage = Math.ceil(total / metadata.postPageSize)
+const totalPage = Math.ceil(total / metadata.postPageSize);
 
 if (totalPage < Number(page)) {
-  return Astro.redirect('/404')
+  return Astro.redirect("/404");
 }
 
-const {data: categories} = await http.get<ApiResponse<CategoriesStats[]>>("category/stats");
+const { data: categories } =
+  await http.get<ApiResponse<CategoriesStats[]>>("category/stats");
 ---
 
 <Layout>
-  <IndexView categories={categories} posts={list} page={Number(page)} totalPage={totalPage}/>
+  <IndexView
+    categories={categories}
+    posts={list}
+    page={Number(page)}
+    totalPage={totalPage}
+  />
 </Layout>
diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro
index f0f54fd..674c381 100644
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -1,69 +1,80 @@
 ---
-import "@/styles/github-markdown.css"
-import "@/styles/github-markdown-reset.css"
+import "@/styles/github-markdown.css";
+import "@/styles/github-markdown-reset.css";
 import "photoswipe/dist/photoswipe.css";
 
 import Layout from "@/layouts/Layout.astro";
-import {createHttp} from "@/lib/request.ts";
-import {highlightHtmlWithJsdom} from "@/lib/highlight.js";
-import {formatDatetime} from "@/lib/format.ts";
-import type {Post} from "@/types";
+import { createHttp } from "@/lib/request.ts";
+import { highlightHtmlWithJsdom } from "@/lib/highlight.js";
+import { formatDatetime } from "@/lib/format.ts";
+import type { Post } from "@/types";
 
-const {slug} = Astro.params;
+const { slug } = Astro.params;
 
 let data: Post;
 
-const http = createHttp(Astro.request.headers)
+const http = createHttp(Astro.request.headers);
 
 try {
   const res = await http.get<ApiResponse<Post>>(`post/${slug}`);
-  data = res.data
+  data = res.data;
 } catch (error) {
-  return Astro.redirect("/404")
+  return Astro.redirect("/404");
 }
-const content = await highlightHtmlWithJsdom(data.content)
-const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
+const content = await highlightHtmlWithJsdom(data.content);
+const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
 ---
 
 <Layout title={data.title} description={data.summary}>
-  <div class="post">
-    <h1 class="post-title">{data.title}</h1>
+  <div class="page-content">
+    <div class="post">
+      <h1 class="post-title">{data.title}</h1>
 
-    <div class="post-meta">
-      <div class="published-at">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-             class="lucide lucide-calendar-days-icon lucide-calendar-days">
-          <path d="M8 2v4"/>
-          <path d="M16 2v4"/>
-          <rect width="18" height="18" x="3" y="4" rx="2"/>
-          <path d="M3 10h18"/>
-          <path d="M8 14h.01"/>
-          <path d="M12 14h.01"/>
-          <path d="M16 14h.01"/>
-          <path d="M8 18h.01"/>
-          <path d="M12 18h.01"/>
-          <path d="M16 18h.01"/>
-        </svg>
-        {published_at}
+      <div class="post-meta">
+        <div class="published-at">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-calendar-days-icon lucide-calendar-days"
+          >
+            <path d="M8 2v4"></path>
+            <path d="M16 2v4"></path>
+            <rect width="18" height="18" x="3" y="4" rx="2"></rect>
+            <path d="M3 10h18"></path>
+            <path d="M8 14h.01"></path>
+            <path d="M12 14h.01"></path>
+            <path d="M16 14h.01"></path>
+            <path d="M8 18h.01"></path>
+            <path d="M12 18h.01"></path>
+            <path d="M16 18h.01"></path>
+          </svg>
+          {published_at}
+        </div>
+
+        <div class="post-view">
+          <svg
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="5122"
+          >
+            <path
+              d="M509.618 415.795c-42.695 0-77.253 38.372-77.253 85.738 0 47.352 34.558 86.22 77.253 86.22 42.667 0 76.716-38.867 76.716-86.22 0-47.352-34.049-85.738-76.716-85.738z m1.9-177.9c-211.548 0-383.265 159.859-383.265 274.587 0 114.727 171.717 273.624 383.266 273.624 212.484 0 384.227-162.522 384.227-273.624 0-111.088-171.743-274.587-384.227-274.587z m-1.446 452.006c-89.7 0-162.134-81.71-162.134-181.903 0-101.157 72.435-182.397 162.134-182.397 90.183 0 163.1 81.241 163.1 182.397 0 100.206-72.917 181.903-163.1 181.903z"
+              p-id="5123"></path>
+          </svg>
+          {data.view}
+        </div>
       </div>
 
-      <div class="post-view">
-        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-             p-id="5122">
-          <path
-            d="M509.618 415.795c-42.695 0-77.253 38.372-77.253 85.738 0 47.352 34.558 86.22 77.253 86.22 42.667 0 76.716-38.867 76.716-86.22 0-47.352-34.049-85.738-76.716-85.738z m1.9-177.9c-211.548 0-383.265 159.859-383.265 274.587 0 114.727 171.717 273.624 383.266 273.624 212.484 0 384.227-162.522 384.227-273.624 0-111.088-171.743-274.587-384.227-274.587z m-1.446 452.006c-89.7 0-162.134-81.71-162.134-181.903 0-101.157 72.435-182.397 162.134-182.397 90.183 0 163.1 81.241 163.1 182.397 0 100.206-72.917 181.903-163.1 181.903z"
-            p-id="5123"></path>
-        </svg>
-        {data.view}
-      </div>
+      <div class="markdown-body" data-color-mode="dark" set:html={content} />
     </div>
-
-    <div
-      class="markdown-body"
-      data-color-mode="dark"
-      set:html={content}
-    ></div>
   </div>
 </Layout>
 
@@ -73,8 +84,7 @@ const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
     border-radius: 12px;
     overflow: auto;
     padding: 24px;
-    box-shadow: rgba(149, 157, 165, 0.2) 0 2px 14px -4px;
-    border: 1px solid #e7e8ec;
+    box-shadow: var(--shadow);
   }
 
   .post-title {
@@ -140,43 +150,44 @@ const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
   }
 </style>
 
-
 <script>
-  import PhotoSwipeLightbox from "photoswipe/lightbox"
+  import PhotoSwipeLightbox from "photoswipe/lightbox";
 
   const init = async () => {
-    const post = document.querySelector('.post')!
-    const images = Array.from(post.querySelectorAll('img'))
+    const post = document.querySelector(".post")!;
+    const images = Array.from(post.querySelectorAll("img"));
 
     const waitImageLoaded = (img: HTMLImageElement) => {
       if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
-        return Promise.resolve()
+        return Promise.resolve();
       }
 
       return new Promise<void>((resolve) => {
-        img.addEventListener("load", () => resolve(), {once: true})
-        img.addEventListener("error", () => resolve(), {once: true})
-      })
-    }
+        img.addEventListener("load", () => resolve(), { once: true });
+        img.addEventListener("error", () => resolve(), { once: true });
+      });
+    };
 
     await Promise.all(
       images.map(async (img) => {
-        if (img.closest("a")) return
+        if (img.closest("a")) return;
 
-        await waitImageLoaded(img)
+        await waitImageLoaded(img);
 
-        const link = document.createElement("a")
+        const link = document.createElement("a");
 
-        link.href = img.currentSrc || img.src
-        link.target = "_blank"
-        link.rel = "noreferrer"
-        link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200)
-        link.dataset.pswpHeight = String(img.naturalHeight || img.height || 800)
+        link.href = img.currentSrc || img.src;
+        link.target = "_blank";
+        link.rel = "noreferrer";
+        link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200);
+        link.dataset.pswpHeight = String(
+          img.naturalHeight || img.height || 800,
+        );
 
-        img.parentNode?.insertBefore(link, img)
-        link.appendChild(img)
-      })
-    )
+        img.parentNode?.insertBefore(link, img);
+        link.appendChild(img);
+      }),
+    );
 
     const lightbox = new PhotoSwipeLightbox({
       gallery: ".post",
@@ -192,10 +203,10 @@ const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
       bgOpacity: 0.5,
       tapAction: "close",
       bgClickAction: "close",
-    })
+    });
 
-    lightbox.init()
-  }
+    lightbox.init();
+  };
 
-  init()
+  init();
 </script>
diff --git a/src/styles/global.css b/src/styles/global.css
index bb77ff8..511b6bc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -7,7 +7,7 @@
   --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
   --card-bg: #ffffff;
-  --text: #2b2f36;
+  --text-color: #2b2f36;
   --text-secondary: #6b7280;
   --border: #e5e7eb;
   --primary: #2b2f36;
@@ -16,7 +16,7 @@
 .dark {
   --background: #0a0a0a;
   --card-bg: #161b22;
-  --text: #2b2f36;
+  --text-color: #ffffff;
   --text-secondary: #e5e7eb;
   --border: #e5e7eb;
   --primary: #3d414a;
@@ -24,18 +24,10 @@
 
 html,
 body {
-  width: 100%;
   min-height: 100vh;
   font-size: 16px;
-}
-
-html {
   background: var(--background);
-}
-
-html.dark {
-  background: var(--background);
-  color: #fff;
+  color: var(--text-color);
 }
 
 body {
@@ -43,18 +35,21 @@ body {
   flex-direction: column;
 }
 
-main {
-  max-width: var(--layout-width);
+.main {
   flex: 1;
-  width: 100%;
-  margin: 0 auto;
-  padding: 32px;
   display: flex;
   flex-direction: column;
 }
 
+.page-content {
+  width: 100%;
+  max-width: var(--layout-width);
+  margin: 0 auto;
+  padding: 32px;
+}
+
 @media (max-width: 768px) {
-  main {
+  .page-content {
     padding: 16px;
   }
 }