+ [navbar] Added style and cogs images for [index page]

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

@@ -1,5 +1,5 @@
 <template>
-    <nav>
+    <nav class="navbar navbar-dark">
         <ul v-if="links.length != 0">
             <li v-for="(link, index) in links" :key="index">
                 <router-link v-bind:to="link.url">{{ link.text }}</router-link>
@@ -25,6 +25,11 @@ export default {
                     text: 'Sortilèges',
                     url: '/spells',
                 },
+                {
+                    id: 2,
+                    text: 'Monde',
+                    url: '/world',
+                },
             ]
         }
     }
@@ -32,13 +37,13 @@ export default {
 </script>
 
 <style lang="scss">
+
     nav {
+        width: 100%;
+        position: fixed;
+        top: 0;
         padding-left: 2rem;
-        font-size: .9rem;
-        color: $black;
-        background: $white;
-        text-transform: uppercase;
-        // box-shadow: 0 0 .5rem rgba($black, .75);
+
         ul {
             display: flex;
             li {
@@ -47,6 +52,12 @@ export default {
                     margin-right: 1rem;
                     padding: 1.5rem;
                     display: block;
+                    font-size: .83rem;
+                    font-weight: $font-bold;
+                    text-transform: uppercase;
+                    text-shadow: none;
+                    transition: text-shadow .5s cubic-bezier(0.645, 0.045, 0.355, 1);
+                    
                     &:after {
                         position: absolute;
                         display: block;
@@ -56,13 +67,42 @@ export default {
                         width: 0;
                         height: 3px;
                         content: '';
-                        background: $black;
-                        transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1);
+                        box-shadow: none;
+                        transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .5s cubic-bezier(0.645, 0.045, 0.355, 1);
                     }
-                    &:hover {
+
+                    &:hover,
+                    &.router-link-exact-active {
+                        @include blue-glow-text(.5);
                         &:after {
                             width: 80%;
                             transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1);
+                            @include blue-glow-box(.5);
+                        }
+                    }
+                }
+            }
+        }
+
+        &.navbar-light {
+            ul {
+                li {
+                    a {
+                        color: $black;
+                        &:after {
+                            background: $black;
+                        }
+                    }
+                }
+            }
+        }
+        &.navbar-dark {
+            ul {
+                li {
+                    a {
+                        color: $white;
+                        &:after {
+                            background: $white;
                         }
                     }
                 }

client/src/components/spells/spell-card.vue

@@ -41,9 +41,7 @@
             </section>
             <hr>
             <section class="spell-description">
-                <p>
-                    {{ description }}
-                </p>
+                <p>{{ description }}</p>
             </section>
             <hr>
             <footer v-if="variables">
@@ -67,10 +65,10 @@ export default {
         name: String,
         description: String,
         level: Number,
-        schools: Array,
-        ingredients: Array,
         charge: Number,
         cost: String,
+        schools: Array,
+        ingredients: Array,
         variables: Array,
     },
     data() {