From c6705914e07279b4d26029a4069d1df4ad586a77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Nicou=C3=A9?= <contact@paulnicoue.com>
Date: Wed, 11 Jan 2023 15:16:55 +0100
Subject: [PATCH] Edit footer and add header

---
 app.vue                        | 19 +++----
 assets/styles/_animations.scss |  6 +--
 assets/styles/_fonts.scss      |  4 +-
 assets/styles/_variables.scss  | 13 +++--
 components/AppError.vue        | 14 +++--
 components/AppFooter.vue       | 98 +++++++++++++++++++++++++++++-----
 components/AppHeader.vue       | 24 +++++++++
 error.vue                      |  3 +-
 nuxt.config.ts                 | 14 +++++
 pages/index.vue                |  6 ++-
 10 files changed, 160 insertions(+), 41 deletions(-)
 create mode 100644 components/AppHeader.vue

diff --git a/app.vue b/app.vue
index 9a0ea28..1049b65 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,7 @@
 <template>
 
     <div class="app">
+        <AppHeader class="app__header" />
         <NuxtPage class="app__main" />
         <AppFooter class="app__footer" />
     </div>
@@ -25,15 +26,6 @@
 
 <style lang="scss">
 
-    // --------------------------------------------------
-    // MODULES
-    // --------------------------------------------------
-
-    @use 'minireset.css';
-    @use '~/assets/styles/fonts';
-    @use '~/assets/styles/variables';
-    @use '~/assets/styles/animations';
-
     // --------------------------------------------------
     // FONTS AND COLORS
     // --------------------------------------------------
@@ -107,7 +99,7 @@
         background-size: 100%;
         background-position: right center;
         border: none;
-        border-radius: 30px;
+        border-radius: 40px;
         cursor: pointer;
         font-family: var(--text-font-family);
         font-size: var(--text-font-size);
@@ -135,12 +127,18 @@
 
     .app {
         min-height: 100vh;
+        min-height: 100svh;
         display: grid;
         grid:
+            'app-header' auto
             'app-main' 1fr
             'app-footer' auto
             / 1fr;
         place-items: center;
+
+        &__header {
+            grid-area: app-header;
+        }
     
         &__main {
             grid-area: app-main;
@@ -151,5 +149,4 @@
         }
     }
 
-
 </style>
diff --git a/assets/styles/_animations.scss b/assets/styles/_animations.scss
index 88ebf0b..8b657e7 100644
--- a/assets/styles/_animations.scss
+++ b/assets/styles/_animations.scss
@@ -1,6 +1,6 @@
-/* ===========================================================================
-ANIMATIONS
-=========================================================================== */
+// --------------------------------------------------
+// ANIMATIONS
+// --------------------------------------------------
 
 @keyframes expand-outline {
     0% {
diff --git a/assets/styles/_fonts.scss b/assets/styles/_fonts.scss
index 6d5c900..d2aeeea 100644
--- a/assets/styles/_fonts.scss
+++ b/assets/styles/_fonts.scss
@@ -1,6 +1,6 @@
-// ----------------------------------------------------------------------------
+// --------------------------------------------------
 // FONTS
-// ----------------------------------------------------------------------------
+// --------------------------------------------------
 
 // Cairo
 
diff --git a/assets/styles/_variables.scss b/assets/styles/_variables.scss
index 66dc384..c1e93a8 100644
--- a/assets/styles/_variables.scss
+++ b/assets/styles/_variables.scss
@@ -1,6 +1,6 @@
-// ----------------------------------------------------------------------------
+// --------------------------------------------------
 // VARIABLES
-// ----------------------------------------------------------------------------
+// --------------------------------------------------
 
 :root {
 
@@ -34,13 +34,17 @@
     // Colors
 
     --eerie-black: #212121;
+    --jet: #333333;
+    --silver: #C2C2C2;
     --emerald: #72C080;
     --granny-smith-apple: #A3F3B0;
     --middle-green: #428F53;
 
     --primary-color: var(--eerie-black);
+    --primary-color-light: var(--jet);
     --primary-color-dark: black;
     --secondary-color: white;
+    --secondary-color-dark: var(--silver);
     --accent-color: var(--emerald);
     --accent-color-light: var(--granny-smith-apple);
     --accent-color-dark: var(--middle-green);
@@ -57,11 +61,6 @@
         hsl(130deg 69% 77%) 83%,
         hsl(130deg 77% 80%) 100%
     );
-
-    // Media queries
-
-    --tablet-media-query: 48rem;
-    --desktop-media-query: 62rem;
 }
 
 // Media queries
diff --git a/components/AppError.vue b/components/AppError.vue
index fde3b09..ec006e4 100644
--- a/components/AppError.vue
+++ b/components/AppError.vue
@@ -32,7 +32,11 @@
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+
+    // --------------------------------------------------
+    // ERROR STYLE
+    // --------------------------------------------------
 
     main {
         padding: 4rem 2rem;
@@ -69,14 +73,18 @@
         }
 
         &__button {
-            margin: 6rem 0 0 0;
+            margin: 6rem 2rem 0 2rem;
 
             &-icon {
                 display: none;
             }
         }
 
-        @media screen and (min-width: 48rem) {
+    }
+    
+    @media screen and (min-width: $tablet-media-query) {
+
+        .error {
 
             &__button {
                 display: flex;
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index f6c3ba8..6a51e05 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -1,34 +1,106 @@
 <template>
 
     <footer>
-        <div class="contact">
-            <a href="mailto:contact@paulnicoue.com" target="_blank" aria-label="Écrire un e-mail à Paul Nicoué">contact<span>@</span>paulnicoue.com</a>
+        <div class="footer-bar">
+            <svg aria-hidden="true" class="footer-bar__logo" viewBox="0 0 500 190.4" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="footer-bar__logo-gradient-1" gradientUnits="userSpaceOnUse" x1="79.525" y1="191.722" x2="79.525" y2="324.172" gradientTransform="matrix(1.300575, 0, 0, 1.300575, -75.140588, -249.351019)">
+                        <stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
+                        <stop offset="1" style="stop-color: rgb(66, 143, 83);"/>
+                    </linearGradient>
+                    <linearGradient id="footer-bar__logo-gradient-2" gradientUnits="userSpaceOnUse" x1="129.473" y1="191.722" x2="129.473" y2="324.172" gradientTransform="matrix(1.300575, 0, 0, 1.300575, -75.140588, -249.351019)">
+                        <stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
+                        <stop offset="1" style="stop-color: rgb(66, 143, 83);"/>
+                    </linearGradient>
+                    <linearGradient id="footer-bar__logo-gradient-3" gradientUnits="userSpaceOnUse" x1="370.521" y1="191.722" x2="370.521" y2="324.172" gradientTransform="matrix(1.300575, 0, 0, 1.300575, -75.140588, -249.351019)">
+                        <stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
+                        <stop offset="1" style="stop-color: rgb(66, 143, 83);"/>
+                    </linearGradient>
+                    <linearGradient id="footer-bar__logo-gradient-4" gradientUnits="userSpaceOnUse" x1="420.47" y1="191.722" x2="420.47" y2="324.172" gradientTransform="matrix(1.300575, 0, 0, 1.300575, -75.140588, -249.351019)">
+                        <stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
+                        <stop offset="1" style="stop-color: rgb(66, 143, 83);"/>
+                    </linearGradient>
+                </defs>
+                <path class="footer-bar__logo-bracket-1" d="M 56.184 172.259 C 49.551 171.999 43.894 171.154 39.213 169.724 C 34.53 168.292 30.759 166.212 27.897 163.481 C 25.036 160.749 22.956 157.302 21.654 153.141 C 20.354 148.979 19.704 143.972 19.704 138.119 C 19.704 135.908 19.802 133.566 19.996 131.096 C 20.192 128.625 20.354 126.219 20.484 123.878 C 20.744 121.926 20.907 120.106 20.972 118.415 C 21.037 116.725 21.07 115.359 21.07 114.318 C 21.07 108.856 19.412 104.402 16.094 100.955 C 12.779 97.508 7.413 94.745 0 92.664 L 0 80.374 C 7.543 78.552 12.942 75.952 16.193 72.569 C 19.444 69.188 21.07 64.702 21.07 59.109 C 21.07 57.808 21.004 56.215 20.874 54.329 C 20.744 52.444 20.614 50.461 20.484 48.379 C 20.354 45.908 20.192 43.436 19.996 40.966 C 19.802 38.495 19.704 36.284 19.704 34.334 C 19.704 28.351 20.354 23.245 21.654 19.019 C 22.956 14.792 25.069 11.314 27.994 8.582 C 30.921 5.851 34.726 3.802 39.407 2.436 C 44.09 1.071 49.747 0.258 56.38 -0.002 L 56.576 13.069 C 50.723 13.329 46.203 14.369 43.017 16.191 C 39.83 18.011 37.619 20.515 36.384 23.701 C 35.149 26.888 34.53 30.692 34.53 35.114 C 34.53 36.804 34.629 38.755 34.823 40.966 C 35.019 43.176 35.18 45.454 35.31 47.794 C 35.441 49.875 35.571 51.924 35.701 53.939 C 35.831 55.955 35.896 57.678 35.896 59.109 C 35.896 64.572 35.31 69.026 34.14 72.472 C 32.97 75.919 30.921 78.715 27.994 80.861 C 25.069 83.006 20.874 84.861 15.412 86.421 C 23.476 88.762 28.906 91.948 31.701 95.981 C 34.497 100.012 35.896 106.059 35.896 114.124 C 35.896 115.424 35.831 116.886 35.701 118.512 C 35.571 120.138 35.441 121.796 35.31 123.488 C 35.18 125.828 35.019 128.105 34.823 130.315 C 34.629 132.526 34.53 134.672 34.53 136.754 C 34.53 141.045 35.116 144.816 36.286 148.068 C 37.457 151.319 39.636 153.888 42.821 155.775 C 46.009 157.661 50.527 158.798 56.38 159.188 L 56.184 172.259 Z"/>
+                <path class="footer-bar__logo-bracket-2" d="M 121.146 172.259 C 114.513 171.999 108.856 171.154 104.174 169.724 C 99.491 168.292 95.72 166.212 92.859 163.481 C 89.997 160.749 87.916 157.302 86.616 153.141 C 85.316 148.979 84.664 143.972 84.664 138.119 C 84.664 135.908 84.763 133.566 84.957 131.096 C 85.153 128.625 85.316 126.219 85.446 123.878 C 85.706 121.926 85.869 120.106 85.933 118.415 C 85.999 116.725 86.03 115.359 86.03 114.318 C 86.03 108.856 84.373 104.402 81.056 100.955 C 77.74 97.508 72.374 94.745 64.961 92.664 L 64.961 80.374 C 72.504 78.552 77.901 75.952 81.153 72.569 C 84.404 69.188 86.03 64.702 86.03 59.109 C 86.03 57.808 85.966 56.215 85.836 54.329 C 85.706 52.444 85.576 50.461 85.446 48.379 C 85.316 45.908 85.153 43.436 84.957 40.966 C 84.763 38.495 84.664 36.284 84.664 34.334 C 84.664 28.351 85.316 23.245 86.616 19.019 C 87.916 14.792 90.03 11.314 92.956 8.582 C 95.883 5.851 99.687 3.802 104.369 2.436 C 109.051 1.071 114.709 0.258 121.341 -0.002 L 121.536 13.069 C 115.684 13.329 111.164 14.369 107.977 16.191 C 104.791 18.011 102.58 20.515 101.344 23.701 C 100.11 26.888 99.491 30.692 99.491 35.114 C 99.491 36.804 99.589 38.755 99.784 40.966 C 99.979 43.176 100.141 45.454 100.271 47.794 C 100.401 49.875 100.531 51.924 100.661 53.939 C 100.791 55.955 100.857 57.678 100.857 59.109 C 100.857 64.572 100.271 69.026 99.101 72.472 C 97.931 75.919 95.883 78.715 92.956 80.861 C 90.03 83.006 85.836 84.861 80.373 86.421 C 88.437 88.762 93.867 91.948 96.663 95.981 C 99.459 100.012 100.857 106.059 100.857 114.124 C 100.857 115.424 100.791 116.886 100.661 118.512 C 100.531 120.138 100.401 121.796 100.271 123.488 C 100.141 125.828 99.979 128.105 99.784 130.315 C 99.589 132.526 99.491 134.672 99.491 136.754 C 99.491 141.045 100.077 144.816 101.247 148.068 C 102.417 151.319 104.596 153.888 107.783 155.775 C 110.969 157.661 115.489 158.798 121.341 159.188 L 121.146 172.259 Z"/>
+                <path class="footer-bar__logo-bracket-3" d="M 378.853 172.259 L 378.657 159.188 C 384.64 158.798 389.193 157.661 392.313 155.775 C 395.434 153.888 397.581 151.319 398.751 148.068 C 399.921 144.816 400.507 141.045 400.507 136.754 C 400.507 134.672 400.441 132.526 400.311 130.315 C 400.181 128.105 399.987 125.828 399.727 123.488 C 399.597 121.796 399.467 120.138 399.337 118.512 C 399.207 116.886 399.141 115.424 399.141 114.124 C 399.141 106.059 400.54 100.012 403.336 95.981 C 406.133 91.948 411.561 88.762 419.626 86.421 C 414.293 84.861 410.131 83.006 407.14 80.861 C 404.149 78.715 402.069 75.919 400.897 72.472 C 399.727 69.026 399.141 64.572 399.141 59.109 C 399.141 57.678 399.207 55.955 399.337 53.939 C 399.467 51.924 399.597 49.875 399.727 47.794 C 399.987 45.454 400.181 43.176 400.311 40.966 C 400.441 38.755 400.507 36.804 400.507 35.114 C 400.507 30.692 399.89 26.888 398.654 23.701 C 397.419 20.515 395.24 18.011 392.119 16.191 C 388.997 14.369 384.446 13.329 378.463 13.069 L 378.657 -0.002 C 385.29 0.258 390.949 1.071 395.63 2.436 C 400.311 3.802 404.116 5.851 407.043 8.582 C 409.969 11.314 412.083 14.792 413.383 19.019 C 414.683 23.245 415.334 28.351 415.334 34.334 C 415.334 36.284 415.269 38.495 415.139 40.966 C 415.009 43.436 414.813 45.908 414.553 48.379 C 414.423 50.461 414.293 52.444 414.163 54.329 C 414.033 56.215 413.969 57.808 413.969 59.109 C 413.969 64.702 415.594 69.188 418.846 72.569 C 422.097 75.952 427.494 78.552 435.037 80.374 L 435.037 92.664 C 427.624 94.745 422.26 97.508 418.943 100.955 C 415.626 104.402 413.969 108.856 413.969 114.318 C 413.969 115.359 414.033 116.725 414.163 118.415 C 414.293 120.106 414.423 121.926 414.553 123.878 C 414.813 126.219 415.009 128.625 415.139 131.096 C 415.269 133.566 415.334 135.908 415.334 138.119 C 415.334 143.972 414.683 148.979 413.383 153.141 C 412.083 157.302 410.001 160.749 407.14 163.481 C 404.279 166.212 400.507 168.292 395.826 169.724 C 391.143 171.154 385.486 171.999 378.853 172.259 Z"/>
+                <path class="footer-bar__logo-bracket-4" d="M 443.816 172.259 L 443.62 159.188 C 449.603 158.798 454.154 157.661 457.276 155.775 C 460.397 153.888 462.543 151.319 463.714 148.068 C 464.884 144.816 465.47 141.045 465.47 136.754 C 465.47 134.672 465.404 132.526 465.274 130.315 C 465.144 128.105 464.95 125.828 464.689 123.488 C 464.559 121.796 464.429 120.138 464.299 118.512 C 464.169 116.886 464.104 115.424 464.104 114.124 C 464.104 106.059 465.501 100.012 468.299 95.981 C 471.094 91.948 476.524 88.762 484.588 86.421 C 479.256 84.861 475.094 83.006 472.103 80.861 C 469.111 78.715 467.03 75.919 465.86 72.472 C 464.689 69.026 464.104 64.572 464.104 59.109 C 464.104 57.678 464.169 55.955 464.299 53.939 C 464.429 51.924 464.559 49.875 464.689 47.794 C 464.95 45.454 465.144 43.176 465.274 40.966 C 465.404 38.755 465.47 36.804 465.47 35.114 C 465.47 30.692 464.851 26.888 463.616 23.701 C 462.381 20.515 460.203 18.011 457.081 16.191 C 453.96 14.369 449.407 13.329 443.424 13.069 L 443.62 -0.002 C 450.253 0.258 455.91 1.071 460.593 2.436 C 465.274 3.802 469.079 5.851 472.006 8.582 C 474.931 11.314 477.044 14.792 478.346 19.019 C 479.646 23.245 480.296 28.351 480.296 34.334 C 480.296 36.284 480.231 38.495 480.101 40.966 C 479.971 43.436 479.776 45.908 479.516 48.379 C 479.386 50.461 479.256 52.444 479.126 54.329 C 478.996 56.215 478.93 57.808 478.93 59.109 C 478.93 64.702 480.556 69.188 483.807 72.569 C 487.058 75.952 492.457 78.552 500 80.374 L 500 92.664 C 492.587 94.745 487.221 97.508 483.906 100.955 C 480.589 104.402 478.93 108.856 478.93 114.318 C 478.93 115.359 478.996 116.725 479.126 118.415 C 479.256 120.106 479.386 121.926 479.516 123.878 C 479.776 126.219 479.971 128.625 480.101 131.096 C 480.231 133.566 480.296 135.908 480.296 138.119 C 480.296 143.972 479.646 148.979 478.346 153.141 C 477.044 157.302 474.964 160.749 472.103 163.481 C 469.241 166.212 465.47 168.292 460.787 169.724 C 456.106 171.154 450.449 171.999 443.816 172.259 Z"/>
+                <g class="footer-bar__logo-letters" style="" transform="matrix(1.428571, 0, 0, 1.428571, -107.142746, -271.430603)">
+                    <path d="M 172.229 323.283 L 172.229 224.823 L 182.744 224.823 L 182.744 229.739 C 184.201 228.829 186.045 227.896 188.275 226.94 C 190.506 225.984 192.895 225.164 195.445 224.482 C 197.994 223.799 200.452 223.457 202.819 223.457 C 211.468 223.457 217.795 226.211 221.801 231.719 C 225.806 237.227 227.809 246.035 227.809 258.144 C 227.809 267.066 226.785 274.19 224.737 279.515 C 222.688 284.841 219.456 288.665 215.041 290.986 C 210.626 293.308 204.913 294.469 197.903 294.469 C 195.08 294.469 192.235 294.287 189.368 293.923 C 186.5 293.558 184.292 293.24 182.744 292.967 L 182.744 323.283 L 172.229 323.283 Z M 197.356 285.183 C 202.273 285.183 206.165 284.272 209.032 282.451 C 211.9 280.631 213.926 277.74 215.109 273.78 C 216.293 269.82 216.885 264.608 216.885 258.144 C 216.885 248.949 215.519 242.462 212.788 238.684 C 210.057 234.906 206.233 233.017 201.317 233.017 C 199.132 233.017 196.878 233.29 194.557 233.836 C 192.235 234.382 190.028 235.042 187.934 235.816 C 185.84 236.59 184.11 237.386 182.744 238.206 L 182.744 283.817 C 184.201 283.999 186.341 284.272 189.163 284.636 C 191.985 285.001 194.716 285.183 197.356 285.183 Z"/>
+                    <path d="M 274.099 293.103 L 274.099 224.823 L 284.614 224.823 L 284.614 229.603 C 286.162 228.692 288.096 227.782 290.418 226.871 C 292.739 225.961 295.22 225.164 297.86 224.482 C 300.501 223.799 303.05 223.457 305.508 223.457 C 311.79 223.457 316.592 224.573 319.915 226.803 C 323.238 229.034 325.537 232.607 326.811 237.523 C 328.086 242.439 328.723 248.903 328.723 256.915 L 328.723 293.103 L 318.071 293.103 L 318.071 257.324 C 318.071 251.407 317.73 246.673 317.047 243.122 C 316.364 239.571 314.999 237 312.95 235.406 C 310.902 233.813 307.784 233.017 303.596 233.017 C 301.32 233.017 298.976 233.267 296.563 233.768 C 294.15 234.268 291.897 234.906 289.803 235.679 C 287.709 236.453 285.98 237.204 284.614 237.933 L 284.614 293.103 L 274.099 293.103 Z"/>
+                </g>
+                <path class="footer-bar__logo-dot" d="M 240.923 147.288 L 240.923 124.464 L 257.504 124.464 L 257.504 147.288 L 240.923 147.288 Z" style=""/>
+            </svg>
+            <div class="footer-bar__copyright">
+                <p>&copy;&nbsp;{{ currentYear }}&nbsp;Paul&nbsp;Nicoué</p>
+            </div>
         </div>
     </footer>
 
 </template>
 
 <script setup>
+
+    // --------------------------------------------------
+    // DATA
+    // --------------------------------------------------
+
+    const currentYear = new Date().getFullYear();
+
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+
+    // --------------------------------------------------
+    // FOOTER STYLE
+    // --------------------------------------------------
 
     footer {
-        padding: 4rem 2rem;
+        width: 100%;
+        padding: 2rem;
     }
 
-    .contact {
-        font-family: var(--title-font-family);
-        font-size: 1.4rem;
-        font-weight: var(--light-font-weight);
-        text-align: center;
+    .footer-bar {
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-        a {
-            text-decoration: none;
+        &__logo {
+            width: auto;
+            height: var(--small-icon-size);
+
+            &-background {
+                fill: var(--primary-color);
+            }
+
+            &-bracket-1 {
+                fill: url(#footer-bar__logo-gradient-1);
+            }
+
+            &-bracket-2 {
+                fill: url(#footer-bar__logo-gradient-2);
+            }
+
+            &-bracket-3 {
+                fill: url(#footer-bar__logo-gradient-3);
+            }
+
+            &-bracket-4 {
+                fill: url(#footer-bar__logo-gradient-4);
+            }
+
+            &-letters {
+                fill: var(--secondary-color);
+            }
+
+            &-dot {
+                fill: var(--accent-color);
+            }
         }
 
-        span {
-            color: var(--accent-color);
+        &__copyright {
+            margin: 0 0 0 0.4rem;
+            font-size: var(--footnote-font-size);
         }
     }
 
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
new file mode 100644
index 0000000..5020c68
--- /dev/null
+++ b/components/AppHeader.vue
@@ -0,0 +1,24 @@
+<template>
+
+    <header>
+        <div class="header-bar">
+        </div>
+    </header>
+
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+
+    // --------------------------------------------------
+    // HEADER STYLE
+    // --------------------------------------------------
+
+    header {
+        width: 100%;
+        height: 0;
+    }
+
+</style>
diff --git a/error.vue b/error.vue
index 4a23c72..ad4a16b 100644
--- a/error.vue
+++ b/error.vue
@@ -2,6 +2,7 @@
     
     <div class="app">
         <AppError class="app__error" :error-message="errorMessage" @handle-error="handleError" />
+        <AppFooter class="app__footer" />
     </div>
 
 </template>
@@ -33,7 +34,7 @@
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
     // --------------------------------------------------
     // LAYOUT
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 126cd12..d56f18b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,9 @@
 export default defineNuxtConfig({
+    css: [
+        'minireset.css',
+        '~/assets/styles/_fonts.scss',
+        '~/assets/styles/_animations.scss'
+    ],
     modules: [
         '@funken-studio/sitemap-nuxt-3'
     ],
@@ -9,5 +14,14 @@ export default defineNuxtConfig({
     },
     sitemap: {
         hostname: 'https://paulnicoue.com'
+    },
+    vite: {
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    additionalData: '@use "@/assets/styles/_variables.scss" as *;' // Global SASS variables import
+                }
+            }
+        }
     }
 })
diff --git a/pages/index.vue b/pages/index.vue
index 491b8ee..16cc4d7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -22,7 +22,11 @@
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+
+    // --------------------------------------------------
+    // INDEX STYLE
+    // --------------------------------------------------
 
     main {
         padding: 4rem 2rem;