Add footer

client/assets/css/global.css

+/* FONT CALLS */
+
 @font-face {
     font-family: 'BrandonGrotesqueReg';
     src: local('BrandonGrotesqueReg'),
@@ -14,6 +16,16 @@
     font-weight: normal;
     font-style: normal;
   }
+
+  @font-face {
+    font-family: 'BrandonGrotesqueBlk';
+    src: local('BrandonGrotesqueBlk'),
+      url(~assets/fonts/brandon_blk/brandon_blk-webfont.ttf)
+        format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+  
   
   @font-face {
     font-family: 'PlayfairDisplayBld';
@@ -33,6 +45,13 @@
     font-style: normal;
   }
 
+  /* FONT DETAILS */
+  
+  * {
+    font-family: 'BrandonGrotesqueReg';
+    font-size: 18px;
+  }
+
   h1 {
     font-family: 'BrandonGrotesqueBld';
     text-transform: uppercase;
@@ -41,11 +60,9 @@
   h2 {
     font-family: 'PlayfairDisplayBld';
   }
-  
-* {
-    font-family: 'BrandonGrotesqueReg';
-    font-size: 18px;
-  }
+
+/* WEBSITE HEADER */
+
 .logo {
     font-family: 'PlayfairDisplayReg';
     font-size: 50px;
@@ -169,3 +186,15 @@ button:active,input[type="submit"]:active,input[type="button"]:active,input[type
 }
 
 
+.v-tab--active {
+  font-family: 'BrandonGrotesqueBlk';
+}
+
+.footer-column {
+  border-left: 1px solid #2d96fa;
+  padding-left: 30px;
+}
+
+.footer-text {
+  font-size: 12px;
+}
\ No newline at end of file

client/layouts/default.vue

@@ -4,16 +4,17 @@
       <v-img
         class="shrink"
         max-width="auto"
-        max-height="50px"
         contain
         :src="require('~/assets/images/institut_pasteur_logo_2020.png')"
       ></v-img> 
-      <a style="text-decoration: none; color: black;" href="/"><h1 class="logo">JASS</h1></a>
+      <v-divider vertical class="mx-4">
+      </v-divider>
+
+      <a style="text-decoration: none; color: #272727;" href="/"><h1 class="logo subheading">JASS</h1></a>
       <v-spacer></v-spacer>
       <v-img
         class="shrink d-none d-md-flex"
         max-width="auto"
-        max-height="80px"
         contain
         :src="require('~/assets/images/pasteur-img.png')"
       ></v-img>
@@ -28,7 +29,66 @@
       <v-container>
         <Nuxt />
       </v-container>
+       <v-footer fixed app dark class="py-0">
+      <v-container>
+        <v-row justify="center">
+          <v-col sm="10" md="8">
+            <div class="d-flex justify-space-around">
+              <div class="d-none d-md-flex flex-column footer-column">
+                <v-list dense color="#272727">
+                  <v-list-item
+                    v-for="item in footer.col1"
+                    :key="item.label"
+                    :href="item.url"
+                    target="_blank"
+                    rel="noopener"
+                    class="footer-text"
+                    active-class="none"
+                  >
+                    {{ item.label }}
+                  </v-list-item>
+                </v-list>
+              </div>
+              <div class="d-none d-md-flex flex-column footer-column">
+                <v-list dense color="#272727">
+                  <v-list-item
+                    v-for="item in footer.col2"
+                    :key="item.label"
+                    :href="item.url"
+                    target="_blank"
+                    rel="noopener"
+                    class="footer-text"
+                  >
+                    {{ item.label }}
+                  </v-list-item>
+                </v-list>
+              </div>
+
+              <div class="d-flex flex-row flex-md-column footer-column">
+                <v-btn
+                  v-for="item in footer.col3"
+                  :key="item.icon"
+                  class="mx-4"
+                  icon
+                  :href="item.url"
+                  target="_blank"
+                  rel="noopener"
+                  :aria-label="item.icon"
+                  medium
+                  color="#2d96fa"
+                >
+                  <v-icon size="25px">
+                    {{ item.icon }}
+                  </v-icon>
+                </v-btn>
+              </div>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-footer>
     </v-main>
+    
   </v-app>
 </template>
 
@@ -53,18 +113,76 @@ export default {
         {
           icon: 'mdi-checkbox-blank-circle',
           title: 'regions',
-          to: '/'
+          to: '/regions'
         },
         {
           icon: 'mdi-checkbox-blank-circle',
           title: 'SNPs',
-          to: '/'
+          to: '/snps'
         }
       ],
       miniVariant: false,
       right: true,
       rightDrawer: false,
-      title: 'Vuetify.js'
+      title: 'Vuetify.js',
+      footer: {
+        col1: [
+          {
+            label: "L'INSTITUT PASTEUR",
+            url: 'https://www.pasteur.fr/fr/institut-pasteur',
+          },
+          {
+            label: 'NOS MISSIONS',
+            url: 'https://www.pasteur.fr/fr/nos-missions',
+          },
+          {
+            label: 'NOUS SOUTENIR',
+            url: 'https://www.pasteur.fr/fr/nous-soutenir',
+          },
+          {
+            label: 'CENTRE MÉDICAL',
+            url: 'https://www.pasteur.fr/fr/centre-medical',
+          },
+          {
+            label: 'LE JOURNAL DE LA RECHERCHE',
+            url: 'https://www.pasteur.fr/fr/journal-de-recherche',
+          },
+        ],
+
+        col2: [
+          { label: 'FAITES UN DON', url: 'https://don.pasteur.fr/' },
+          { label: 'ESPACE PRESSE', url: 'https://www.pasteur.fr/fr/presse' },
+          { label: 'CERIS', url: 'https://www.pasteur.fr/fr/ceris' },
+          {
+            label: 'MENTIONS LÉGALES',
+            url: 'https://www.pasteur.fr/fr/mentions-legales',
+          },
+          // { label: 'CREDITS', url: '' },
+        ],
+        col3: [
+          {
+            icon: 'mdi-facebook',
+            url: 'https://www.facebook.com/InstitutPasteur',
+          },
+          {
+            icon: 'mdi-twitter',
+            url: 'https://twitter.com/GGSPasteur',
+          },
+          {
+            icon: 'mdi-linkedin',
+            url: 'https://www.linkedin.com/company/institut-pasteur',
+          },
+          {
+            icon: 'mdi-youtube',
+            url: 'https://www.youtube.com/user/institutpasteurvideo',
+          },
+
+          {
+            icon: 'mdi-instagram',
+            url: 'https://www.instagram.com/institutpasteur/?hl=fr',
+          },
+        ],
+      },
     }
   }
 }

client/nuxt.config.js

@@ -28,7 +28,7 @@ export default {
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
-	'~/assets/test.css'
+	'~/assets/css/global.css'
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins