Edit error page

app.vue

@@ -42,29 +42,26 @@
         font-family: var(--text-font-family);
         font-size: var(--text-font-size);
         font-weight: var(--regular-font-weight);
-        line-height: var(--text-line-height);
+        line-height: var(--line-height);
-        color: white;
+        color: var(--secondary-color);
-        background-color: var(--eerie-black);
+        background-color: var(--primary-color);
     }
 
     h1 {
         font-family: var(--title-font-family);
         font-size: var(--h1-font-size);
         font-weight: var(--medium-font-weight);
-        line-height: var(--h1-line-height);
     }
 
     h2 {
         font-family: var(--title-font-family);
         font-size: var(--h2-font-size);
-        line-height: var(--h2-line-height);
         margin: 0 0 4rem 0;
     }
 
     h3 {
         font-family: var(--text-font-family);
         font-size: var(--h3-font-size);
-        line-height: var(--h3-line-height);
         margin: 2rem 0 1rem 0;
     }
 
@@ -81,24 +78,57 @@
     // --------------------------------------------------
 
     a {
-        color: white;
+        color: var(--secondary-color);
-        text-decoration: underline var(--emerald);
+        text-decoration: underline var(--accent-color);
         border-radius: 2px;
         transition: color 200ms ease-in-out;
 
         &:hover,
         &:focus,
         &:active {
-            color: var(--emerald);
+            color: var(--accent-color);
         }
 
         &:focus-visible {
-            outline: 1px dashed var(--emerald);
+            outline: 1px dashed var(--accent-color);
             outline-offset: 2px;
             animation: expand-outline 200ms ease-in-out;
         }
     }
 
+    // --------------------------------------------------
+    // BUTTON STYLE
+    // --------------------------------------------------
+
+    button {
+        padding: 1rem 1.5rem;
+        color: var(--primary-color);
+        background-image: var(--button-gradient);
+        background-size: 100%;
+        background-position: right center;
+        border: none;
+        border-radius: 30px;
+        cursor: pointer;
+        font-family: var(--text-font-family);
+        font-size: var(--text-font-size);
+        font-weight: var(--semi-bold-font-weight);
+        line-height: var(--line-height);
+        text-align: center;
+        transition: background-size 200ms ease-in-out;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background-size: 300%;
+        }
+
+        &:focus-visible {
+            outline: 1px dashed var(--accent-color);
+            outline-offset: 4px;
+            animation: expand-outline 200ms ease-in-out;
+        }
+    }
+
     // --------------------------------------------------
     // LAYOUT
     // --------------------------------------------------

assets/styles/_animations.scss

@@ -2,6 +2,15 @@
 ANIMATIONS
 =========================================================================== */
 
+@keyframes expand-outline {
+    0% {
+        outline-offset: 0;
+    }
+    100% {
+        outline-offset: 4px;
+    }
+}
+
 @keyframes expand-width {
     0% {
         width: 0;

assets/styles/_variables.scss

@@ -16,22 +16,20 @@
     --bold-font-weight: 700;
     --extra-bold-font-weight: 800;
     --black-font-weight: 900;
-    --text-font-size: 1.2rem;
-    --text-line-height: calc(var(--text-font-size) * 1.2);
-    --caption-font-size: 1.1rem;
-    --caption-line-height: calc(var(--caption-font-size) * 1.2);
-    --footnote-font-size: 1rem;
-    --footnote-line-height: calc(var(--footnote-font-size) * 1.2);
     --h1-font-size: 2rem;
-    --h1-line-height: calc(var(--h1-font-size) * 1.2);
     --h2-font-size: 1.8rem;
-    --h2-line-height: calc(var(--h2-font-size) * 1.2);
     --h3-font-size: 1.6rem;
-    --h3-line-height: calc(var(--h3-font-size) * 1.2);
+    --button-font-size: 1.4rem;
+    --text-font-size: 1.2rem;
+    --caption-font-size: 1.1rem;
+    --footnote-font-size: 1rem;
+    --line-height: 1.2;
 
     // Dimensions
 
-    --icon-size: 2.5rem;
+    --regular-icon-size: 2.5rem;
+    --small-icon-size: 1.2rem;
+
 
     // Colors
 
@@ -39,16 +37,34 @@
     --emerald: #72C080;
     --granny-smith-apple: #A3F3B0;
     --middle-green: #428F53;
+
+    --primary-color: var(--eerie-black);
+    --primary-color-dark: black;
+    --secondary-color: white;
+    --accent-color: var(--emerald);
+    --accent-color-light: var(--granny-smith-apple);
+    --accent-color-dark: var(--middle-green);
+    --button-gradient: linear-gradient(
+        30deg,
+        hsl(131deg 38% 60%) 1%,
+        hsl(131deg 40% 62%) 34%,
+        hsl(130deg 43% 64%) 46%,
+        hsl(130deg 46% 66%) 54%,
+        hsl(130deg 49% 69%) 60%,
+        hsl(130deg 53% 71%) 66%,
+        hsl(130deg 58% 73%) 71%,
+        hsl(130deg 63% 75%) 76%,
+        hsl(130deg 69% 77%) 83%,
+        hsl(130deg 77% 80%) 100%
+    );
+
+    // Media queries
+
+    --tablet-media-query: 48rem;
+    --desktop-media-query: 62rem;
 }
 
 // Media queries
 
 $tablet-media-query: 48rem;
 $desktop-media-query: 62rem;
-
-@media screen and (min-width: $tablet-media-query) {
-
-    :root {
-
-    }
-}

components/AppError.vue

@@ -1,7 +1,18 @@
 <template>
 
     <main>
-        <button class="app__error" @click="$emit('handleError')">Clear errors</button>
+        <div class="error">
+            <h1 class="error__title">{{ errorMessage }}</h1>
+            <div class="error__separator" aria-hidden="true"></div>
+            <div class="error__emoticon" aria-hidden="true">¯\(°_o)/¯</div>
+            <button class="error__button" @click="$emit('handleError')">
+                <span class="error__button-text">Retourner à la page d'accueil</span>
+                <svg class="error__button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M 2 8.7 L 12 1 L 22 8.7 L 22 20.8 C 22 22.016 21.006 23 19.778 23 L 4.222 23 C 2.995 23 2 22.016 2 20.8 L 2 8.7 Z"/>
+                    <polyline points="8.667 23 8.667 12 15.333 12 15.333 23"/>
+                </svg>
+            </button>
+        </div>
     </main>
 
 </template>
@@ -12,8 +23,99 @@
     // DATA
     // --------------------------------------------------
 
+    const props = defineProps({
+        errorMessage: String
+    });
     const emit = defineEmits([
         'handleError'
     ]);
 
 </script>
+
+<style lang="scss">
+
+    main {
+        padding: 4rem 2rem;
+    }
+
+    .error {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        min-width: 30vw;
+        text-align: center;
+
+        &__title {
+            opacity: 0;
+            margin: 0 2rem;
+            animation: fade-in-from-bottom 400ms ease-in-out 600ms forwards;
+        }
+
+        &__separator {
+            width: 0;
+            height: 1px;
+            margin: 0.5rem 0;
+            background-color: var(--accent-color);
+            animation: expand-width 400ms ease-in-out 200ms forwards;
+        }
+
+        &__emoticon {
+            opacity: 0;
+            margin: 0 2rem;
+            font-size: var(--h1-font-size);
+            font-weight: var(--medium-font-weight);
+            animation: fade-in-from-top 400ms ease-in-out 600ms forwards;
+        }
+
+        &__button {
+            margin: 6rem 0 0 0;
+
+            &-icon {
+                display: none;
+            }
+        }
+
+        @media screen and (min-width: 48rem) {
+
+            &__button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                &-text {
+                    transform: translateX(calc((0.8rem + var(--small-icon-size)) / 2));
+                    transition: transform 200ms ease-in-out;  
+                }
+
+                &-icon {
+                    display: inherit;
+                    flex-shrink: 0;
+                    opacity: 0;
+                    width: var(--small-icon-size);
+                    height: var(--small-icon-size);
+                    margin: 0 0 0 0.8rem;
+                    transform: translateX(calc((0.8rem + var(--small-icon-size)) / 2));
+                    transition:
+                        opacity 200ms ease-in-out,
+                        transform 200ms ease-in-out; 
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+
+                    .error__button-text {
+                        transform: translateX(0);
+                    }
+
+                    .error__button-icon {
+                        opacity: 1;
+                        transform: translateX(0);
+                    }
+                }
+            }
+        }
+    }
+
+</style>

components/AppFooter.vue

@@ -28,7 +28,7 @@
         }
 
         span {
-            color: var(--emerald);
+            color: var(--accent-color);
         }
     }
 

error.vue

@@ -1,7 +1,7 @@
 <template>
     
     <div class="app">
-        <AppError class="app__error" @handle-error="handleError" />
+        <AppError class="app__error" :error-message="errorMessage" @handle-error="handleError" />
     </div>
 
 </template>
@@ -15,13 +15,13 @@
     const props = defineProps({
         error: Object
     });
-    const pageTitleChunk = `Erreur ${props.error.statusCode}`;
+    const errorMessage = `Erreur ${props.error.statusCode}`;
 
     // --------------------------------------------------
     // HEAD
     // --------------------------------------------------
 
-    useAppHead(pageTitleChunk);
+    useAppHead(errorMessage);
 
     // --------------------------------------------------
     // LOGIC

pages/index.vue

@@ -3,7 +3,7 @@
     <main>
         <div class="title">
             <h1 class="title__name">Paul Nicoué</h1>
-            <div class="title__separator"></div>
+            <div class="title__separator" aria-hidden="true"></div>
             <h2 class="title__job">Intégrateur web & développeur full stack</h2>
         </div>
     </main>
@@ -46,7 +46,7 @@
             width: 0;
             height: 1px;
             margin: 0.5rem auto;
-            background-color: var(--emerald);
+            background-color: var(--accent-color);
             animation: expand-width 400ms ease-in-out 200ms forwards;
         }