- Reworked client structure and optimized fonts

client/src/app.vue

@@ -12,3 +12,10 @@ export default {
   name: 'app'
 }
 </script>
+
+<style lang="scss" scoped>
+#srs {
+    min-height: 100vh;
+    background: url('/img/bg1.png') center center fixed repeat;
+}
+</style>

client/src/assets/scss/_fonts.scss

@@ -0,0 +1,36 @@
+
+.font-display{ font-family: 'Playfair Display', serif; }
+.font-weight-100{ font-weight: 100; }
+.font-weight-200{ font-weight: 200; }
+.font-weight-300{ font-weight: 300; }
+.font-weight-400{ font-weight: 400; }
+.font-weight-500{ font-weight: 500; }
+.font-weight-600{ font-weight: 600; }
+.font-weight-700{ font-weight: 700; }
+.font-weight-800{ font-weight: 800; }
+.font-weight-900{ font-weight: 900; }
+
+.line-height-100{ line-height: 100%; }
+
+@font-face{
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/material-design-icons.woff2') format('woff2');
+}
+.mad {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    transform: translateY(12.5%);
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}

client/src/assets/scss/_global.scss

@@ -1,6 +1,5 @@
 // Other global files
 @import '_variables';
-@import '_mixins';
 @import '_fonts';
 
 // RESETS
@@ -13,29 +12,21 @@ html {
     color: $primary--base;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
-}
-
-html *,
-html *::before,
-html *::after {
-    box-sizing: border-box;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    outline: none;
+    * {
+        margin: 0;
+        padding: 0;
+        outline: none;
+        box-sizing: border-box;
+        &:before, &:after {
+            box-sizing: border-box;
+        }
+    }
 }
 
 @at-root {
     @-ms-viewport { width: device-width; }
 }
 
-a {
-    text-decoration: none;
-    color: inherit;
-}
-
 ul {
     list-style-type: none;
 }
@@ -55,11 +46,13 @@ hr {
 .nav-link {
     cursor: pointer;
 }
-
 .btn {
     margin-right: 5px;
 }
 
+.word-break{ word-wrap: break-word; }
+.cursor-pointer{ cursor: pointer; }
+
 // LAYOUTS
 .fullpage {
     min-height: calc(100vh - 56px);

client/src/assets/scss/_mixins.scss

@@ -1,6 +0,0 @@
-@mixin blue-glow-box($radius) {
-    box-shadow: 0 0 .5rem * $radius #fff, 0 0 1rem * $radius $primary--blue, 0 0 2rem * $radius $primary--blue;
-}
-@mixin blue-glow-text($radius) {
-    text-shadow: 0 0 .5rem * $radius #fff, 0 0 1rem * $radius $primary--blue, 0 0 2rem * $radius $primary--blue;
-}

client/src/pages/index-page.vue

@@ -5,7 +5,7 @@
                 <h1 class="title text-dark mb-4 font-display 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" style="font-weight:700;">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">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>
@@ -24,9 +24,14 @@ section {
         width: 1000px;
         .title {
             font-size: 5rem;
-            font-weight: 700;
+            font-weight: 900;
             text-align: center;
         }
+        .lead {
+            .font-display {
+                font-weight: 700;
+            }
+        }
     }
 }
 @media only screen and (max-width: 600px) {