- Navbar fixed top

client/src/app.vue

@@ -15,6 +15,7 @@ export default {
 
 <style lang="scss" scoped>
 #srs {
+    padding-top: 50px;
     min-height: 100vh;
     background: url('./assets/images/bg1.png') center center fixed repeat;
 }

client/src/components/global/navbar/navbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+    <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
         <router-link :to="'/'" class="navbar-brand font-display font-weight-700">Auracle</router-link>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>

client/src/pages/index-page.vue

@@ -2,10 +2,10 @@
     <div class="container-fluid">
         <section class="d-flex justify-content-center align-items-center">
             <main class="px-4">
-                <h1 class="title text-dark mb-4 font-display line-height-100">"C'est magique, ta gueule."</h1>
+                <h1 class="title text-dark mb-4 font-display font-weight-black line-height-100">"C'est magique, ta gueule."</h1>
                 <div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
                 <hr class="w-50">
-                <div class="lead"><span class="font-display">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div>
+                <div class="lead"><span class="font-display font-weight-bold">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div>
             </main>
         </section>
     </div>
@@ -23,20 +23,19 @@ section {
     main {
         width: 1000px;
         .title {
-            font-size: 5rem;
+            color: $white;
-            font-weight: 900;
+            font-size: 64px;
             text-align: center;
         }
-        .lead {
+    }
-            .font-display {
+}
-                font-weight: 700;
+@media only screen and (max-width: $bp-md) {
+    section {
+        main {
+            .title {
+                font-size: 48px;
             }
         }
     }
 }
-@media only screen and (max-width: 600px) {
-    .title {
-        font-size: 3.5rem;
-    }
-}
 </style>