From cb43e511c28a27992ba5db5a3a3d4027a3e797d9 Mon Sep 17 00:00:00 2001
From: Jim Myhrberg <contact@jimeh.me>
Date: Tue, 13 Jan 2026 23:39:14 +0000
Subject: [PATCH] fix: center hero nav primary button using CSS grid

Use a 3-column grid layout (1fr auto 1fr) to ensure the "Read the Spec"
button is perfectly centered regardless of the different widths of the
"About" and "FAQ" buttons on either side.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/Hero.astro | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 984126d..31d28bc 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -13,9 +13,9 @@ interface Props {
 const { version, versions, svgContent } = Astro.props;
 
 const navItems = [
-  { id: "about", label: "About" },
+  { id: "about", label: "About", align: "end" },
   { id: "spec", label: "Read the Spec", primary: true },
-  { id: "faq", label: "FAQ" },
+  { id: "faq", label: "FAQ", align: "start" },
 ];
 
 const baseClasses = `inline-flex items-center justify-center gap-2
@@ -29,6 +29,7 @@ const primaryClasses = `bg-sky-600 text-white
 const secondaryClasses = `text-gray-600 dark:text-neutral-400
   hover:bg-gray-100 hover:text-gray-950
   dark:hover:bg-neutral-800 dark:hover:text-neutral-50`;
+
 ---
 
 <section
@@ -133,7 +134,7 @@ const secondaryClasses = `text-gray-600 dark:text-neutral-400
     <!-- Navigation links -->
     <nav
       class="animate-fade-in-up delay-400
-             flex flex-nowrap items-center justify-center gap-2 sm:gap-4"
+             grid grid-cols-[1fr_auto_1fr] items-center gap-2 sm:gap-4"
     >
       {
         navItems.map((item) => (
@@ -142,6 +143,8 @@ const secondaryClasses = `text-gray-600 dark:text-neutral-400
             class:list={[
               baseClasses,
               item.primary ? primaryClasses : secondaryClasses,
+              item.align === "end" && "justify-self-end",
+              item.align === "start" && "justify-self-start",
             ]}
           >
             {item.label}