fix(UI): change max-width

Author: tungdevpro

src/components/Breadcrumbs.astro

@@ -20,7 +20,7 @@ breadcrumbList[0] === "tags" &&
     3,
     `${breadcrumbList[1]} ${
       Number(breadcrumbList[2]) === 1 ? "" : "(page " + breadcrumbList[2] + ")"
-    }`
+    }`,
   );
 ---
 
@@ -47,15 +47,15 @@ breadcrumbList[0] === "tags" &&
             <a href={`/${breadcrumb}/`}>{breadcrumb}</a>
             <span aria-hidden="true">&raquo;</span>
           </li>
-        )
+        ),
       )
     }
   </ul>
 </nav>
 
 <style>
   .breadcrumb {
-    @apply mx-auto mb-1 mt-8 w-full max-w-3xl px-4;
+    @apply mx-auto mb-1 mt-8 w-full max-w-5xl px-4;
   }
   .breadcrumb ul li {
     @apply inline;

src/components/Header.astro

@@ -28,6 +28,11 @@ const { activeNav } = Astro.props;
           )
         }
       </a>
+      <!-- <button
+        type="button"
+        class="ml-2 border-none rounded-full bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 bg-gray-50 hover:bg-gray-200"
+        >Music</button
+      > -->
       <nav id="nav-menu">
         <button
           class="hamburger-menu focus-outline"
@@ -121,7 +126,7 @@ const { activeNav } = Astro.props;
     @apply absolute -top-full left-16 z-50 bg-skin-accent px-3 py-2 text-skin-inverted transition-all focus:top-4;
   }
   .nav-container {
-    @apply mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row;
+    @apply mx-auto flex max-w-5xl flex-col items-center justify-between sm:flex-row;
   }
   .top-nav-wrap {
     @apply relative flex w-full items-start justify-between p-4 sm:items-center sm:py-8;
@@ -156,7 +161,7 @@ const { activeNav } = Astro.props;
     @apply col-span-1;
   }
   nav a.active {
-    @apply underline decoration-wavy decoration-2 underline-offset-4;
+    @apply underline decoration-2 underline-offset-4;
   }
   nav a.active svg {
     @apply fill-skin-accent;
@@ -202,7 +207,7 @@ const { activeNav } = Astro.props;
       menuBtn.setAttribute("aria-expanded", menuExpanded ? "false" : "true");
       menuBtn.setAttribute(
         "aria-label",
-        menuExpanded ? "Open Menu" : "Close Menu"
+        menuExpanded ? "Open Menu" : "Close Menu",
       );
       menuItems?.classList.toggle("display-none");
     });

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={`max-w-5xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>
   <hr class="border-skin-line" aria-hidden={ariaHidden} />
 </div>

src/config.ts

@@ -2,9 +2,9 @@ import type { Site, SocialObjects } from "./types";
 
 export const SITE: Site = {
   website: "https://tungdevpro.github.io", // replace this with your deployed domain
-  author: "Tungdevpro",
+  author: "Vito",
   desc: "I often gossip and write around about things like technology and my life",
-  title: "tungdm",
+  title: "Tung Do (Vito)",
   ogImage: "astropaper-og.jpg",
   lightAndDarkMode: false,
   postPerPage: 10,

src/layouts/AboutLayout.astro

@@ -19,7 +19,7 @@ const { frontmatter } = Astro.props;
   <Header activeNav="about" />
   <Breadcrumbs />
   <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-5xl prose-img:border-0">
       <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
       <slot />
     </section>

src/layouts/Main.astro

@@ -37,7 +37,7 @@ const { props } = Astro;
 
 <style>
   #main-content {
-    @apply mx-auto w-full max-w-3xl px-4 pb-4;
+    @apply mx-auto w-full max-w-5xl px-4 pb-4;
   }
   #main-content h1 {
     @apply text-2xl font-semibold sm:text-3xl;

src/layouts/PostDetails.astro

@@ -31,7 +31,7 @@ const { Content } = await post.render();
 const ogImageUrl = typeof ogImage === "string" ? ogImage : ogImage?.src;
 const ogUrl = new URL(
   ogImageUrl ?? `/posts/${slugifyStr(title)}.png`,
-  Astro.url.origin
+  Astro.url.origin,
 ).href;
 
 const layoutProps = {
@@ -53,7 +53,7 @@ const layoutProps = {
     <div class="progress-bar h-1 w-0 bg-skin-accent" id="myBar"></div>
   </div> -->
 
-  <div class="mx-auto flex w-full max-w-3xl justify-start px-2">
+  <div class="mx-auto flex w-full max-w-5xl justify-start px-2">
     <button
       class="focus-outline mb-2 mt-8 flex hover:opacity-75"
       onclick="(() => (history.length === 1) ? window.location = '/' : history.back())()"
@@ -73,12 +73,12 @@ const layoutProps = {
       size="lg"
       className="my-2"
     />
-    <article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
+    <article id="article" role="article" class="prose mx-auto mt-8 max-w-5xl">
       <Content />
     </article>
 
     <ul class="my-8">
-      {tags.map(tag => <Tag tag={slugifyStr(tag)} />)}
+      {tags.map((tag) => <Tag tag={slugifyStr(tag)} />)}
     </ul>
 
     <div
@@ -104,7 +104,7 @@ const layoutProps = {
 
 <style>
   main {
-    @apply mx-auto w-full max-w-3xl px-4 pb-12;
+    @apply mx-auto w-full max-w-5xl px-4 pb-12;
   }
   .post-title {
     @apply text-2xl font-semibold text-skin-accent;

src/pages/404.astro

@@ -28,7 +28,7 @@ import LinkButton from "@components/LinkButton.astro";
 
 <style>
   #main-content {
-    @apply mx-auto flex max-w-3xl flex-1 items-center justify-center;
+    @apply mx-auto flex max-w-5xl flex-1 items-center justify-center;
   }
   .not-found-wrapper {
     @apply mb-14 flex flex-col items-center justify-center;

src/styles/base.css

@@ -34,7 +34,7 @@
   }
   section,
   footer {
-    @apply mx-auto max-w-3xl px-4;
+    @apply mx-auto max-w-5xl px-4;
   }
   a {
     @apply outline-2 outline-offset-1 outline-skin-fill