Added style of celestials page and fixed width issues

src/assets/scss/_animations.scss

@@ -7,6 +7,24 @@
   }
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 100%;
+  }
+}
+
+@keyframes fromBottom {
+  from {
+    transform: translateY(20px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
 @keyframes paneBgAround {
   0% {
     background-position: -10vw 0%;
@@ -18,3 +36,13 @@
     background-position: -10vw 0%;
   }
 }
+
+.fade-in-children {
+  @for $i from 1 through 10 {
+    :nth-child(#{$i}) {
+      opacity: 0;
+      animation: fadeIn 1.5s ease-in-out 1s 1 forwards, fromBottom 1.5s ease-in-out 1s 1 forwards;
+      animation-delay: 0.25s + $i * 0.25s;
+    }
+  }
+}

src/assets/scss/_global.scss

@@ -17,7 +17,7 @@ h1, h2, h3, h4, h5, h6 {
   font-family: $heading-font-family;
   font-weight: $fw-regular;
 }
-h1 { font-size: 30px; }
+h1 { font-size: 50px; }
 h2 { font-size: 25px; }
 h3 { font-size: 22px; }
 h4 { font-size: 18px; }
@@ -25,7 +25,7 @@ h4 { font-size: 18px; }
 .heading {
   &-1 {
     margin-bottom: 20px;
-    font-size: 30px;
+    font-size: 50px;
     font-weight: $fw-semibold;
   }
   &-2 {

src/components/Navbar.vue

@@ -45,11 +45,12 @@ export default defineComponent({
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
+  width: 100%;
   height: 70px;
   padding: 0 20px;
   background: $fs-black;
   box-shadow: 0 5px 5px rgba($black, 0.3);
+  z-index: 9999;
 
   &:after {
     position: absolute;

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="home">
-    <div class="splash">
+    <div class="splash fade-in-children">
       <h2 class="heading-1">Full Skies</h2>
       <p class="heading-2">
         L'application Full Skies explore les cieux à votre place !
@@ -43,14 +43,8 @@ export default defineComponent({
     z-index: -1;
     opacity: 0;
     pointer-events: none;
-    animation: fadeInBg 5s ease-out 1s 1 forwards,
-      paneBgAround 35s ease-in-out 1s infinite forwards;
-  }
-
-  .splash {
-    .heading-1 {
-      font-size: 50px;
-    }
+    animation: fadeInBg 2s ease-out 0s 1 forwards,
+      paneBgAround 35s ease-in-out 0s infinite forwards;
   }
 }
 </style>

src/views/celestials/Celestials.vue

@@ -1,6 +1,8 @@
 <template>
   <section class="celestials">
-    <h2>Le système solaire</h2>
+    <header>
+      <h1 class="heading-1">Le système solaire</h1>
+    </header>
     <div class="section-content">
       <celestials-list :celestials="celestials" />
     </div>
@@ -41,3 +43,27 @@ export default defineComponent({
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.celestials {
+  position: relative;
+  min-height: inherit;
+  padding: 25px 10%;
+
+  &:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-image: url("/celestials_bg-min.jpg");
+    background-size: cover;
+    background-attachment: fixed;
+    z-index: -1;
+    opacity: 33%;
+    pointer-events: none;
+  }
+}
+</style>