From 0110a107adcfb728a681b6b48df892be17154e60 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Tue, 27 Feb 2024 22:38:20 +0100
Subject: [PATCH] Change max width

---
 src/app.config.ts                | 2 +-
 src/assets/css/tailwind.css      | 6 +++++-
 src/components/Footer.vue        | 2 +-
 src/components/header/Header.vue | 2 +-
 src/error.vue                    | 2 +-
 src/layouts/default.vue          | 2 +-
 src/layouts/maintenance.vue      | 2 +-
 7 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app.config.ts b/src/app.config.ts
index 71e9b3e..47aa0be 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -11,7 +11,7 @@ export default defineAppConfig({
     container: {
       base: 'mx-auto',
       padding: 'px-4 sm:px-6 lg:px-8',
-      constrained: 'max-w-7xl',
+      constrained: 'max-w-9xl',
     },
     dropdown: {
       container: 'z-50',
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 2f3bc91..7dc40d1 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -3,8 +3,12 @@
 @tailwind utilities;
 
 @layer components {
+  .max-w-9xl {
+    max-width: 96rem;
+  }
+
   .w-container {
-    @apply mx-auto max-w-7xl px-4 lg:px-32 md:px-16 sm:px-8;
+    @apply mx-auto max-w-9xl px-4 lg:px-32 md:px-16 sm:px-8;
   }
 
   .text-subtitle {
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index fc0c5a6..f516a41 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -4,7 +4,7 @@ const year = computed(() => new Date().getFullYear())
 
 <template>
   <footer class="w-full flex justify-center">
-    <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
+    <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-9xl py-4 flex justify-between bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
       <div class="w-full duration-300 text-center flex flex-col md:flex-row md:justify-between items-center gap-y-2">
         <p class="text-subtitle text-sm">
           © {{ year }} ArtDanjProduction
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 7be8a71..348d3c5 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="z-30 sticky top-0 left-0 flex justify-center w-full">
-    <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 grid grid-cols-2 lg:grid-cols-3 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
+    <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-9xl py-4 grid grid-cols-2 lg:grid-cols-3 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
       <Logo />
       <div class="hidden grow lg:flex justify-center">
         <NavBar />
diff --git a/src/error.vue b/src/error.vue
index b69b49d..8b5eb3d 100644
--- a/src/error.vue
+++ b/src/error.vue
@@ -13,7 +13,7 @@ const getColor = computed(() => appConfig.ui.primary)
   <section>
     <NuxtLoadingIndicator :color="getColor" />
     <section class="fixed inset-0 flex justify-center sm:px-8">
-      <div class="flex w-full max-w-7xl">
+      <div class="flex w-full max-w-9xl">
         <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
       </div>
     </section>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index a63faae..d1848f1 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -13,7 +13,7 @@ router.afterEach((route) => {
     <Background />
     <NuxtLoadingIndicator :color="$colorMode.value === 'light' ? 'black' : 'white'" />
     <section class="fixed inset-0 flex justify-center sm:px-8">
-      <div class="flex w-full max-w-7xl">
+      <div class="flex w-full max-w-9xl">
         <div class="w-full z-20 bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
       </div>
     </section>
diff --git a/src/layouts/maintenance.vue b/src/layouts/maintenance.vue
index 2872203..0fe5c92 100644
--- a/src/layouts/maintenance.vue
+++ b/src/layouts/maintenance.vue
@@ -7,7 +7,7 @@ const getColor = computed(() => appConfig.ui.primary)
   <div>
     <NuxtLoadingIndicator :color="getColor" />
     <section class="fixed inset-0 flex justify-center sm:px-8">
-      <div class="flex w-full max-w-7xl">
+      <div class="flex w-full max-w-9xl">
         <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
       </div>
     </section>