Merge branch 'dev'

index.html

@@ -6,7 +6,6 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="preload" href="src/assets/fonts/MonaspaceKrypton.ttf" as="font" type="font/ttf" crossorigin>
     <link rel="manifest" href="/site.webmanifest">
     <link rel="canonical" href="https://hfidelis.github.io">
     <meta name="theme-color" content="#2b3439" />

src/App.vue

@@ -1,14 +1,38 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { RouterView } from 'vue-router'
 import HeaderComponent from './components/Header/HeaderComponent.vue'
 </script>
 
 <template>
   <div>
     <HeaderComponent />
-    <RouterView />
+    <RouterView
+      v-slot="{
+        Component,
+        route
+      }"
+    >
+      <Transition
+        name="fade"
+        mode="out-in"
+      >
+        <component
+          :is="Component"
+          :key="route.path"
+        />
+      </Transition>
+    </RouterView>
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.45s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

src/styles/app.scss

@@ -8,7 +8,7 @@
 @font-face {
     font-family: 'Monaspace Krypton', monospace;
     src: url('../assets/fonts/MonaspaceKrypton.ttf') format('truetype');
-    font-display: block;
+    font-display: swap;
 }
 
 * {

src/styles/classes.scss

@@ -1,5 +1,18 @@
 @import './variables.scss';
 
+.view__container {
+    min-height: 70dvh !important;
+    width: 100vw !important;
+}
+
+.h-100 {
+    height: 100% !important;
+}
+
+.w-100 {
+    width: 100% !important;
+}
+
 .header__mobile__item {
     height: $header-item-height !important;
     width: $header-item-width !important;

src/views/NotFoundView/NotFound.vue

@@ -7,7 +7,7 @@ import { RouterLink } from 'vue-router'
 <template>
   <main>
     <section
-      class="not__found__wrapper"
+      class="not__found__wrapper view__container"
     >
       <img
         :src="notFound"
@@ -46,10 +46,8 @@ main {
   
   > .not__found__wrapper {
     @include flex(column, center, center);
-    min-height: 60dvh;
-    width: 100%;
 
-    padding: 3rem 2rem;
+    padding: 3rem 3rem;
 
     > .not__found__image {
       max-width: 350px;
@@ -92,17 +90,17 @@ main {
         border-radius: $radius-lg;
         padding: 0.8rem 1rem;
 
-        transition: background-color 0.3s ease;
+        transition: all 0.3s ease;
 
         margin-top: 1rem;
 
         @media screen and (max-width: 600px) {
           font-size: $text-sm;
-          padding: 0.6rem 0.4rem;
         }
 
         &:hover {
           background-color: $darker-cyan;
+          box-shadow: 0 0.1rem 1.0rem 0.1rem rgba(39, 222, 192, 0.2);
         }
       }
     }