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/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>