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/components/BackButton.astro

@@ -6,7 +6,7 @@ import { SITE } from "@/config";
 
 {
   SITE.showBackButton && (
-    <div class="mx-auto flex w-full max-w-3xl items-center justify-start px-2">
+    <div class="mx-auto flex w-full max-w-app items-center justify-start px-2">
       <LinkButton
         id="back-button"
         href="/"

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

src/components/Header.astro

@@ -33,7 +33,7 @@ const isActive = (path: string) => {
   </a>
   <div
     id="nav-container"
-    class="mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row"
+    class="mx-auto flex max-w-app flex-col items-center justify-between sm:flex-row"
   >
     <div
       id="top-nav-wrap"

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>