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