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

* 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

src/layouts/AboutLayout.astro

@@ -19,7 +19,7 @@ const { frontmatter } = Astro.props;
   <Header />
   <Breadcrumb />
   <main id="main-content">
-    <section id="about" class="prose mb-28 max-w-3xl prose-img:border-0">
+    <section id="about" class="prose mb-28 max-w-app prose-img:border-0">
       <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
       <slot />
     </section>

src/layouts/Main.astro

@@ -24,7 +24,7 @@ const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";
 <main
   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 ? (

src/layouts/PostDetails.astro

@@ -87,7 +87,7 @@ const nextPost =
   <main
     id="main-content"
     class:list={[
-      "mx-auto w-full max-w-3xl px-4 pb-12",
+      "mx-auto w-full max-w-app px-4 pb-12",
       { "mt-8": !SITE.showBackButton },
     ]}
     data-pagefind-body
@@ -102,7 +102,7 @@ const nextPost =
       <Datetime {pubDatetime} {modDatetime} {timezone} size="lg" class="my-2" />
       <EditPost class="max-sm:hidden" {hideEditPost} {post} />
     </div>
-    <article id="article" class="mx-auto prose mt-8 max-w-3xl">
+    <article id="article" class="mx-auto prose mt-8 max-w-app">
       <Content />
     </article>