update content width

src/components/Header.astro

@@ -9,7 +9,7 @@ const t = getTranslations(lang);
 ---
 
 <div class="header-slot">
-<header class="site-header">
+    <header class="site-header">
         <div class="header-content">
             <div class="theme-icon-wrap">
                 <ThemeIcon />
@@ -32,7 +32,7 @@ const t = getTranslations(lang);
         <div class="divider">
             <Divider />
         </div>
-</header>
+    </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",

src/layouts/MarkdownPostLayout.astro

@@ -18,6 +18,7 @@ const t = getTranslations(lang);
   description={frontmatter.description}
   image={frontmatter.image?.url}
 >
+  <main class="post-layout">
     <div id="reading-progress" aria-hidden="true"></div>
     <a
       href="/"
@@ -90,6 +91,7 @@ const t = getTranslations(lang);
       {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;

src/pages/[lang]/index.astro

@@ -14,10 +14,11 @@ 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}`>
+  <main class="index">
     <h1 class="page-title">
       <span>{pageTitle}</span>
       <a
@@ -56,9 +57,15 @@ const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml"
 
     <!-- <Remark42LatestComments lang={lang} client:load /> -->
     <LatestComments />
+  </main>
 </BaseLayout>
 
 <style>
+  .index {
+    max-width: 850px;
+    margin: 0 auto;
+  }
+
   .section-divider {
     height: 1px;
     background: #cdd2d8;

src/pages/[lang]/tags/index.astro

@@ -16,6 +16,7 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
 ---
 
 <BaseLayout pageTitle=`${pageTitle} - ${t.banner.title}`>
+    <main class="tags-layout">
         <h1>{t.tags.title}</h1>
         <p>{t.tags.description}</p>
 
@@ -28,9 +29,14 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
                 ))
             }
         </div>
+    </main>
 </BaseLayout>
 
 <style>
+    .tags-layout {
+        max-width: 850px;
+        margin: 0 auto;
+    }
     .tags {
         display: flex;
         flex-wrap: wrap;