Makes the hero wider so it does not look tiny on larger screens, same…

… with the footer and provides more space to the hero.
ddev · Nov 12, 2024 · 184ddd3 · 184ddd3
1 parent 1676416
commit 184ddd3
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -56,7 +56,7 @@ const navigation = {
 ---
 
 <footer class="dark:bg-transparent">
-  <div class="max-w-4xl mx-auto py-12 px-6 lg:px-0 lg:py-16">
+  <div class="max-w-7xl mx-auto p-8">
     <div class="pb-8 xl:grid xl:grid-cols-3 xl:gap-8">
       <div class="grid grid-cols-auto gap-8 xl:col-span-4">
         <div class="md:grid md:grid-cols-4 md:gap-8">

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -64,7 +64,7 @@ import {
 
 <header class="w-full p-8">
   <nav
-    class="flex justify-between items-center content-center max-w-4xl mx-auto"
+    class="flex justify-between items-center content-center"
     aria-label="Main"
   >
     <a href="/" class="relative block cursor-pointer -ml-2">

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -10,7 +10,7 @@ import { CloudIcon } from "@heroicons/react/24/solid/index.js"
 ---
 
 <div class="mt-2 pt-8 sm:mt-12 sm:pt-24 pb-32 relative overflow-x-hidden">
-  <div class="z-10 max-w-4xl mx-auto relative">
+  <div class="z-10 sm:max-w-4xl max-w-7xl mx-auto relative">
     <div class="max-w-2xl px-6 lg:px-0">
       <h1 class="text-5xl font-bold dark:text-white">
         Docker-based PHP development environments.