From a37051afced141cbd31cf10915f5469db9f7a5c5 Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Thu, 21 Aug 2025 16:19:18 +0930
Subject: [PATCH] Pad content to footer, better handle carousel

---
 src/components/ImageCarousel.astro |  7 ++---
 src/layouts/MainLayout.astro       |  4 +--
 src/pages/404.astro                | 45 ++++++++++++++++--------------
 src/pages/index.astro              | 20 +++++++------
 src/pages/projects/[...slug].astro | 18 +++++++-----
 5 files changed, 51 insertions(+), 43 deletions(-)
diff --git a/src/components/ImageCarousel.astro b/src/components/ImageCarousel.astro
index 997f547..175c74e 100644
--- a/src/components/ImageCarousel.astro
+++ b/src/components/ImageCarousel.astro
@@ -43,8 +43,8 @@ const IDs: string[] = [];
 const imagesArray = shuffle ? shuffleArray(images) : images;
 ---
 
-<div class:list={[className]}>
-  <div class="relative h-full w-full overflow-hidden">
+<div class:list={[className, "relative overflow-hidden"]}>
+  <div>
     <div class:list={[backgroundColour, backgroundOpacity, "absolute inset-0"]}>
     </div>
 
@@ -85,9 +85,8 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
         />
       )
     }
-
-    <slot />
   </div>
+  <slot />
 </div>
 
 <script define:vars={{ imagesArray, interval, IDs }}>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 45171fd..3553640 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -26,9 +26,9 @@ import MainHead from "@layouts/MainHead.astro";
 <!doctype html>
 <html lang="en">
   <MainHead {title} {subtitle} {description} {image} />
-  <body>
+  <body class="flex min-h-svh flex-col">
     <Navbar {navbarDisplay} />
-    <main>
+    <main class="grow">
       <slot />
     </main>
     <Footer />
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 88e2b79..642571b 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -11,32 +11,35 @@ const heroImages = import.meta.glob<{ default: ImageMetadata; eager: true }>(
 const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages);
 ---
 
-<MainLayout title="Oops! 404">
-  <div class="flex h-screen w-full items-center justify-center">
+<MainLayout title="Oops! 404" navbarDisplay="transparent">
+  <div class="absolute inset-0 h-full w-full bg-black">
     <ImageCarousel
       images={heroImagesArray}
-      class="absolute z-10 h-full w-full"
+      class="h-full w-full"
+      foreground={true}
       foreground={true}
       foregroundOpacity="opacity-80"
     />
-    <div class="z-20 p-36 text-center">
-      <h1
-        class="font-header pb-8 text-5xl font-medium text-white uppercase text-shadow-lg/75 md:text-7xl lg:text-9xl"
-      >
-        Oops!
-      </h1>
-      <h2
-        class="font-header text-2xl font-medium text-gray-300 uppercase text-shadow-lg/75 md:text-2xl lg:text-4xl"
-      >
-        404 - Page not found
-      </h2>
+  </div>
+  <div
+    class="absolute inset-0 flex h-full w-full flex-col justify-center px-8 py-36 text-center"
+  >
+    <h1
+      class="font-header pb-8 text-5xl font-medium text-white uppercase text-shadow-lg/75 md:text-7xl lg:text-9xl"
+    >
+      Oops!
+    </h1>
+    <h2
+      class="font-header text-2xl font-medium text-gray-300 uppercase text-shadow-lg/75 md:text-2xl lg:text-4xl"
+    >
+      404 - Page not found
+    </h2>
 
-      <a
-        href="/"
-        class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
-      >
-        Home
-      </a>
-    </div>
+    <a
+      href="/"
+      class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
+    >
+      Home
+    </a>
   </div>
 </MainLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4552c11..00b31c4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -109,7 +109,7 @@ const tracks = (
       <div class="flex h-48 w-full items-center justify-center">
         <ImageCarousel
           images={imagesForCTAArray}
-          class="absolute -z-40 h-full w-full"
+          class="h-full w-full"
           foreground={true}
           foregroundColour="bg-primary"
           foregroundOpacity="opacity-75 dark:opacity-25"
@@ -118,13 +118,15 @@ const tracks = (
           quality={5}
           height={192}
           shuffle={true}
-        />
-        <a
-          href="/contact/"
-          class="text-md font-header repeat text-primary hover:bg-primary mx-auto inline-block rounded bg-white px-6 py-3 font-light uppercase drop-shadow-lg/75 transition hover:text-white hover:ring-2 hover:ring-white"
+          ><div class="flex h-full w-full items-center">
+            <a
+              href="/contact/"
+              class="text-md font-header repeat text-primary hover:bg-primary mx-auto inline-block rounded bg-white px-6 py-3 font-light uppercase drop-shadow-lg/75 transition hover:text-white hover:ring-2 hover:ring-white"
+            >
+              Get in touch!
+            </a>
+          </div></ImageCarousel
         >
-          Get in touch!
-        </a>
       </div>
     </section>
     <section id="projects" class="overflow-hidden bg-white dark:bg-gray-950">
@@ -203,10 +205,10 @@ const tracks = (
       </div>
     </section>
     <section id="fillerUntilServicesIsComplete" class="text-white">
-      <div class="flex h-64 w-full items-center justify-center">
+      <div class="flex h-96 w-full items-center justify-center">
         <ImageCarousel
           images={imagesForCTAArray}
-          class="absolute -z-40 h-full w-full overflow-hidden"
+          class="h-full w-full"
           foreground={true}
           foregroundColour="bg-primary"
           foregroundOpacity="opacity-50 dark:opacity-25"
diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro
index 8268138..b1803de 100644
--- a/src/pages/projects/[...slug].astro
+++ b/src/pages/projects/[...slug].astro
@@ -57,21 +57,25 @@ import P from "@components/MDX/P.astro";
   image={seoImage}
 >
   <div class="w-full">
-    <section id="cta" class="text-white">
-      <div class="flex h-64 w-full items-center justify-center">
+    <section id="title" class="text-white">
+      <div class="flex h-96 w-full items-center justify-center">
         <ImageCarousel
           images={images}
-          class="absolute -z-40 h-full w-full"
+          class="h-full w-full"
           foreground={true}
           interval={2000}
           transitionDuration="duration-1000"
           quality={50}
           height={256}
           shuffle={true}
-        />
-        <h1 class="font-header text-4xl uppercase text-shadow-lg/75">
-          {project.data.title}
-        </h1>
+          ><div
+            class="absolute inset-0 flex h-full w-full items-center justify-center px-8 text-center"
+          >
+            <h1 class="font-header text-4xl uppercase text-shadow-lg/75">
+              {project.data.title}
+            </h1>
+          </div></ImageCarousel
+        >
       </div>
     </section>
     <section id="projects" class="bg-white dark:bg-gray-950">
