From a0d337708e94bdfc95e1a8eade7fbbe1b6f122dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Nicou=C3=A9?= <contact@paulnicoue.com>
Date: Wed, 15 Feb 2023 12:26:30 +0100
Subject: [PATCH] Edit section style

---
 app.vue                      |  2 +-
 assets/styles/main.scss      | 16 ++++++++--------
 components/AppError.vue      |  4 +++-
 components/ContactForm.vue   |  1 -
 components/ContactHeader.vue |  1 -
 components/HeroSection.vue   |  2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app.vue b/app.vue
index e15719a..bad1101 100644
--- a/app.vue
+++ b/app.vue
@@ -39,7 +39,7 @@
             'app-footer' auto
             / 100%;
         place-content: start center;
-        place-items: center center;
+        place-items: center;
     
         &__main {
             grid-area: app-main;
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 1aad360..442fc44 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -35,8 +35,9 @@
 
     // Dimensions
 
-    --section-max-width: Min(100%, 80rem);
-    --content-max-width: Min(100%, 60rem);
+    --large-content-width: Min(100%, 120rem);
+    --medium-content-width: Min(100%, 80rem);
+    --small-content-width: Min(100%, 40rem);
     --regular-icon-size: 2rem;
     --regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
     --small-icon-size: calc(var(--text-font-size) * var(--line-height));
@@ -290,21 +291,20 @@ form {
 // --------------------------------------------------
 
 section {
-    max-width: var(--section-max-width);
+    width: var(--medium-content-width);
     padding: 4rem 2rem;
 
     @media screen and (min-width: $tablet-media-query) {
-            padding: 4rem;
-        }
+        padding: 4rem;
+    }
 
     @media screen and (min-width: $desktop-media-query) {
         padding: 6rem;
     }
 }
 
-@mixin hero-section {
-    max-width: unset;
-    width: 100%;
+@mixin large-section {
+    width: var(--large-content-width);
 }
 
 // --------------------------------------------------
diff --git a/components/AppError.vue b/components/AppError.vue
index bca43e8..94275aa 100644
--- a/components/AppError.vue
+++ b/components/AppError.vue
@@ -61,10 +61,12 @@
 
     main {
         width: 100%;
+        display: flex;
+        justify-content: center;
     }
 
     .error {
-        @include hero-section;
+        @include large-section;
         display: grid;
         grid:
             'title' minmax(var(--h1-font-height), auto)
diff --git a/components/ContactForm.vue b/components/ContactForm.vue
index 7f6a814..db149c9 100644
--- a/components/ContactForm.vue
+++ b/components/ContactForm.vue
@@ -104,7 +104,6 @@
     // --------------------------------------------------
 
     .contact-form {
-        max-width: var(--content-max-width);
         display: grid;
         grid:
             'name name' auto
diff --git a/components/ContactHeader.vue b/components/ContactHeader.vue
index 513f246..ac30f97 100644
--- a/components/ContactHeader.vue
+++ b/components/ContactHeader.vue
@@ -41,7 +41,6 @@
     // --------------------------------------------------
 
     .contact-header {
-        max-width: var(--content-max-width);
         display: grid;
         place-content: start;
         place-items: start;
diff --git a/components/HeroSection.vue b/components/HeroSection.vue
index 5100a5e..8edb1c4 100644
--- a/components/HeroSection.vue
+++ b/components/HeroSection.vue
@@ -54,7 +54,7 @@
     // --------------------------------------------------
 
     .hero {
-        @include hero-section;
+        @include large-section;
         height: 100vh;
         height: 100svh;
         display: grid;