feat: lock page width back to 65ch

src/components/Carousel.astro

@@ -71,17 +71,18 @@ const { data } = Astro.props;
       </div>
     </template>
   </div>
-  <div>
+  <div class="relative min-h-16">
     <template x-for="(slide, index) in slides">
       <div
         x-show="currentSlideIndex == index + 1"
-        class="text-secondary flex justify-end pt-1 text-right font-serif text-lg"
+        class="text-secondary absolute top-0 left-0 flex w-full justify-end pt-1 text-right font-serif text-lg"
+        x-transition.opacity.duration.1000ms.delay.100ms
       >
         <div class="flex w-full flex-col items-end">
           <h3
             x-text="slide.data.title"
             x-bind:aria-describedby="'slide' + (index + 1) + 'Description'"
-            class="border-tertiary/30 w-fit border-t italic"
+            class="italic"
           >
           </h3>
           <p

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-prose pt-12">
+<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-12">
   <div class="flex flex-col items-center justify-between md:flex-row">
     <span class="text-tertiary text-center text-sm font-medium"
       >&copy; {new Date().getFullYear()}

src/components/Header.astro

@@ -1,35 +1,29 @@
 ---
 import { SITE } from "@consts";
 import { Icon } from "astro-icon/components";
-import Button from "@components/Button.astro";
 ---
 
-<header class="mx-auto mb-8 w-full max-w-6xl space-y-6 px-4 pt-4">
+<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 pt-4">
   <nav
     x-data="{ mobileMenuIsOpen: false }"
     x-on:click.away="mobileMenuIsOpen = false"
     class="flex h-12 items-center justify-between"
   >
-    <a class="group inline-flex items-center" href="/" title={SITE.TITLE}>
+    <a href="/" title={SITE.TITLE}>
       <Icon
         name="icon"
         title={SITE.TITLE}
-        class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
+        class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
       />
-      <div
-        class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
-      >
-        Troy Lusty
-      </div>
     </a>
     <ul class="hidden items-center gap-4 sm:flex">
       {
         SITE.NAVLINKS.map((i) => (
-          <li class="mb-1 last:mb-0">
+          <li>
             <a
               data-navlink
               href={i.href}
-              class="text-secondary hover:text-secondary decoration-tertiary font-medium capitalize decoration-wavy underline-offset-2 focus:underline focus:outline-hidden"
+              class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden"
               aria-current="page"
             >
               {i.name}
@@ -37,14 +31,6 @@ import Button from "@components/Button.astro";
           </li>
         ))
       }
-      <li>
-        <a href={`mailto:${SITE.EMAIL}`}>
-          <span
-            class="rounded-full bg-blue-500/10 px-3 py-2 text-sm leading-6 font-medium text-blue-400 ring-1 ring-blue-500/20 ring-inset"
-            >Hire me</span
-          >
-        </a>
-      </li>
     </ul>
     <button
       x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
@@ -80,7 +66,7 @@ import Button from "@components/Button.astro";
       x-transition:leave-start="translate-y-0"
       x-transition:leave-end="-translate-y-full"
       id="mobileMenu"
-      class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto rounded-b-md px-6 pt-20 pb-6 sm:hidden"
+      class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto px-6 pt-6 pb-6 sm:hidden"
     >
       {
         SITE.NAVLINKS.map((i) => (
@@ -96,13 +82,6 @@ import Button from "@components/Button.astro";
           </li>
         ))
       }
-      <li class="mt-4 w-full border-none">
-        <Button
-          href={`mailto:${SITE.EMAIL}`}
-          link="Hire me"
-          class="block w-full justify-center"
-        />
-      </li>
     </ul>
   </nav>
 </header>

src/components/Hero.astro

@@ -1,5 +1,6 @@
 ---
 import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
+import { Icon } from "astro-icon/components";
 ---
 
 <link
@@ -10,10 +11,10 @@ import instrument from "@fontsource/instrument-serif/files/instrument-serif-lati
   crossorigin="anonymous"
 />
 
-<section>
+<section class="animate-reveal opacity-0">
-  <div class="mx-auto px-8 py-32">
+  <div class="mx-auto flex h-full self-center px-8 py-32">
     <div
-      class="animate-reveal mx-auto max-w-xl text-center text-4xl tracking-tight text-balance text-white md:text-6xl"
+      class="mx-auto my-auto max-w-xl text-center text-4xl tracking-tight text-balance text-white md:text-6xl"
     >
       <div
         class="text-secondary flex items-center justify-center gap-3 font-semibold"
@@ -28,6 +29,15 @@ import instrument from "@fontsource/instrument-serif/files/instrument-serif-lati
       <div class="text-tertiary font-serif font-light tracking-wide italic">
         digital designer.
       </div>
+      <div class="group absolute right-0 left-0 mx-auto mt-8 w-fit">
+        <a href="#featured-projects">
+          <Icon
+            name="mdi:chevron-up"
+            class="text-tertiary group-hover:text-secondary h-8 w-auto rotate-180 animate-bounce transition-all duration-300 ease-in-out"
+            title="Move down"
+          />
+        </a>
+      </div>
     </div>
   </div>
 </section>

src/components/ShowcasePost.astro

@@ -8,12 +8,12 @@ type Props = {
 const { collection } = Astro.props;
 ---
 
-<li class="border-tertiary/30 border-l">
+<li>
   <a
     class="group hover:bg-tertiary/30 bg-none"
     href={`/${collection.collection}/${collection.slug}`}
   >
-    <article class="ml-2 flex flex-col">
+    <article class="flex flex-col">
       <h3 class="mb-1 font-semibold text-balance">
         <span class="text-secondary">{collection.data.title}</span><span
           class="text-tertiary group-hover:text-accent ml-2 transition-colors"

src/layouts/Layout.astro

@@ -31,7 +31,7 @@ const { title, description, image, date, updated, tags } = Astro.props;
   >
     <Header />
     <main
-      class="mx-auto w-full max-w-[1344px] space-y-6"
+      class="mx-auto w-full max-w-[65ch] space-y-6"
       transition:animate="fade"
     >
       <slot />

src/pages/cv.astro

@@ -12,10 +12,10 @@ import icon from "public/assets/icon.png";
 <html lang="en" class="scroll-smooth antialiased" transition:animate="none">
   <Head title={CV.TITLE} description={CV.DESCRIPTION} />
   <body class="w-full font-sans antialiased">
-    <div class="container mx-auto max-w-screen-xl">
+    <div class="mx-auto max-w-screen-xl">
-      <main class="flex flex-col rounded-md shadow-2xl sm:m-12">
+      <main class="flex flex-col sm:m-12">
         <div
-          class="flex flex-col items-center justify-between p-12 sm:flex-row-reverse"
+          class="flex flex-col items-center justify-between p-4 sm:flex-row-reverse sm:items-start sm:p-8"
         >
           <div>
             <Image
@@ -27,7 +27,9 @@ import icon from "public/assets/icon.png";
           </div>
           <div>
             <h1 class="mb-2 text-5xl font-bold">{SITE.AUTHOR}</h1>
-            <h2 class="mb-2 text-xl italic">Digital Designer</h2>
+            <h2 class="mb-2 text-center text-xl italic sm:text-left">
+              Digital Designer
+            </h2>
             <div
               class="social-links grid grid-cols-1 gap-1 py-4 font-medium md:grid-cols-2"
             >
@@ -53,7 +55,7 @@ import icon from "public/assets/icon.png";
           </div>
         </div>
         <div class="flex flex-col sm:flex-row-reverse">
-          <div class="w-full rounded-r-md p-8 sm:max-w-sm">
+          <div class="w-full p-4 sm:max-w-sm sm:p-8">
             <div class="mb-12 px-2 text-lg font-light">
               <div class="mb-4 flex items-center">
                 <Icon name="mdi:cogs" class="mr-2" />
@@ -129,7 +131,7 @@ import icon from "public/assets/icon.png";
               <p>Native</p>
             </div>
           </div>
-          <div class="content w-full p-12">
+          <div class="content w-full p-4 sm:p-8">
             <div class="prose">
               <h2>Summary</h2>
               <p>

src/pages/index.astro

@@ -27,12 +27,12 @@ const projectsJSON = JSON.stringify(projects);
 
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
   <Hero />
-  <section aria-labelledby="featured-projects" class="container">
+  <section aria-labelledby="featured-projects">
     <div
       class="mx-auto flex flex-col items-start justify-between sm:flex-row sm:items-center"
     >
       <h2
-        class="animate-reveal text-2xl font-semibold break-words capitalize opacity-0"
+        class=" animate-reveal text-2xl font-semibold break-words capitalize opacity-0"
         id="featured-projects"
       >
         Featured projects
@@ -42,12 +42,12 @@ const projectsJSON = JSON.stringify(projects);
           <div class="group">
             <a
               href="/projects"
-              class="group text-tertiary flex items-center justify-center gap-1 transition-colors duration-300 group-hover:text-sky-500"
+              class="group text-tertiary group-hover:text-secondary flex items-center justify-center gap-1 transition-colors duration-300"
             >
               View all
               <Icon
                 name="mdi:chevron-right"
-                class="transition-all duration-300 group-hover:translate-x-2 group-hover:text-sky-500"
+                class="group-hover:text-secondary transition-all duration-300 group-hover:translate-x-2"
               />
             </a>
           </div>
@@ -57,16 +57,13 @@ const projectsJSON = JSON.stringify(projects);
     <Carousel data={projectsJSON} />
   </section>
 
-  <section aria-labelledby="recent-posts" class="container max-w-[65ch]">
+  <section aria-labelledby="recent-posts" class="mt-24">
     <div class="group flex w-fit flex-row items-center">
-      <a href="/posts">
+      <h2
-        <h2
+        class="animate-reveal text-2xl font-semibold break-words capitalize opacity-0"
-          class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s]"
+      >
-          id="featured-projects"
+        Recent posts
-        >
+      </h2>
-          Recent posts
-        </h2>
-      </a>
     </div>
     <ol
       class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
@@ -75,8 +72,17 @@ const projectsJSON = JSON.stringify(projects);
     </ol>
     {
       allPosts.length > HOME.HOMESETTINGS!.NUM_POSTS_ON_HOMEPAGE ? (
-        <div class="flex justify-center">
+        <div class="group">
-          <Button href="/posts" link="View all" />
+          <a
+            href="/posts"
+            class="group text-tertiary group-hover:text-secondary flex items-center justify-center gap-1 transition-colors duration-300"
+          >
+            View all
+            <Icon
+              name="mdi:chevron-right"
+              class="group-hover:text-secondary transition-all duration-300 group-hover:translate-x-2"
+            />
+          </a>
         </div>
       ) : null
     }