From e2b1064b1e8a64100f463879bf6067c54cc3bf4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Nicou=C3=A9?= <contact@paulnicoue.com>
Date: Mon, 6 Mar 2023 11:50:54 +0100
Subject: [PATCH] Edit dividers

---
 components/AppError.vue       | 10 +++++-----
 components/ContactSection.vue | 11 +++++++++++
 components/HeroTitle.vue      | 10 +++++-----
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/components/AppError.vue b/components/AppError.vue
index 93914f9..030a61f 100644
--- a/components/AppError.vue
+++ b/components/AppError.vue
@@ -6,7 +6,7 @@
                 <h1 class="error__title" v-show="isVisible">{{ errorMessage }}</h1>
             </Transition>
             <Transition name="expand-width">
-                <div class="error__separator" aria-hidden="true" v-show="isVisible"></div>
+                <div class="error__divider" aria-hidden="true" v-show="isVisible"></div>
             </Transition>
             <Transition name="fade-in-from-top">
                 <div class="error__emoticon" aria-hidden="true" v-show="isVisible">¯\(°_o)/¯</div>
@@ -70,7 +70,7 @@
         display: grid;
         grid:
             'title' minmax(var(--h1-font-height), auto)
-            'separator' 1px
+            'divider' 1px
             'emoticon' minmax(var(--h1-font-height), auto)
             '.' 5rem
             'button' auto
@@ -85,11 +85,11 @@
             margin: 0 2rem;
         }
 
-        &__separator {
-            grid-area: separator;
+        &__divider {
+            grid-area: divider;
             width: 100%;
             height: 1px;
-            background-color: var(--primary-accent-color);
+            background: linear-gradient(90deg, var(--primary-color), var(--primary-accent-color-light), var(--primary-color));
         }
 
         &__emoticon {
diff --git a/components/ContactSection.vue b/components/ContactSection.vue
index 3a4fbbb..4f32f48 100644
--- a/components/ContactSection.vue
+++ b/components/ContactSection.vue
@@ -17,6 +17,7 @@
     // --------------------------------------------------
 
     .contact {
+        position: relative;
         display: grid;
         grid:
             'header' auto
@@ -26,6 +27,16 @@
         place-items: start stretch;
         row-gap: 4rem;
 
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light), var(--primary-color));
+        }
+
         &__header {
             grid-area: header;
         }
diff --git a/components/HeroTitle.vue b/components/HeroTitle.vue
index abbb030..d795f53 100644
--- a/components/HeroTitle.vue
+++ b/components/HeroTitle.vue
@@ -5,7 +5,7 @@
             <span class="hero-title__name" v-show="isVisible">Paul Nicoué</span>
         </Transition>
         <Transition name="expand-width">
-            <span class="hero-title__separator" aria-hidden="true" v-show="isVisible"></span>
+            <span class="hero-title__divider" aria-hidden="true" v-show="isVisible"></span>
         </Transition>
         <Transition name="fade-in-from-top">
             <span class="hero-title__job" v-show="isVisible">Intégrateur & développeur web</span>
@@ -43,7 +43,7 @@
         display: grid;
         grid:
             'name' auto
-            'separator' auto
+            'divider' auto
             'job' auto
             / minmax(50%, auto);
         place-content: center;
@@ -56,11 +56,11 @@
             margin: 0 2rem;
         }
 
-        &__separator {
-            grid-area: separator;
+        &__divider {
+            grid-area: divider;
             width: 100%;
             height: 1px;
-            background-color: var(--primary-accent-color);
+            background: linear-gradient(90deg, var(--primary-color), var(--primary-accent-color-light), var(--primary-color));
         }
 
         &__job {