refactor: extract redundant max-width into utility (satnaing#525)

satnaing · miyayaLora · commit 2bf0d3ef02c4 · 2025-06-27T15:30:11.000+08:00
* refactor: extract redundant max-width into utility Extract redundant max-width into a universal tailwind utility class. By doing so, the width of the layout in different pages can be customized easily. * docs: update docs for modifying `max-w-app` utility (cherry picked from commit 5f72b93)
diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro
@@ -23,7 +23,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {
 }
 ---
 
-<nav class="mx-auto mt-8 mb-1 w-full max-w-3xl px-4" aria-label="breadcrumb">
+<nav class="mx-auto mt-8 mb-1 w-full max-w-app px-4" aria-label="breadcrumb">
   <ul
     class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"
   >
diff --git a/src/components/Hr.astro b/src/components/Hr.astro
@@ -7,6 +7,6 @@ export interface Props {
 const { noPadding = false, ariaHidden = true } = Astro.props;
 ---
 
-<div class={`max-w-3xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>
+<div class:list={["mx-auto max-w-app", noPadding ? "px-0" : "px-4"]}>
   <hr class="border-border" aria-hidden={ariaHidden} />
 </div>
diff --git a/src/data/blog/how-to-configure-astropaper-theme.md b/src/data/blog/how-to-configure-astropaper-theme.md
@@ -71,6 +71,19 @@ Here are SITE configuration options
 | `lang`                | Used as HTML ISO Language code in `<html lang"en">`. Default is `en`.                                                                                                                                                                                                                                                                                                                                                             |
 | `timezone`            | This option allows you to specify your timezone using the [IANA format](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). Setting this ensures consistent timestamps across your localhost and deployed site, eliminating time differences.                                                                                                                                                                          |
 
+## Update layout width
+
+The default `max-width` for the entire blog is `768px` (`max-w-3xl`). If you'd like to change it, you can easily update the `max-w-app` utility in your `src/styles/global.css` file:
+
+```css
+@utility max-w-app {
+  @apply max-w-4xl xl:max-w-5xl;
+  /* eg: max-w-4xl xl:max-w-5xl */
+}
+```
+
+You can explore more `max-width` values in the [Tailwind CSS docs](https://tailwindcss.com/docs/max-width).
+
 ## Configuring logo or title
 
 Prior to AstroPaper v5, you can update your site name/logo in `LOGO_IMAGE` object inside `src/config.ts` file. However, in AstroPaper v5, this option has been removed in favor of Astro's built-in SVG and Image components.
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
@@ -24,7 +24,7 @@ const { frontmatter } = Astro.props;
     </div>
     <section
       id="about"
-      class="prose mb-28 max-w-3xl prose-img:border-0"
+      class="prose mb-28 max-w-app prose-img:border-0"
       slot="main-body-slot"
     >
       <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro
@@ -25,7 +25,7 @@ const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";
   <div
     data-backUrl={backUrl}
     id="main-content"
-    class="mx-auto w-full max-w-3xl px-4 pb-4"
+    class="mx-auto w-full max-w-app px-4 pb-4"
   >
     {
       "titleTransition" in props ? (
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -13,7 +13,7 @@ import { SITE } from "@/config";
     >
       <h1 class="text-5xl font-bold text-accent md:text-9xl">404</h1>
       <span aria-hidden="true">¯\_(ツ)_/¯</span>
-      <p class="mt-4 text-2xl md:text-3xl">Page Not Found</p>
+      <p class="mt-4 text-2xl sm:text-3xl">Page Not Found</p>
       <LinkButton
         href="/"
         class="my-6 text-lg underline decoration-dashed underline-offset-8"
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -41,30 +41,29 @@ html[data-theme="dark"] {
     scrollbar-width: auto;
     scrollbar-color: var(--color-muted) transparent;
   }
-
   html {
     @apply overflow-auto overscroll-auto scroll-smooth;
   }
-
   body {
     @apply flex min-h-svh flex-col bg-background font-mono text-foreground selection:bg-accent/75 selection:text-background;
   }
-
   a,
   button {
     @apply outline-offset-1 outline-accent focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-dashed;
   }
-
   button:not(:disabled),
   [role="button"]:not(:disabled) {
     cursor: pointer;
   }
-
   section {
-    @apply mx-auto max-w-3xl px-4;
+    @apply mx-auto max-w-app px-4;
   }
 }
 
+@utility max-w-app {
+  @apply max-w-3xl;
+}
+
 .active-nav {
   @apply underline decoration-wavy decoration-2 underline-offset-4;
 }

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {`
`23`	`23`	`}`
`24`	`24`	`---`
`25`	`25`
`26`		`-<nav class="mx-auto mt-8 mb-1 w-full max-w-3xl px-4" aria-label="breadcrumb">`
	`26`	`+<nav class="mx-auto mt-8 mb-1 w-full max-w-app px-4" aria-label="breadcrumb">`
`27`	`27`	`<ul`
`28`	`28`	`class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"`
`29`	`29`	`>`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ const { frontmatter } = Astro.props;`
`24`	`24`	`</div>`
`25`	`25`	`<section`
`26`	`26`	`id="about"`
`27`		`- class="prose mb-28 max-w-3xl prose-img:border-0"`
	`27`	`+ class="prose mb-28 max-w-app prose-img:border-0"`
`28`	`28`	`slot="main-body-slot"`
`29`	`29`	`>`
`30`	`30`	`<h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";`
`25`	`25`	`<div`
`26`	`26`	`data-backUrl={backUrl}`
`27`	`27`	`id="main-content"`
`28`		`- class="mx-auto w-full max-w-3xl px-4 pb-4"`
	`28`	`+ class="mx-auto w-full max-w-app px-4 pb-4"`
`29`	`29`	`>`
`30`	`30`	`{`
`31`	`31`	`"titleTransition" in props ? (`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ import { SITE } from "@/config";`
`13`	`13`	`>`
`14`	`14`	`<h1 class="text-5xl font-bold text-accent md:text-9xl">404</h1>`
`15`	`15`	`<span aria-hidden="true">¯\_(ツ)_/¯</span>`
`16`		`- <p class="mt-4 text-2xl md:text-3xl">Page Not Found</p>`
	`16`	`+ <p class="mt-4 text-2xl sm:text-3xl">Page Not Found</p>`
`17`	`17`	`<LinkButton`
`18`	`18`	`href="/"`
`19`	`19`	`class="my-6 text-lg underline decoration-dashed underline-offset-8"`
Original file line number	Diff line number	Diff line change
`@@ -41,30 +41,29 @@ html[data-theme="dark"] {`
`41`	`41`	`scrollbar-width: auto;`
`42`	`42`	`scrollbar-color: var(--color-muted) transparent;`
`43`	`43`	`}`
`44`		`-`
`45`	`44`	`html {`
`46`	`45`	`@apply overflow-auto overscroll-auto scroll-smooth;`
`47`	`46`	`}`
`48`		`-`
`49`	`47`	`body {`
`50`	`48`	`@apply flex min-h-svh flex-col bg-background font-mono text-foreground selection:bg-accent/75 selection:text-background;`
`51`	`49`	`}`
`52`		`-`
`53`	`50`	`a,`
`54`	`51`	`button {`
`55`	`52`	`@apply outline-offset-1 outline-accent focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-dashed;`
`56`	`53`	`}`
`57`		`-`
`58`	`54`	`button:not(:disabled),`
`59`	`55`	`[role="button"]:not(:disabled) {`
`60`	`56`	`cursor: pointer;`
`61`	`57`	`}`
`62`		`-`
`63`	`58`	`section {`
`64`		`- @apply mx-auto max-w-3xl px-4;`
	`59`	`+ @apply mx-auto max-w-app px-4;`
`65`	`60`	`}`
`66`	`61`	`}`
`67`	`62`
	`63`	`+@utility max-w-app {`
	`64`	`+ @apply max-w-3xl;`
	`65`	`+}`
	`66`	`+`
`68`	`67`	`.active-nav {`
`69`	`68`	`@apply underline decoration-wavy decoration-2 underline-offset-4;`
`70`	`69`	`}`