From 7c3bbfee420ea74aff0e0db20bb5a9f5a2409d8d Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Thu, 17 Sep 2026 13:35:59 +0800
Subject: [PATCH] update content width

---
 src/components/Header.astro          |  59 ++++++------
 src/layouts/MarkdownPostLayout.astro | 129 ++++++++++++++-------------
 src/pages/[lang]/index.astro         |  73 ++++++++-------
 src/pages/[lang]/tags/index.astro    |  28 +++---
 4 files changed, 151 insertions(+), 138 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 243f674..8cc060f 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -9,30 +9,30 @@ const t = getTranslations(lang);
 ---
 
 <div class="header-slot">
-<header class="site-header">
-    <div class="header-content">
-        <div class="theme-icon-wrap">
-            <ThemeIcon />
-        </div>
-
-        <nav class="header-nav">
-            <div class="banner">
-                <a
-                    href={`/${lang}/`}
-                    data-astro-reload
-                    class="banner-link"
-                    aria-label="banner"
-                >
-                    <span class="banner-logo"></span>
-                </a>
+    <header class="site-header">
+        <div class="header-content">
+            <div class="theme-icon-wrap">
+                <ThemeIcon />
             </div>
-            <Navigation />
-        </nav>
-    </div>
-    <div class="divider">
-        <Divider />
-    </div>
-</header>
+
+            <nav class="header-nav">
+                <div class="banner">
+                    <a
+                        href={`/${lang}/`}
+                        data-astro-reload
+                        class="banner-link"
+                        aria-label="banner"
+                    >
+                        <span class="banner-logo"></span>
+                    </a>
+                </div>
+                <Navigation />
+            </nav>
+        </div>
+        <div class="divider">
+            <Divider />
+        </div>
+    </header>
 </div>
 
 <style>
@@ -165,10 +165,7 @@ const t = getTranslations(lang);
             width: var(--site-nav-width, auto);
             margin: var(--site-nav-margin, 1rem) 0;
             padding-bottom: var(--site-nav-padding, 1rem);
-            transform: translate(
-                var(--site-nav-x, 0),
-                var(--site-nav-y, 0)
-            );
+            transform: translate(var(--site-nav-x, 0), var(--site-nav-y, 0));
         }
 
         .site-header :global(.site-nav-desktop) {
@@ -207,7 +204,6 @@ const t = getTranslations(lang);
             font-size: clamp(1.25rem, 7vw, 2rem);
         }
     }
-
 </style>
 
 <script>
@@ -330,9 +326,7 @@ const t = getTranslations(lang);
             12 * rootFontSize,
         );
         const compactSiteNavWidth = Math.max(
-            expandedWidth -
-                compactLogoWidth -
-                7.5 * rootFontSize,
+            expandedWidth - compactLogoWidth - 7.5 * rootFontSize,
             0,
         );
         const compactNavGap = Math.min(
@@ -406,8 +400,7 @@ const t = getTranslations(lang);
     ) {
         if (!slot) return;
 
-        const headerIsFullyExpanded =
-            currentScrollY >= HEADER_SCROLL_DISTANCE;
+        const headerIsFullyExpanded = currentScrollY >= HEADER_SCROLL_DISTANCE;
 
         slot.classList.toggle(
             "is-footer-hidden",
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
index c689eb1..731c07f 100644
--- a/src/layouts/MarkdownPostLayout.astro
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -18,78 +18,80 @@ const t = getTranslations(lang);
   description={frontmatter.description}
   image={frontmatter.image?.url}
 >
-  <div id="reading-progress" aria-hidden="true"></div>
-  <a
-    href="/"
-    class="back-button"
-    id="back-button"
-    aria-label="Go back"
-    title="返回"
-  >
-    <svg
-      viewBox="0 0 24 24"
-      width="20"
-      height="20"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2.2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
+  <main class="post-layout">
+    <div id="reading-progress" aria-hidden="true"></div>
+    <a
+      href="/"
+      class="back-button"
+      id="back-button"
+      aria-label="Go back"
+      title="返回"
     >
-      <path d="M15 18l-6-6 6-6"></path>
-    </svg>
-  </a>
+      <svg
+        viewBox="0 0 24 24"
+        width="20"
+        height="20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M15 18l-6-6 6-6"></path>
+      </svg>
+    </a>
 
-  <PostMenu headings={headings} />
+    <PostMenu headings={headings} />
 
-  <article class="post-article">
-    <div class="post-header">
-      <div class="post-meta">
-        <h1 class="post-title" transition:name={`post-title-${postId}`}>
-          {frontmatter.title}
-        </h1>
-        <p class="description">
-          <em>{frontmatter.description}</em>
-        </p>
-        <p class="meta-line">
-          {t.post.publishedOn}: {frontmatter.pubDate.toLocaleDateString()}
-        </p>
-        <p class="meta-line">{t.post.writtenBy}: {frontmatter.author}</p>
+    <article class="post-article">
+      <div class="post-header">
+        <div class="post-meta">
+          <h1 class="post-title" transition:name={`post-title-${postId}`}>
+            {frontmatter.title}
+          </h1>
+          <p class="description">
+            <em>{frontmatter.description}</em>
+          </p>
+          <p class="meta-line">
+            {t.post.publishedOn}: {frontmatter.pubDate.toLocaleDateString()}
+          </p>
+          <p class="meta-line">{t.post.writtenBy}: {frontmatter.author}</p>
 
-        <div class="tags" transition:name={`post-tags-${postId}`}>
-          {
-            frontmatter.tags.map((tag: string) => (
-              <p class="tag">
-                <a href={`/${lang}/tags/${tag}`}>{tag}</a>
-              </p>
-            ))
-          }
+          <div class="tags" transition:name={`post-tags-${postId}`}>
+            {
+              frontmatter.tags.map((tag: string) => (
+                <p class="tag">
+                  <a href={`/${lang}/tags/${tag}`}>{tag}</a>
+                </p>
+              ))
+            }
+          </div>
         </div>
+
+        <img
+          src={frontmatter.image.url}
+          alt={frontmatter.image.alt}
+          class="post-cover"
+          transition:name={`post-image-${postId}`}
+        />
       </div>
 
-      <img
-        src={frontmatter.image.url}
-        alt={frontmatter.image.alt}
-        class="post-cover"
-        transition:name={`post-image-${postId}`}
-      />
-    </div>
+      <div class="post-divider"></div>
 
-    <div class="post-divider"></div>
+      <div class="post-content" transition:animate={fade({ duration: "0.2s" })}>
+        <slot />
+      </div>
 
-    <div class="post-content" transition:animate={fade({ duration: "0.2s" })}>
-      <slot />
-    </div>
+      <Dialog />
 
-    <Dialog />
+      <PostNav post={post} lang={lang} />
 
-    <PostNav post={post} lang={lang} />
-
-    <h2>{comments}</h2>
-    {t.post.commentsDesc.map((line: string) => <p set:html={line} />)}
-    <Remark42Embed slug={slug} />
-  </article>
+      <h2>{comments}</h2>
+      {t.post.commentsDesc.map((line: string) => <p set:html={line} />)}
+      <Remark42Embed slug={slug} />
+    </article>
+  </main>
 </BaseLayout>
 
 <script
@@ -169,6 +171,11 @@ const t = getTranslations(lang);
 </script>
 
 <style>
+  .post-layout {
+    max-width: 850px;
+    margin: 0 auto;
+  }
+
   #reading-progress {
     position: fixed;
     top: 0;
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 5a0b04c..05532c0 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -14,51 +14,58 @@ const lang = getLangFromUrl(Astro.url);
 const t = getTranslations(lang);
 const headerTitle = lang === "zh" ? "Cloverta的博客" : "Cloverta's blog";
 const pageTitle = t.home.title;
-const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml"
+const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml";
 ---
 
 <BaseLayout pageTitle=`${headerTitle} - ${t.banner.subtitle}`>
-  <h1 class="page-title">
-    <span>{pageTitle}</span>
-    <a
-      href={rssLink}
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label="RSS Feed"
-      class="rss-link"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        width="33"
-        height="33"
-        aria-hidden="true"
-        style="margin-left: 0px; margin-bottom: -5px; color:#3f50e5"
+  <main class="index">
+    <h1 class="page-title">
+      <span>{pageTitle}</span>
+      <a
+        href={rssLink}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="RSS Feed"
+        class="rss-link"
       >
-        <path
-          d="M6.18 17.82a1.64 1.64 0 1 1 0 3.28 1.64 1.64 0 0 1 0-3.28ZM3 10.44v2.25c4.56 0 8.27 3.71 8.27 8.27h2.25C13.52 15.16 8.84 10.44 3 10.44Zm0-4.54v2.25c7.06 0 12.81 5.75 12.81 12.81h2.25C18.06 12.66 11.3 5.9 3 5.9Z"
-        ></path>
-      </svg>
-    </a>
-  </h1>
-  <div class="content">
-    {t.home.content.map((line: string) => <p set:html={line} />)}
-  </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          width="33"
+          height="33"
+          aria-hidden="true"
+          style="margin-left: 0px; margin-bottom: -5px; color:#3f50e5"
+        >
+          <path
+            d="M6.18 17.82a1.64 1.64 0 1 1 0 3.28 1.64 1.64 0 0 1 0-3.28ZM3 10.44v2.25c4.56 0 8.27 3.71 8.27 8.27h2.25C13.52 15.16 8.84 10.44 3 10.44Zm0-4.54v2.25c7.06 0 12.81 5.75 12.81 12.81h2.25C18.06 12.66 11.3 5.9 3 5.9Z"
+          ></path>
+        </svg>
+      </a>
+    </h1>
+    <div class="content">
+      {t.home.content.map((line: string) => <p set:html={line} />)}
+    </div>
 
-  <div class="section-divider"></div>
+    <div class="section-divider"></div>
 
-  <h2>{t.home.latestTitle}</h2>
+    <h2>{t.home.latestTitle}</h2>
 
-  <PostList />
+    <PostList />
 
-  <div class="section-divider"></div>
+    <div class="section-divider"></div>
 
-  <!-- <Remark42LatestComments lang={lang} client:load /> -->
-  <LatestComments />
+    <!-- <Remark42LatestComments lang={lang} client:load /> -->
+    <LatestComments />
+  </main>
 </BaseLayout>
 
 <style>
+  .index {
+    max-width: 850px;
+    margin: 0 auto;
+  }
+
   .section-divider {
     height: 1px;
     background: #cdd2d8;
diff --git a/src/pages/[lang]/tags/index.astro b/src/pages/[lang]/tags/index.astro
index b7799f0..5e01213 100644
--- a/src/pages/[lang]/tags/index.astro
+++ b/src/pages/[lang]/tags/index.astro
@@ -16,21 +16,27 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
 ---
 
 <BaseLayout pageTitle=`${pageTitle} - ${t.banner.title}`>
-    <h1>{t.tags.title}</h1>
-    <p>{t.tags.description}</p>
+    <main class="tags-layout">
+        <h1>{t.tags.title}</h1>
+        <p>{t.tags.description}</p>
 
-    <div class="tags">
-        {
-            tags.map((tag) => (
-                <p class="tag" transition:name={`post-tags-${tag}`}>
-                    <a href={`/${lang}/tags/${tag}`}>{tag}</a>
-                </p>
-            ))
-        }
-    </div>
+        <div class="tags">
+            {
+                tags.map((tag) => (
+                    <p class="tag" transition:name={`post-tags-${tag}`}>
+                        <a href={`/${lang}/tags/${tag}`}>{tag}</a>
+                    </p>
+                ))
+            }
+        </div>
+    </main>
 </BaseLayout>
 
 <style>
+    .tags-layout {
+        max-width: 850px;
+        margin: 0 auto;
+    }
     .tags {
         display: flex;
         flex-wrap: wrap;