feat: reduce page sizing complexity

src/components/Article.astro

@@ -28,16 +28,15 @@ const listFormatter = new Intl.ListFormat("en-GB", {
   updated={article.data.updated}
   tags={article.data.tags}
 >
-  <div class="mx-auto mb-8">
   <h1
-      class="animate-reveal text-start text-2xl font-semibold break-words opacity-0"
+    class="animate-reveal text-start text-3xl font-semibold break-words opacity-0"
   >
     <span class="text-secondary">{article.data.title}</span><span
       class="text-tertiary ml-2">{article.data.description}</span
     >
   </h1>
   <div
-      class="animate-reveal text-tertiary mt-4 flex flex-row flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s]"
+    class="animate-reveal text-tertiary flex flex-row flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s]"
   >
     <div class="flex items-center gap-2">
       <Icon name="mdi:calendar" />
@@ -78,7 +77,6 @@ const listFormatter = new Intl.ListFormat("en-GB", {
       ) : null
     }
   </div>
-  </div>
   <div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
     <Prose>
       <Content />

src/components/Carousel.astro

@@ -7,7 +7,6 @@ const { data } = Astro.props;
 ---
 
 <div
-  class="pt-6"
   data-slides={data}
   x-data="{            
     // Sets the time between each slides in milliseconds
@@ -71,7 +70,7 @@ const { data } = Astro.props;
       </div>
     </template>
   </div>
-  <div class="relative min-h-16">
+  <div class="relative min-h-18">
     <template x-for="(slide, index) in slides">
       <div
         x-show="currentSlideIndex == index + 1"

src/components/Footer.astro

@@ -4,7 +4,7 @@ import Link from "@components/Link.astro";
 import { Icon } from "astro-icon/components";
 ---
 
-<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-24">
+<footer class="mx-auto mt-auto w-full">
   <div class="flex flex-col items-center justify-between gap-2 md:gap-4">
     <span class="text-tertiary text-center text-sm"
       >&copy; {new Date().getFullYear()}

src/components/FormattedDate.astro

@@ -1,12 +1,13 @@
 ---
 interface Props {
-  date?: Date;
+  date: Date;
+  className?: string;
 }
 
-const { date = new Date() } = Astro.props;
+const { date = new Date(), className } = Astro.props;
 ---
 
-<time datetime={date.toISOString()}>
+<time datetime={date.toISOString()} class={`${className}`}>
   {
     date.toLocaleDateString("en-GB", {
       day: "2-digit",

src/components/Header.astro

@@ -6,7 +6,7 @@ const pathname = new URL(Astro.request.url).pathname;
 const currentPath = pathname.replace(/\/$/, "");
 ---
 
-<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 md:pt-4">
+<header class="mx-auto w-full">
   <nav
     class="md:flex-no-wrap flex w-full flex-wrap justify-between"
     x-data="{ open: false }"

src/components/Prose.astro

@@ -1,5 +1,5 @@
 <div
-  class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded max-w-full"
+  class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded-sm prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded-sm max-w-full"
 >
   <slot />
 </div>

src/components/RelatedArticles.astro

@@ -19,7 +19,7 @@ const next = items[(index + 1) % items.length];
 
 {
   items.length > 1 ? (
-    <div class="mx-auto mt-8 flex max-w-prose flex-col-reverse justify-between gap-4 md:flex-row md:gap-0">
+    <div class="mx-auto flex w-full flex-col-reverse items-center justify-between gap-4 md:flex-row">
       <Button
         href={`/${prev.collection}/${prev.slug}`}
         link={`Previous: ${prev.data.title}`}

src/components/ShowcasePost.astro

@@ -13,16 +13,17 @@ const { collection } = Astro.props;
     class="group hover:bg-tertiary/30 bg-none"
     href={`/${collection.collection}/${collection.slug}`}
   >
-    <article class="flex flex-row items-center justify-between">
+    <article class="flex flex-col">
+      <div class="flex flex-col justify-between md:flex-row md:items-center">
         <h3 class="text-secondary mb-1 font-semibold text-nowrap">
           {collection.data.title}
         </h3>
-      <hr
+        <FormattedDate
-        class="text-tertiary group-hover:text-secondary mx-6 w-full border-dotted transition-colors duration-300"
+          date={collection.data.date}
+          className="text-accent block text-nowrap"
         />
-      <time class="text-accent block text-nowrap"
+      </div>
-        ><FormattedDate date={collection.data.date} /></time
+      <p class="text-tertiary text-pretty">{collection.data.description}</p>
-      >
     </article>
   </a>
 </li>

src/layouts/Layout.astro

@@ -27,13 +27,10 @@ const { title, description, image, date, updated, tags } = Astro.props;
     tags={tags}
   />
   <body
-    class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-4"
+    class="bg-primary text-secondary items mx-auto my-0 flex min-h-screen w-full max-w-[65ch] flex-col justify-start gap-6 p-4 md:my-6"
   >
     <Header />
-    <main
+    <main transition:animate="fade" class="flex flex-col gap-6">
-      class="mx-auto w-full max-w-[65ch] space-y-6"
-      transition:animate="fade"
-    >
       <slot />
     </main>
     <Footer />

src/pages/cv.astro

@@ -164,11 +164,11 @@ import icon from "public/assets/icon.png";
                   <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
                     Task:
                   </p>
-                  <div class="w-full lg:inline-block lg:w-8/12">
+                  <p class="w-full lg:inline-block lg:w-8/12">
                     <Link href="/projects/camouflage-store"
-                      >CMS Migration and Rebrand
+                      >CMS Migration and Rebrand</Link
-                    </Link>
+                    >
-                  </div>
+                  </p>
                 </section>
                 <section class="mb-6">
                   <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
@@ -225,9 +225,9 @@ import icon from "public/assets/icon.png";
                   <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
                     Deployed to:
                   </p>
-                  <div class="w-full lg:inline-block lg:w-8/12">
+                  <p class="w-full lg:inline-block lg:w-8/12">
                     <Link href="/">troylusty.com</Link>
-                  </div>
+                  </p>
                 </section>
                 <section class="mb-6">
                   <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
@@ -255,7 +255,7 @@ import icon from "public/assets/icon.png";
                   <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
                     Built with:
                   </p>
-                  <div class="w-full lg:inline-block lg:w-8/12">
+                  <div class="mt-5 w-full lg:inline-block lg:w-8/12">
                     <span class="box">Astro</span>
                     <span class="box">Tailwind CSS</span>
                     <span class="box">Alpine.js</span>

src/pages/index.astro

@@ -14,6 +14,7 @@ const projectsJSON = JSON.stringify(projects);
 ---
 
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
+  <div class="block w-full">
     <Hero />
     <section
       id="featured-projects"
@@ -21,4 +22,5 @@ const projectsJSON = JSON.stringify(projects);
     >
       <Carousel data={projectsJSON} />
     </section>
+  </div>
 </Layout>

src/pages/posts/index.astro

@@ -10,14 +10,12 @@ const posts = (await getCollection("posts"))
 ---
 
 <Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
-  <div class="mx-auto max-w-[65ch]">
+  <h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
-    <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
     {POSTS.TITLE}
   </h1>
   <ol
-      class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
+    class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
   >
     {posts.map((article: any) => <ShowcasePost collection={article} />)}
   </ol>
-  </div>
 </Layout>

src/pages/projects/index.astro

@@ -10,14 +10,12 @@ const projects = (await getCollection("projects"))
 ---
 
 <Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
-  <div class="mx-auto max-w-[65ch]">
+  <h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
-    <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
     {PROJECTS.TITLE}
   </h1>
   <ol
-      class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
+    class="animate-reveal grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
   >
     {projects.map((article: any) => <ShowcaseProject collection={article} />)}
   </ol>
-  </div>
 </Layout>