From 412402404b6f0a3b83e47d016f17160c3436c2d5 Mon Sep 17 00:00:00 2001
From: Alexis <alexis@agence-polux.fr>
Date: Thu, 9 Apr 2020 21:01:05 +0200
Subject: [PATCH] + [navbar] Added style and cogs images for [index page]

---
 client/src/app.vue                            | 11 ++--
 client/src/assets/images/cog-1.svg            |  1 +
 client/src/assets/images/cog-2.svg            |  1 +
 client/src/assets/images/cog-3.svg            |  1 +
 client/src/assets/images/cog-4.svg            |  1 +
 client/src/assets/images/cog-5.svg            |  1 +
 client/src/assets/scss/_global.scss           |  6 +-
 client/src/assets/scss/_mixins.scss           |  6 ++
 client/src/assets/scss/_variables.scss        | 10 +++-
 .../src/components/global/navbar/navbar.vue   | 58 ++++++++++++++++---
 client/src/components/spells/spell-card.vue   |  8 +--
 client/src/pages/index-page.vue               | 57 ++++++++++++++++++
 client/src/pages/index.vue                    | 15 -----
 .../src/pages/{spells.vue => spells-page.vue} |  4 +-
 client/src/pages/world-page.vue               | 15 +++++
 client/src/routes.js                          |  8 ++-
 16 files changed, 159 insertions(+), 44 deletions(-)
 create mode 100644 client/src/assets/images/cog-1.svg
 create mode 100644 client/src/assets/images/cog-2.svg
 create mode 100644 client/src/assets/images/cog-3.svg
 create mode 100644 client/src/assets/images/cog-4.svg
 create mode 100644 client/src/assets/images/cog-5.svg
 create mode 100644 client/src/pages/index-page.vue
 delete mode 100644 client/src/pages/index.vue
 rename client/src/pages/{spells.vue => spells-page.vue} (83%)
 create mode 100644 client/src/pages/world-page.vue

diff --git a/client/src/app.vue b/client/src/app.vue
index 2952010..d7c4507 100644
--- a/client/src/app.vue
+++ b/client/src/app.vue
@@ -1,7 +1,10 @@
 <template>
     <div id="srs">
 
-        <navigation/>
+        <header>
+            <navigation/>
+        </header>
+        
         <router-view/>
 
     </div>
@@ -22,10 +25,4 @@ export default {
 
 <style lang="scss">
 
-    #srs {
-        font-family: Avenir, Helvetica, Arial, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-    }
-
 </style>
diff --git a/client/src/assets/images/cog-1.svg b/client/src/assets/images/cog-1.svg
new file mode 100644
index 0000000..3992225
--- /dev/null
+++ b/client/src/assets/images/cog-1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M93,49.1c-2.4-0.5-4.5-1.5-5.1-4.4c-0.5-2.9,1.8-4,4.1-5.3c0.7-0.4,1.2-0.8,1.4-1.2c-0.2-0.7-0.4-1.4-0.6-2.1  c-0.5-0.3-1.1-0.5-2.1-0.4c-2.5,0.3-4.8,0-6.2-2.6c-1.4-2.6,0.5-4.3,2.2-6.3c0.5-0.6,0.8-1.1,0.9-1.4c-0.4-0.6-0.9-1.3-1.3-1.9  c-0.5-0.1-1.2,0-2,0.3c-2.3,1-4.6,1.5-6.7-0.6c-2.1-2-0.9-4.3,0.2-6.7c0.3-0.6,0.4-1.2,0.4-1.5c-0.6-0.5-1.3-1-2-1.5  c-0.5,0.1-1,0.4-1.6,0.9c-1.8,1.7-3.9,2.8-6.5,1.5s-2.2-3.8-1.9-6.4c0.1-0.7,0-1.2,0-1.5c-0.8-0.3-1.6-0.6-2.4-0.9  c-0.4,0.2-0.8,0.7-1.2,1.3c-1.2,2.1-2.8,3.9-5.7,3.5S53.7,9,53.1,6.5c-0.1-0.6-0.3-1.1-0.5-1.4C51.8,5,50.9,5,50,5c0,0,0,0,0,0  c-0.3,0.4-0.6,0.9-0.7,1.6c-0.5,2.4-1.5,4.5-4.4,5.1c-2.9,0.5-4-1.8-5.3-4.1c-0.3-0.5-0.6-0.9-0.9-1.2c-0.9,0.2-1.7,0.5-2.5,0.7  c-0.2,0.4-0.3,1-0.2,1.7c0.3,2.5,0,4.8-2.6,6.2c-2.6,1.4-4.3-0.5-6.3-2.2c-0.5-0.4-0.9-0.7-1.2-0.8c-0.7,0.5-1.5,1-2.2,1.5  c0,0.5,0.1,1,0.4,1.7c1,2.3,1.5,4.6-0.6,6.7c-2,2.1-4.3,0.9-6.7-0.2c-0.6-0.3-1.1-0.4-1.4-0.4c-0.6,0.7-1.1,1.3-1.6,2  c0.1,0.5,0.4,1,0.9,1.5c1.7,1.8,2.8,3.9,1.5,6.5s-3.8,2.2-6.4,1.9c-0.7-0.1-1.2,0-1.6,0c-0.3,0.8-0.6,1.5-0.9,2.3  C7.6,36.1,8,36.6,8.7,37c2.1,1.2,3.9,2.8,3.5,5.7s-2.9,3.2-5.5,3.8c-0.7,0.2-1.2,0.4-1.6,0.6C5,47.9,5,48.7,5,49.5  c0.4,0.4,0.9,0.7,1.8,0.9c2.4,0.5,4.5,1.5,5.1,4.4c0.5,2.9-1.8,4-4.1,5.3c-0.7,0.4-1.1,0.8-1.4,1.1c0.2,0.7,0.4,1.4,0.6,2.1  c0.5,0.3,1.1,0.5,2.1,0.3c2.5-0.3,4.8,0,6.2,2.6c1.4,2.6-0.5,4.3-2.2,6.3c-0.6,0.7-0.9,1.2-1,1.6c0.4,0.6,0.7,1.1,1.1,1.7  c0.5,0.1,1.3,0.1,2.2-0.3c2.3-1,4.6-1.5,6.7,0.6c2.1,2,0.9,4.3-0.2,6.7c-0.4,0.9-0.5,1.5-0.5,2c0.5,0.4,1,0.8,1.5,1.1  c0.6,0,1.3-0.2,2.1-1c1.8-1.7,3.9-2.8,6.5-1.5c2.6,1.3,2.2,3.8,1.9,6.4c-0.1,1.1,0,1.7,0.2,2.1c0.5,0.2,1,0.4,1.6,0.6  c0.6-0.1,1.3-0.6,1.9-1.6c1.2-2.1,2.8-3.9,5.7-3.5c2.9,0.4,3.2,2.9,3.8,5.5c0.2,1.1,0.6,1.7,0.9,2c0.5,0,1,0,1.6,0.1  c0.5-0.3,1.1-0.9,1.3-2.1c0.5-2.4,1.5-4.5,4.4-5.1c2.9-0.5,4,1.8,5.3,4.1c0.6,1,1.1,1.4,1.5,1.6c0.5-0.1,1-0.3,1.4-0.4  c0.4-0.4,0.8-1.2,0.7-2.5c-0.3-2.5,0-4.8,2.6-6.2c2.6-1.4,4.3,0.5,6.3,2.2c0.8,0.8,1.5,1,1.9,1.1c0.4-0.3,0.8-0.6,1.3-0.9  c0.2-0.5,0.4-1.4-0.2-2.5c-1-2.3-1.5-4.6,0.6-6.7c2-2.1,4.3-0.9,6.7,0.2c1,0.4,1.7,0.5,2.1,0.4c0.3-0.4,0.7-0.9,1-1.3  c0-0.6-0.1-1.4-1-2.3c-1.7-1.8-2.8-3.9-1.5-6.5c1.3-2.6,3.8-2.2,6.4-1.9c1,0.1,1.7,0,2.1-0.2c0.2-0.6,0.4-1.1,0.6-1.7  c-0.2-0.6-0.6-1.2-1.6-1.8c-2.1-1.2-3.9-2.8-3.5-5.7c0.4-2.9,2.9-3.2,5.5-3.8c0.9-0.2,1.5-0.5,1.8-0.7c0-0.7,0-1.3,0.1-2  C94.7,49.8,94.1,49.3,93,49.1z M27.1,68.5c-1.8,0.3-4.1,0.1-5.6-2.7c-2.7-4.5-4.6-12.7-4.1-15.4c0.5-2.7,1.9-3.7,4.3-4.1  s4.1,1.9,4.6,5.5c0.5,3.4,1.7,7.7,3.3,10.5C31.1,65.1,28.9,68.2,27.1,68.5z M25.2,33.7c-0.8-1.6-1.4-3.8,0.8-6.2  c3.4-3.9,10.7-8.3,13.4-8.6c2.7-0.3,4.2,0.6,5.2,2.8c1.1,2.1-0.6,4.5-3.8,6c-3.1,1.5-6.8,4-9,6.4C29.7,36.4,26.1,35.3,25.2,33.7z   M60.7,77.5c-0.3,1.8-1.1,3.9-4.3,4.5c-5.1,1.2-13.5,0.4-15.9-0.9c-2.4-1.3-3-3-2.6-5.3c0.4-2.4,3.1-3.3,6.6-2.6  c3.4,0.6,7.8,0.8,11,0.1C58.8,72.7,61,75.7,60.7,77.5z M50,68c-9.9,0-18-8.1-18-18s8.1-18,18-18s18,8.1,18,18S59.9,68,50,68z   M68.3,34.2c-2.4-2.5-5.9-5.2-8.8-6.6c-2.9-1.4-3-5.2-1.7-6.5c1.3-1.3,3.2-2.5,6.1-1.1c4.8,2.1,11.2,7.6,12.3,10.1  c1.2,2.5,0.7,4.1-1,5.8C73.6,37.6,70.8,36.8,68.3,34.2z M82.7,53.8c-0.5,5.2-3.8,13-5.8,14.9c-2,1.9-3.7,1.9-5.9,0.8  c-2.1-1.1-2.2-4-0.5-7.1c1.6-3,3.1-7.2,3.5-10.4c0.4-3.2,4-4.4,5.6-3.6C81.4,49.1,83.1,50.6,82.7,53.8z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Johannes S</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
\ No newline at end of file
diff --git a/client/src/assets/images/cog-2.svg b/client/src/assets/images/cog-2.svg
new file mode 100644
index 0000000..654584f
--- /dev/null
+++ b/client/src/assets/images/cog-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M98,53.9v-7.6l-8.3-2c-0.2-1.5-0.4-2.9-0.7-4.3l7.1-5.1l-2.9-7.1l-8.6,1.5c-0.7-1.2-1.5-2.3-2.3-3.4l4.6-7.4  l-5.4-5.4l-7.4,4.6c-1.2-0.9-2.4-1.7-3.6-2.4l1.4-8.6l-7.1-2.9l-5,7.1c-1.3-0.3-2.7-0.4-4.1-0.6l-2-8.3h-7.6l-2,8.3  c-1.5,0.2-2.9,0.4-4.3,0.7l-5.1-7.1l-7.1,2.9l1.5,8.6c-1.2,0.7-2.3,1.5-3.4,2.3l-7.4-4.6l-5.4,5.4l4.6,7.4c-0.9,1.2-1.7,2.4-2.4,3.6  l-8.6-1.4l-2.9,7.1l7.1,5c-0.3,1.3-0.8,2.7-1,4.1l-8.7,2v7.6l8.7,2c0.2,1.5,0.6,2.9,1,4.3l-7,5.1l3,7.1l8.6-1.5  c0.7,1.2,1.5,2.3,2.3,3.4l-4.6,7.4l5.4,5.4l7.4-4.6c1.2,0.9,2.4,1.7,3.6,2.4L28,93.5l7.1,2.9l5-7.1c1.3,0.3,2.7,0.8,4.1,1l2,8.7h7.6  l2-8.7c1.5-0.2,2.9-0.6,4.3-1l5.1,7l7.1-3l-1.5-8.6c1.2-0.7,2.3-1.5,3.4-2.3l7.4,4.6l5.4-5.4l-4.6-7.4c0.9-1.2,1.7-2.4,2.4-3.6  l8.6,1.4l2.9-7.1l-7.1-5c0.3-1.3,0.4-2.7,0.6-4.1L98,53.9z M73.5,55.2c-0.6,3.2-1.9,6.2-3.7,8.9c1.8,1.9,1.8,4.8,0,6.7  c-1.8,1.8-4.8,1.9-6.7,0c-2.6,1.8-5.7,3.1-8.9,3.7c0,2.6-2.1,4.7-4.7,4.7s-4.7-2.1-4.7-4.7c-3.2-0.6-6.2-1.9-8.9-3.7  c-1.9,1.8-4.8,1.8-6.7,0c-1.8-1.8-1.9-4.8,0-6.7c-1.8-2.6-3.1-5.7-3.7-8.9c-2.6,0-4.7-2.1-4.7-4.7s2.1-4.7,4.7-4.7  c0.6-3.2,1.9-6.2,3.7-8.9c-1.8-1.9-1.8-4.8,0-6.7c1.8-1.8,4.8-1.9,6.7,0c2.6-1.8,5.7-3.1,8.9-3.7c0-2.6,2.1-4.7,4.7-4.7  s4.7,2.1,4.7,4.7c3.2,0.6,6.2,1.9,8.9,3.7c1.9-1.8,4.8-1.8,6.7,0c1.8,1.8,1.9,4.8,0,6.7c1.8,2.6,3.1,5.7,3.7,8.9  c2.6,0,4.7,2.1,4.7,4.7S76.1,55.2,73.5,55.2z"/><path d="M68.8,50.5c0-2.3,1.6-4.2,3.8-4.7c-0.6-3-1.8-5.9-3.5-8.3c-1.8,1.2-4.3,1-6-0.6c-1.6-1.6-1.8-4.1-0.6-6  c-2.5-1.7-5.3-2.9-8.3-3.5c-0.4,2.2-2.4,3.8-4.7,3.8s-4.2-1.6-4.7-3.8c-3,0.6-5.9,1.8-8.3,3.5c1.2,1.8,1,4.3-0.6,6  c-1.6,1.6-4.1,1.8-6,0.6c-1.7,2.5-2.9,5.3-3.5,8.3c2.2,0.4,3.8,2.4,3.8,4.7s-1.6,4.2-3.8,4.7c0.6,3,1.8,5.9,3.5,8.3  c1.8-1.2,4.3-1,6,0.6c1.6,1.6,1.8,4.1,0.6,6c2.5,1.7,5.3,2.9,8.3,3.5c0.4-2.2,2.4-3.8,4.7-3.8s4.2,1.6,4.7,3.8  c3-0.6,5.9-1.8,8.3-3.5c-1.2-1.8-1-4.3,0.6-6c1.6-1.6,4.1-1.8,6-0.6c1.7-2.5,2.9-5.3,3.5-8.3C70.4,54.7,68.8,52.8,68.8,50.5z   M49.5,62.2c-6.8,0-12.2-5.5-12.2-12.2s5.5-12.2,12.2-12.2S61.8,43.2,61.8,50S56.3,62.2,49.5,62.2z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by jayson lim</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
\ No newline at end of file
diff --git a/client/src/assets/images/cog-3.svg b/client/src/assets/images/cog-3.svg
new file mode 100644
index 0000000..188df43
--- /dev/null
+++ b/client/src/assets/images/cog-3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 125" version="1.1" xml:space="preserve" style="" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.41421"><g transform="matrix(1.9721,0,0,1.9952,-72.6849,-77.2885)"><path d="M68.801,43.391C64.516,42.007 59.904,42.007 55.62,43.391L57.024,47.738C56.163,48.016 55.327,48.363 54.522,48.775L52.441,44.707C48.432,46.759 45.171,50.02 43.12,54.028L47.188,56.109C46.776,56.914 46.429,57.751 46.151,58.611L41.803,57.207C40.42,61.491 40.42,66.103 41.803,70.388L46.151,68.984C46.429,69.844 46.776,70.68 47.188,71.485L43.12,73.567C45.171,77.575 48.432,80.836 52.441,82.887L54.522,78.82C55.327,79.232 56.163,79.578 57.024,79.856L55.62,84.204C59.904,85.588 64.516,85.588 68.801,84.204L67.396,79.856C68.257,79.578 69.093,79.232 69.898,78.82L71.98,82.887C75.988,80.836 79.249,77.575 81.3,73.567L77.233,71.485C77.645,70.68 77.991,69.844 78.269,68.984L82.617,70.388C84.001,66.103 84.001,61.491 82.617,57.207L78.269,58.611C77.991,57.751 77.645,56.914 77.233,56.109L81.3,54.028C79.249,50.02 75.988,46.759 71.98,44.707L69.898,48.775C69.093,48.363 68.257,48.016 67.396,47.738L68.801,43.391ZM62.21,57.799C65.521,57.799 68.209,60.487 68.209,63.797C68.209,67.108 65.521,69.796 62.21,69.796C58.899,69.796 56.212,67.108 56.212,63.797C56.212,60.487 58.899,57.799 62.21,57.799Z" style="" fill="black"/></g><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Veronika Krpciarova</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
\ No newline at end of file
diff --git a/client/src/assets/images/cog-4.svg b/client/src/assets/images/cog-4.svg
new file mode 100644
index 0000000..54b2c1f
--- /dev/null
+++ b/client/src/assets/images/cog-4.svg
@@ -0,0 +1 @@
+<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><switch><foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"/><g i:extraneous="self"><path d="M97.5,52.7v-5.4l-6.2-0.6c0-0.2,0-0.4,0-0.7l6-1.7l-0.9-5.3l-6.3,0.5c-0.1-0.2-0.1-0.4-0.2-0.6l5.7-2.7l-1.8-5.1l-6.1,1.6    c-0.1-0.2-0.2-0.4-0.3-0.6l5.1-3.6l-2.7-4.7l-5.7,2.6c-0.1-0.2-0.3-0.3-0.4-0.5l4.4-4.5l-3.5-4.1L79.5,21    c-0.2-0.2-0.3-0.3-0.5-0.5l3.6-5.2l-4.1-3.5L74,16.3c-0.2-0.1-0.3-0.3-0.5-0.4l2.6-5.7l-4.7-2.7l-3.6,5.1    c-0.2-0.1-0.4-0.2-0.6-0.3l1.6-6.1l-5.1-1.8L61,10.1c-0.2-0.1-0.4-0.1-0.6-0.2l0.5-6.3l-5.3-0.9l-1.7,6c-0.2,0-0.4,0-0.7,0    l-0.6-6.2h-5.4l-0.6,6.2c-0.2,0-0.4,0-0.7,0l-1.7-6l-5.3,0.9l0.5,6.3c-0.2,0.1-0.4,0.1-0.6,0.2l-2.7-5.7l-5.1,1.8l1.6,6.1    c-0.2,0.1-0.4,0.2-0.6,0.3l-3.6-5.1l-4.7,2.7l2.6,5.7c-0.2,0.1-0.3,0.3-0.5,0.4l-4.5-4.4l-4.1,3.5l3.6,5.2    c-0.2,0.2-0.3,0.3-0.5,0.5l-5.2-3.6l-3.5,4.1l4.4,4.5c-0.1,0.2-0.3,0.3-0.4,0.5l-5.7-2.6l-2.7,4.7l5.1,3.6    c-0.1,0.2-0.2,0.4-0.3,0.6l-6.1-1.6l-1.8,5.1l5.7,2.7c-0.1,0.2-0.1,0.4-0.2,0.6l-6.3-0.5l-0.9,5.3l6,1.7c0,0.2,0,0.4,0,0.7    l-6.2,0.6v5.4l6.2,0.6c0,0.2,0,0.4,0,0.7l-6,1.7l0.9,5.3l6.3-0.5c0.1,0.2,0.1,0.4,0.2,0.6l-5.7,2.7l1.8,5.1l6.1-1.6    c0.1,0.2,0.2,0.4,0.3,0.6l-5.1,3.6l2.7,4.7l5.7-2.6c0.1,0.2,0.3,0.3,0.4,0.5l-4.4,4.5l3.5,4.1l5.2-3.6c0.2,0.2,0.3,0.3,0.5,0.5    l-3.6,5.2l4.1,3.5l4.5-4.4c0.2,0.1,0.3,0.3,0.5,0.4l-2.6,5.7l4.7,2.7l3.6-5.1c0.2,0.1,0.4,0.2,0.6,0.3l-1.6,6.1l5.1,1.8l2.7-5.7    c0.2,0.1,0.4,0.1,0.6,0.2l-0.5,6.3l5.3,0.9l1.7-6c0.2,0,0.4,0,0.7,0l0.6,6.2h5.4l0.6-6.2c0.2,0,0.4,0,0.7,0l1.7,6l5.3-0.9    l-0.5-6.3c0.2-0.1,0.4-0.1,0.6-0.2l2.7,5.7l5.1-1.8l-1.6-6.1c0.2-0.1,0.4-0.2,0.6-0.3l3.6,5.1l4.7-2.7l-2.6-5.7    c0.2-0.1,0.3-0.3,0.5-0.4l4.5,4.4l4.1-3.5L79,79.5c0.2-0.2,0.3-0.3,0.5-0.5l5.2,3.6l3.5-4.1L83.7,74c0.1-0.2,0.3-0.3,0.4-0.5    l5.7,2.6l2.7-4.7l-5.1-3.6c0.1-0.2,0.2-0.4,0.3-0.6l6.1,1.6l1.8-5.1L89.9,61c0.1-0.2,0.1-0.4,0.2-0.6l6.3,0.5l0.9-5.3l-6-1.7    c0-0.2,0-0.4,0-0.7L97.5,52.7z M50,57.8c-4.3,0-7.8-3.5-7.8-7.8s3.5-7.8,7.8-7.8s7.8,3.5,7.8,7.8S54.3,57.8,50,57.8z M53.4,35.9    V15.7c10.2,1,19,6.3,24.7,14.2L60.5,40C58.6,38,56.2,36.5,53.4,35.9z M46.6,35.9c-2.8,0.7-5.3,2.1-7.2,4.1L21.9,29.9    c5.7-7.9,14.5-13.2,24.7-14.2V35.9z M18.5,35.7l17.6,10.1c-0.4,1.3-0.7,2.7-0.7,4.2c0,1.4,0.3,2.8,0.7,4.1L18.5,64.3    c-2-4.4-3.2-9.2-3.2-14.3C15.3,44.9,16.5,40.1,18.5,35.7z M39.5,60c1.9,2,4.4,3.5,7.2,4.1v20.2c-10.2-1-19.1-6.3-24.7-14.2    L39.5,60z M53.4,64.1c2.8-0.7,5.2-2.1,7.2-4.1l17.6,10.1C72.4,78,63.6,83.3,53.4,84.3V64.1z M81.5,64.3L63.9,54.1    c0.4-1.3,0.7-2.7,0.7-4.1c0-1.5-0.3-2.8-0.7-4.2l17.6-10.1c2,4.4,3.2,9.2,3.2,14.3C84.7,55.1,83.5,59.9,81.5,64.3z"/></g></switch><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Alice Design</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
\ No newline at end of file
diff --git a/client/src/assets/images/cog-5.svg b/client/src/assets/images/cog-5.svg
new file mode 100644
index 0000000..bccc6bb
--- /dev/null
+++ b/client/src/assets/images/cog-5.svg
@@ -0,0 +1 @@
+<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><switch><foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"/><g i:extraneous="self"><path d="M97.5,55.5V44.5l-10.3-1c-0.4-2.2-1-4.4-1.7-6.4l8.4-6l-5.5-9.6L79,25.7c-1.4-1.7-3-3.3-4.7-4.7l4.3-9.4L69,6.1l-6,8.4    c-2.1-0.8-4.2-1.3-6.4-1.7l-1-10.3H44.5l-1,10.3c-2.2,0.4-4.4,1-6.4,1.7l-6-8.4l-9.6,5.5l4.3,9.4c-1.7,1.4-3.3,3-4.7,4.7l-9.4-4.3    L6.1,31l8.4,6c-0.8,2.1-1.3,4.2-1.7,6.4l-10.3,1v11.1l10.3,1c0.4,2.2,1,4.4,1.7,6.4l-8.4,6l5.5,9.6l9.4-4.3c1.4,1.7,3,3.3,4.7,4.7    l-4.3,9.4l9.6,5.5l6-8.4c2.1,0.8,4.2,1.3,6.4,1.7l1,10.3h11.1l1-10.3c2.2-0.4,4.4-1,6.4-1.7l6,8.4l9.6-5.5L74.3,79    c1.7-1.4,3.3-3,4.7-4.7l9.4,4.3l5.5-9.6l-8.4-6c0.8-2.1,1.3-4.2,1.7-6.4L97.5,55.5z M78.7,50c0,3.6-0.7,7-2,10.2l-12.1-7    c0.2-1.1,0.4-2.1,0.4-3.3c0-1.1-0.1-2.2-0.4-3.3l12.1-7C78,43,78.7,46.4,78.7,50z M21.3,50c0-3.6,0.7-7.1,2-10.2l12.1,7    c-0.2,1.1-0.4,2.2-0.4,3.3c0,1.1,0.1,2.2,0.4,3.3l-12.1,7C22,57,21.3,53.6,21.3,50z M44,50c0-3.3,2.7-6,6-6c3.3,0,6,2.7,6,6    c0,3.3-2.7,6-6,6C46.7,56,44,53.3,44,50z M60.2,38.9c-1.6-1.5-3.5-2.6-5.6-3.2V21.7c7.1,1.1,13.3,4.9,17.7,10.3L60.2,38.9z     M45.4,35.7c-2.1,0.7-4,1.8-5.6,3.2l-12-6.9c4.4-5.3,10.5-9.1,17.6-10.2V35.7z M39.9,61.1c1.6,1.5,3.5,2.5,5.6,3.2v14    c-7.1-1.1-13.3-4.9-17.6-10.2L39.9,61.1z M54.5,64.3c2.1-0.7,4-1.8,5.6-3.2l12,7c-4.4,5.4-10.5,9.1-17.7,10.2V64.3z"/></g></switch><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Alice Design</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
\ No newline at end of file
diff --git a/client/src/assets/scss/_global.scss b/client/src/assets/scss/_global.scss
index 9d7e10f..64fc700 100644
--- a/client/src/assets/scss/_global.scss
+++ b/client/src/assets/scss/_global.scss
@@ -1,12 +1,16 @@
+// Other global files
 @import '_variables';
 @import '_mixins';
 @import '_fonts';
 
+// Theme fonts
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Montserrat:wght@600;700&display=swap');
+
 // RESETS
 html {
     box-sizing: border-box;
     font-size: $font-size-root;
-    -ms-overflow-style: scrollbar;
+    font-family: $font-family;
     height: 100%;
     -webkit-overflow-scrolling: touch;
     line-height: 1.15;
diff --git a/client/src/assets/scss/_mixins.scss b/client/src/assets/scss/_mixins.scss
index e69de29..14f2386 100644
--- a/client/src/assets/scss/_mixins.scss
+++ b/client/src/assets/scss/_mixins.scss
@@ -0,0 +1,6 @@
+@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;
+}
\ No newline at end of file
diff --git a/client/src/assets/scss/_variables.scss b/client/src/assets/scss/_variables.scss
index 3b3e362..1d2427c 100644
--- a/client/src/assets/scss/_variables.scss
+++ b/client/src/assets/scss/_variables.scss
@@ -3,6 +3,7 @@
 // Global colours
 $white: #FFF;
 $black: #000;
+$dull--black: #0D0D0D;
 
 $primary--base: #2c3e50;
 $primary--blue: #599EF4;
@@ -12,12 +13,15 @@ $valid: #6AC47B;
 $warning: #F7A758;
 $alert: #F44E4E;
 
-
 // Spell colours
 $spell-card--innerborder: #f5ebd8;
 
-// FONT FAMILY
-$font-family: 'Overpass', sans-serif;
+// FONT FAMILY BASES
+$font-family: 'Lato', sans-serif;
+
+$font-light: 300;
+$font-regular: 400;
+$font-bold: 700;
 
 $font-size-root: 15px !default;
 $font-size-base: 1.2rem !default;
diff --git a/client/src/components/global/navbar/navbar.vue b/client/src/components/global/navbar/navbar.vue
index 2f28578..ad1ec64 100644
--- a/client/src/components/global/navbar/navbar.vue
+++ b/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;
                         }
                     }
                 }
diff --git a/client/src/components/spells/spell-card.vue b/client/src/components/spells/spell-card.vue
index 3eee931..8f87926 100644
--- a/client/src/components/spells/spell-card.vue
+++ b/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() {
diff --git a/client/src/pages/index-page.vue b/client/src/pages/index-page.vue
new file mode 100644
index 0000000..6563d03
--- /dev/null
+++ b/client/src/pages/index-page.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="home-page">
+        <section class="landing">
+            <div class="splash-title">
+                <h1>Auracle</h1>
+                <div>
+                    <p>Recueil de savoirs arcaniques et ésotériques des contrées lointaines de Léïm</p>
+                    <p>Découvrez ses sortilèges et maléfices...</p>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'index',
+}
+</script>
+
+<style lang="scss">
+    .home-page {
+        .landing {
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: $dull--black;
+
+            .splash-title {
+                padding-bottom: 1rem;
+                color: $white;
+                text-align: center;
+                @include blue-glow-text(.8);
+
+                h1 {
+                    margin-bottom: 1.5rem;
+                    font-size: 4rem;
+                    font-family: 'Montserrat', sans-serif;
+                    font-weight: $font-bold;
+                    text-transform: uppercase;
+                }
+
+                div {
+                    padding-top: 1rem;
+                    p {
+                        margin-bottom: 1.5rem;
+                        font-size: 1.2rem;
+                        font-style: italic;
+                    }
+                }
+
+            }
+
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
deleted file mode 100644
index 60c45fd..0000000
--- a/client/src/pages/index.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-    <div class="home-page">
-        <p>This is the home page</p>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'index',
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/client/src/pages/spells.vue b/client/src/pages/spells-page.vue
similarity index 83%
rename from client/src/pages/spells.vue
rename to client/src/pages/spells-page.vue
index 8e468f8..e36e36e 100644
--- a/client/src/pages/spells.vue
+++ b/client/src/pages/spells-page.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="spells-page">
+    <section class="spells-page">
         <spell-list/>
-    </div>
+    </section>
 </template>
 
 <script>
diff --git a/client/src/pages/world-page.vue b/client/src/pages/world-page.vue
new file mode 100644
index 0000000..0c8b2d1
--- /dev/null
+++ b/client/src/pages/world-page.vue
@@ -0,0 +1,15 @@
+<template>
+    <section class="world-page">
+
+    </section>
+</template>
+
+<script>
+export default {
+    name: 'world',
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/client/src/routes.js b/client/src/routes.js
index 558259e..72cfdb0 100644
--- a/client/src/routes.js
+++ b/client/src/routes.js
@@ -2,8 +2,9 @@
 
 
 // Pages
-import index from "./pages/index";
-import spells from "./pages/spells";
+import index from "./pages/index-page";
+import spells from "./pages/spells-page";
+import world from "./pages/world-page";
 
 // Routes
 const routes = [
@@ -15,6 +16,9 @@ const routes = [
     },
     {
         path: '/spells', component: spells,
+    },
+    {
+        path: '/world', component: world,
     }
 ];