From 299f4aad5b673af927e1047f2f01dc4742001da1 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 9 Apr 2020 16:26:53 +0200
Subject: [PATCH 1/2] Add new footers

---
 client/src/layouts/DefaultFooter.vue    | 78 +++++++++++++++++++++++++
 client/src/layouts/DefaultLayout.vue    | 16 +++--
 client/src/layouts/FullScreenLayout.vue |  4 +-
 client/src/layouts/PublicLayout.vue     |  6 +-
 client/src/layouts/SimpleFooter.vue     | 31 ++++++++++
 client/src/layouts/SimpleLayout.vue     | 47 +++++++++------
 client/src/styles/_default-layout.scss  | 17 +++---
 client/src/styles/_mixins.scss          | 10 ++++
 client/src/styles/_survey.scss          |  1 -
 client/src/styles/_variables.scss       |  2 +
 10 files changed, 173 insertions(+), 39 deletions(-)
 create mode 100644 client/src/layouts/DefaultFooter.vue
 create mode 100644 client/src/layouts/SimpleFooter.vue

diff --git a/client/src/layouts/DefaultFooter.vue b/client/src/layouts/DefaultFooter.vue
new file mode 100644
index 00000000..9cb52f12
--- /dev/null
+++ b/client/src/layouts/DefaultFooter.vue
@@ -0,0 +1,78 @@
+<template>
+  <footer class="default-footer">
+    <div class="default-footer__section">
+      <div class="default-footer__info">
+        <div class="default-footer__who-are-we who-are-we">
+          <h5 class="who-are-we__title">Wer sind wir?</h5>
+          <p class="who-are-we__text">
+            mySkillbxox ­ist ein Angebot des hep verlags in Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für
+            Berufsbildung (EHB)
+          </p>
+        </div>
+
+        <div class="default-footer__logo-hep">
+          HEP
+        </div>
+        <div class="default-footer__logo-ehb">
+          EHB
+        </div>
+      </div>
+    </div>
+    <div class="default-footer__section">
+      <div class="default-footer__links">
+        <a href="https://www.hep-verlag.ch/datenschutz" target="_blank" class="default-footer__link">Datenschutz</a>
+        <a href="https://www.hep-verlag.ch/impressum" target="_blank" class="default-footer__link">Impressum</a>
+        <a href="https://www.hep-verlag.ch/agb" target="_blank" class="default-footer__link">AGB</a>
+        <a href="https://www.hep-verlag.ch/kontakt-verlag" target="_blank" class="default-footer__link">Kontakt</a>
+        <a href="https://www.hep-verlag.ch/kundenservice" target="_blank" class="default-footer__link">Hilfe</a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .default-footer {
+    background-color: $color-silver-light;
+
+    &__section {
+      width: 100%;
+      border-bottom: $color-silver 1px solid;
+      display: flex;
+      justify-content: center;
+    }
+
+    &__info {
+      width: $footer-width;
+      padding: 2*$large-spacing 0;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &__who-are-we {
+      width: 330px;
+    }
+
+    &__links {
+      width: $footer-width;
+      padding: $large-spacing 0;
+    }
+
+    &__link {
+      @include aside-with-cheese;
+      margin-right: $large-spacing;
+    }
+  }
+
+  .who-are-we {
+    &__title {
+      @include heading-4;
+    }
+
+    &__text {
+      @include aside-text;
+    }
+  }
+</style>
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 33ca3f48..95266c0e 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="container skillbox" :class="specialContainerClass">
+  <div class="container skillbox layout" :class="specialContainerClass">
     <profile-sidebar></profile-sidebar>
-    <header-bar class="header skillbox__header">
+    <header-bar class="header layout__header">
     </header-bar>
 
-    <mobile-header class="header skillbox__header skillbox__header--mobile"></mobile-header>
+    <mobile-header
+      class="header layout__header layout__header--mobile"
+    ></mobile-header>
 
-    <router-view class="skillbox__content"></router-view>
-    <footer class="skillbox__footer">Footer</footer>
+    <router-view class="layout__content"></router-view>
+    <default-footer class="layout__footer"></default-footer>
   </div>
 </template>
 
@@ -15,12 +17,14 @@
   import HeaderBar from '@/components/HeaderBar';
   import MobileHeader from '@/components/MobileHeader';
   import ProfileSidebar from '@/components/profile/ProfileSidebar';
+  import DefaultFooter from '@/layouts/DefaultFooter';
 
   export default {
     components: {
       HeaderBar,
       MobileHeader,
-      ProfileSidebar
+      ProfileSidebar,
+      DefaultFooter
     },
 
     computed: {
diff --git a/client/src/layouts/FullScreenLayout.vue b/client/src/layouts/FullScreenLayout.vue
index 446edf75..5a3ea3fa 100644
--- a/client/src/layouts/FullScreenLayout.vue
+++ b/client/src/layouts/FullScreenLayout.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="container skillbox" :class="specialContainerClass">
+  <div class="container layout layout--fullscreen" :class="specialContainerClass">
     <div class="close-button" v-on:click="back">
       <cross class="close-button__icon"></cross>
     </div>
 
-    <router-view class="skillbox__content"></router-view>
+    <router-view class="layout__content"></router-view>
   </div>
 </template>
 
diff --git a/client/src/layouts/PublicLayout.vue b/client/src/layouts/PublicLayout.vue
index ce607d70..d42d53df 100644
--- a/client/src/layouts/PublicLayout.vue
+++ b/client/src/layouts/PublicLayout.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="skillbox public">
+  <div class="layout layout--public public">
     <logo class="public__logo"></logo>
-    <router-view class="skillbox__content"></router-view>
-    <footer class="skillbox__footer">Footer</footer>
+    <router-view class="layout__content"></router-view>
+    <footer class="layout__footer">Footer</footer>
   </div>
 </template>
 
diff --git a/client/src/layouts/SimpleFooter.vue b/client/src/layouts/SimpleFooter.vue
new file mode 100644
index 00000000..cef1bd89
--- /dev/null
+++ b/client/src/layouts/SimpleFooter.vue
@@ -0,0 +1,31 @@
+<template>
+  <footer class="simple-footer">
+    <p class="simple-footer__strong">Copyright © 2020 hep Verlag, in Zusammenarbeit mit dem EHB</p>
+    <p class="simple-footer__regular">Alle Inhalte von mySkillbox, insbesondere Texte und Grafiken, sind urheberrechtlich geschützt. </p>
+  </footer>
+</template>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .simple-footer {
+    width: 100%;
+    justify-self: center;
+    padding: $large-spacing 0;
+    background-color: $color-silver-light;
+    display: grid;
+    grid-template-columns: 1fr $footer-width 1fr;
+
+    &__strong {
+      @include aside-with-cheese;
+      font-weight: 600;
+      grid-column: 2;
+    }
+
+    &__regular {
+      @include aside-text;
+      grid-column: 2;
+    }
+  }
+</style>
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index 58442114..73535a98 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -1,13 +1,33 @@
 <template>
-  <div class="skillbox layout--simple">
+  <div class="skillbox layout layout--simple">
     <div class="close-button" v-on:click="back">
       <cross class="close-button__icon"></cross>
     </div>
     <router-view></router-view>
+    <simple-footer class="layout__footer"></simple-footer>
   </div>
 </template>
 
+<script>
+  import Cross from '@/components/icons/Cross';
+  import SimpleFooter from '@/layouts/SimpleFooter';
+
+  export default {
+    components: {
+      Cross,
+      SimpleFooter
+    },
+
+    methods: {
+      back() {
+        this.$router.go(-1);
+      }
+    }
+  }
+</script>
+
 <style lang="scss" scoped>
+  @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
   .layout {
@@ -16,11 +36,12 @@
       @supports (display: grid) {
         display: grid;
       }
-      padding: 20px;
+
       width: 100%;
 
       @include desktop {
         grid-template-columns: 1fr 640px 1fr;
+        grid-template-rows: 60px 1fr 105px;
         -ms-grid-columns: 1fr 640px 1fr;
 
         & > :nth-child(2) {
@@ -28,7 +49,10 @@
           -ms-grid-column: 2;
         }
       }
+    }
 
+    &__footer {
+      grid-column: 1 / span 3;
     }
   }
 
@@ -42,6 +66,8 @@
     @include desktop {
       grid-column: 3;
       -ms-grid-column: 3;
+      margin-right: $medium-spacing;
+      margin-top: $medium-spacing;
     }
 
     &__icon {
@@ -50,20 +76,3 @@
     }
   }
 </style>
-
-<script>
-  import Cross from '@/components/icons/Cross';
-
-  export default {
-    components: {
-      Cross
-    },
-
-    methods: {
-      back() {
-        this.$router.go(-1);
-      }
-    }
-  }
-
-</script>
diff --git a/client/src/styles/_default-layout.scss b/client/src/styles/_default-layout.scss
index e3da0b86..974a8d0f 100644
--- a/client/src/styles/_default-layout.scss
+++ b/client/src/styles/_default-layout.scss
@@ -1,7 +1,9 @@
 @import "@/styles/_variables.scss";
 @import "@/styles/_mixins.scss";
 
-.skillbox {
+.layout {
+  $footer-height: 287px;
+
   margin: 0 auto;
   width: 100%;
   /*
@@ -12,17 +14,17 @@
   @supports (display: grid) {
     display: grid;
   }
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas: "h" "c" "f";
   min-height: 100vh;
   grid-auto-rows: 1fr;
 
-  grid-template-areas: "h" "c";
-  padding-bottom: 50px;
+
 
   &--show-filter {
-    grid-template-rows: auto auto 1fr;
-    -ms-grid-rows: 50px 50px 30px 1fr; // 1 extra row for gap
-    grid-template-areas: "h" "." "c";
+    grid-template-rows: auto auto 1fr $footer-height;
+    -ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap
+    grid-template-areas: "h" "." "c" "f";
   }
 
   /*
@@ -48,6 +50,5 @@
 
   &__footer {
     grid-area: f;
-    display: none;
   }
 }
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 0a3d80f3..1df1b9eb 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -117,6 +117,16 @@
   font-size: toRem(16px);
 }
 
+@mixin aside-text {
+  @include regular-text;
+  font-size: toRem(14px);
+}
+
+@mixin aside-with-cheese {
+  @include aside-text;
+  font-weight: 600;
+}
+
 @mixin meta-title {
   color: $color-silver-dark;
   font-size: toRem(36px);
diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss
index ecfe5766..2f6e5e7b 100644
--- a/client/src/styles/_survey.scss
+++ b/client/src/styles/_survey.scss
@@ -159,7 +159,6 @@
 }
 
 .question {
-
   $question: &;
 
   &--error #{$question}__input {
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index d8a3f2a4..dbc9d725 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -75,3 +75,5 @@ $default-heading-line-height: 1.2;
 
 // popover
 $popover-default-bottom: -110px;
+
+$footer-width: 800px;

From 159aef307500d99247eb2c44769da762659455c7 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 9 Apr 2020 17:09:01 +0200
Subject: [PATCH 2/2] Add logos

---
 client/src/components/icons/EhbLogo.vue | 84 +++++++++++++++++++++++++
 client/src/components/icons/HepLogo.vue | 47 ++++++++++++++
 client/src/layouts/DefaultFooter.vue    | 31 +++++++--
 3 files changed, 156 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/icons/EhbLogo.vue
 create mode 100644 client/src/components/icons/HepLogo.vue

diff --git a/client/src/components/icons/EhbLogo.vue b/client/src/components/icons/EhbLogo.vue
new file mode 100644
index 00000000..1c01c0dc
--- /dev/null
+++ b/client/src/components/icons/EhbLogo.vue
@@ -0,0 +1,84 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.6006 25.5117">
+    <g id="bild_wortmarke">
+      <path d="M42.6597,6.811h8.1616V9.2915H45.6001v2.6211H50.041v2.46H45.6001v3.0009h5.4214V19.854H42.6597Z"/>
+      <path d="M54.9195,6.811h2.9404v5.0215h4.5005V6.811h2.9609V19.854H62.3604V14.4126H57.8599V19.854H54.9195Z"/>
+      <path
+        d="M69.6983,6.811h4.4609c2.7012,0,4.8018.7403,4.8018,3.2412a2.84374,2.84374,0,0,1-2.1807,2.8204v.08c1.8604.3399,2.8203,1.3204,2.8203,3.0606,0,2.6601-2.2402,3.8408-5.0605,3.8408H69.6983Zm4.3213,5.2618c1.4404,0,2.0605-.6202,2.0605-1.6006s-.6602-1.3809-2.041-1.3809H72.6397v2.9815Zm.2802,5.5009c1.5996,0,2.42-.6006,2.42-1.7802,0-1.1407-.7999-1.6407-2.42-1.6407H72.6397v3.4209Z"/>
+      <polygon class="cls-1" points="7.087 0 0 4.252 7.087 8.504 7.087 0"/>
+      <polygon class="cls-1" points="7.087 8.504 14.173 4.252 7.087 0 7.087 8.504"/>
+      <polygon class="cls-2" points="7.087 17.008 0 21.26 7.087 25.512 7.087 17.008"/>
+      <polygon class="cls-2" points="7.087 25.512 14.173 21.26 7.087 17.008 7.087 25.512"/>
+      <polygon class="cls-1" points="7.087 8.511 7.093 8.507 7.087 8.504 7.087 8.511"/>
+      <polygon class="cls-3" points="0 4.252 0 12.756 7.087 8.504 0 4.252"/>
+      <polygon class="cls-4" points="7.087 8.504 7.087 17.008 14.173 12.756 7.087 8.504"/>
+      <polygon class="cls-5" points="7.087 8.504 7.087 17.008 0 12.756 7.087 8.504"/>
+      <polygon class="cls-5" points="14.173 12.756 14.173 4.252 7.087 8.504 14.173 12.756"/>
+      <polygon class="cls-2" points="0 12.756 0 21.26 7.087 17.008 0 12.756"/>
+      <polygon class="cls-6" points="14.173 21.26 14.173 12.756 7.087 17.008 14.173 21.26"/>
+      <polygon class="cls-7" points="21.26 0 14.173 4.252 21.26 8.504 21.26 0"/>
+      <polygon class="cls-7" points="21.26 8.504 28.347 4.252 21.26 0 21.26 8.504"/>
+      <polygon class="cls-8" points="21.26 17.008 14.173 21.26 21.26 25.512 21.26 17.008"/>
+      <polygon class="cls-8" points="21.26 25.512 28.347 21.26 21.26 17.008 21.26 25.512"/>
+      <polygon class="cls-1" points="21.26 8.511 21.266 8.507 21.26 8.504 21.26 8.511"/>
+      <polygon class="cls-9" points="14.173 4.252 14.173 12.756 21.26 8.504 14.173 4.252"/>
+      <polygon class="cls-10" points="21.26 8.504 21.26 17.008 28.347 12.756 21.26 8.504"/>
+      <polygon class="cls-9" points="21.26 8.504 21.26 17.008 14.173 12.756 21.26 8.504"/>
+      <polygon class="cls-11" points="28.347 12.756 28.347 4.252 21.26 8.504 28.347 12.756"/>
+      <polygon class="cls-6" points="14.173 12.756 14.173 21.26 21.26 17.008 14.173 12.756"/>
+      <polygon class="cls-8" points="28.347 21.26 28.347 12.756 21.26 17.008 28.347 21.26"/>
+      <polyline class="cls-12"
+                points="26.794 11.486 26.794 14.04 23.815 14.04 23.815 17.02 21.26 17.02 21.26 14.04 18.28 14.04 18.28 11.486 21.26 11.486 21.26 8.506 23.814 8.506 23.815 11.486 26.794 11.486"/>
+    </g>
+  </svg>
+</template>
+
+<style scoped lang="scss">
+  .cls-1 {
+    fill: #723c83;
+  }
+
+  .cls-2 {
+    fill: #29c3ec;
+  }
+
+  .cls-3 {
+    fill: #956daf;
+  }
+
+  .cls-4 {
+    fill: #004b60;
+  }
+
+  .cls-5 {
+    fill: #3f2c7f;
+  }
+
+  .cls-6 {
+    fill: #007dad;
+  }
+
+  .cls-7 {
+    fill: #009a7e;
+  }
+
+  .cls-8 {
+    fill: #cbdd5f;
+  }
+
+  .cls-9 {
+    fill: #00553c;
+  }
+
+  .cls-10 {
+    fill: #c14451;
+  }
+
+  .cls-11 {
+    fill: #f9a134;
+  }
+
+  .cls-12 {
+    fill: #fff;
+  }
+</style>
diff --git a/client/src/components/icons/HepLogo.vue b/client/src/components/icons/HepLogo.vue
new file mode 100644
index 00000000..7bf58ca5
--- /dev/null
+++ b/client/src/components/icons/HepLogo.vue
@@ -0,0 +1,47 @@
+<template>
+  <svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 147.39503 34.72434">
+    <circle class="cls-1" cx="17.36217" cy="17.36217" r="17.36217"/>
+    <path class="cls-1"
+          d="M52.4432,8.634a4.55121,4.55121,0,0,0-.89344-1.506,3.95842,3.95842,0,0,0-1.37354-.97187,4.42834,4.42834,0,0,0-1.7625-.34656,4.00352,4.00352,0,0,0-1.80914.40273,3.454,3.454,0,0,0-1.30783,1.14356h-.03922V2.59971H42.62491V17.82914h2.63262V10.86921a3.046,3.046,0,0,1,.17382-1.03228,2.49255,2.49255,0,0,1,.49812-.8468,2.33973,2.33973,0,0,1,.79169-.56277,2.52558,2.52558,0,0,1,1.03016-.20561,2.30456,2.30456,0,0,1,1.72223.68041,2.663,2.663,0,0,1,.66028,1.9236v7.00338h2.63262V10.60425A5.72892,5.72892,0,0,0,52.4432,8.634Z"/>
+    <path class="cls-1"
+          d="M65.73936,9.3865a5.357,5.357,0,0,0-1.081-1.8494A5.22188,5.22188,0,0,0,62.9096,6.278a5.72948,5.72948,0,0,0-2.37084-.46844,6.03155,6.03155,0,0,0-2.26911.41333,4.92935,4.92935,0,0,0-1.7625,1.19125,5.3972,5.3972,0,0,0-1.13508,1.91618,7.81512,7.81512,0,0,0-.40062,2.59977,7.81313,7.81313,0,0,0,.40062,2.59872A5.37548,5.37548,0,0,0,56.50715,16.445a4.91636,4.91636,0,0,0,1.7837,1.19338,6.37091,6.37091,0,0,0,2.33587.41121,6.1752,6.1752,0,0,0,1.95857-.29039,5.0312,5.0312,0,0,0,1.51557-.7917,4.95493,4.95493,0,0,0,1.09162-1.17005,5.74691,5.74691,0,0,0,.69-1.42442l.02013-.06041H63.05586l-.01378.01908a4.05,4.05,0,0,1-.95067.939,2.503,2.503,0,0,1-1.44243.3667,2.73105,2.73105,0,0,1-2.07515-.81289,3.29407,3.29407,0,0,1-.85635-2.07515h8.272l.00636-.03922c.01378-.089.02861-.19183.04345-.31053.01484-.1028.02968-.22151.04451-.354a4.07907,4.07907,0,0,0,.02332-.44725A6.72183,6.72183,0,0,0,65.73936,9.3865Zm-5.2006-1.16475a2.61117,2.61117,0,0,1,1.94373.71538,3.20654,3.20654,0,0,1,.87224,1.73071H57.7249a3.3678,3.3678,0,0,1,.94643-1.77416A2.62777,2.62777,0,0,1,60.53876,8.22175Z"/>
+    <path class="cls-1"
+          d="M79.14786,9.29748A5.456,5.456,0,0,0,78.0912,7.38236a4.5326,4.5326,0,0,0-1.61836-1.17112,5.23851,5.23851,0,0,0-2.072-.40167,4.12277,4.12277,0,0,0-2.06667.50342,4.59474,4.59474,0,0,0-1.37884,1.1531h-.05088l-.32431-1.4-.00741-.036h-2.1822V21.37068h2.63368v-4.8674h.03816a2.65765,2.65765,0,0,0,.45891.5066,3.83135,3.83135,0,0,0,.74824.514,4.59617,4.59617,0,0,0,.97081.38048,4.44481,4.44481,0,0,0,1.16051.1452,5.23834,5.23834,0,0,0,2.072-.40168,4.53245,4.53245,0,0,0,1.61836-1.17111,5.43932,5.43932,0,0,0,1.05666-1.91512,8.40143,8.40143,0,0,0,.37942-2.63157A8.41306,8.41306,0,0,0,79.14786,9.29748ZM73.95891,8.22175a2.87335,2.87335,0,0,1,1.14144.22786,2.62129,2.62129,0,0,1,.93266.68359,3.25549,3.25549,0,0,1,.63166,1.15522,5.2844,5.2844,0,0,1,.22892,1.64168,5.29386,5.29386,0,0,1-.22892,1.64169,3.25948,3.25948,0,0,1-.63166,1.15415,2.59368,2.59368,0,0,1-.93266.6836,2.97289,2.97289,0,0,1-2.28288,0,2.59373,2.59373,0,0,1-.93265-.6836,3.277,3.277,0,0,1-.63166-1.15521,5.28178,5.28178,0,0,1-.22893-1.64063,5.28409,5.28409,0,0,1,.22893-1.64168,3.27711,3.27711,0,0,1,.63166-1.15522,2.62134,2.62134,0,0,1,.93265-.68359A2.87342,2.87342,0,0,1,73.95891,8.22175Z"/>
+    <path class="cls-1"
+          d="M42.61643,23.24323h1.01v5.18046l3.29714-3.29714h1.27816L44.77,28.55829l3.63311,3.56634H47.125l-3.49851-3.43174v3.43174h-1.01Z"/>
+    <path class="cls-1"
+          d="M52.01023,32.25923a3.50763,3.50763,0,0,1-1.30571-.23529,2.72284,2.72284,0,0,1-1.01638-.69949,3.34743,3.34743,0,0,1-.66558-1.1372,5.14225,5.14225,0,0,1,0-3.12227,3.34743,3.34743,0,0,1,.66558-1.1372,2.723,2.723,0,0,1,1.01638-.69949,3.72016,3.72016,0,0,1,2.604,0,2.69623,2.69623,0,0,1,1.02274.69949,3.34936,3.34936,0,0,1,.66663,1.1372,5.16374,5.16374,0,0,1,0,3.12227,3.34936,3.34936,0,0,1-.66663,1.1372,2.69611,2.69611,0,0,1-1.02274.69949A3.52016,3.52016,0,0,1,52.01023,32.25923Zm0-.9422a2.21008,2.21008,0,0,0,.88814-.17487,1.92179,1.92179,0,0,0,.69949-.51826,2.489,2.489,0,0,0,.46421-.84044,4.05861,4.05861,0,0,0,0-2.31468,2.50459,2.50459,0,0,0-.46421-.84151,1.93408,1.93408,0,0,0-.69949-.51826,2.3428,2.3428,0,0,0-1.77628,0,1.94676,1.94676,0,0,0-.70055.51826,2.50476,2.50476,0,0,0-.46421.84151,4.08323,4.08323,0,0,0,0,2.31468,2.48917,2.48917,0,0,0,.46421.84044,1.93431,1.93431,0,0,0,.70055.51826A2.21008,2.21008,0,0,0,52.01023,31.317Z"/>
+    <path class="cls-1"
+          d="M56.86809,25.12655h.80759l.1346.94219h.06677a2.00568,2.00568,0,0,1,.83409-.84045,2.37269,2.37269,0,0,1,1.05029-.23528,2.14389,2.14389,0,0,1,1.18384.336,2.37008,2.37008,0,0,1,.83409.94219h.06783a2.25262,2.25262,0,0,1,.92841-.96869,2.69067,2.69067,0,0,1,1.29194-.30947,2.31173,2.31173,0,0,1,.94219.195,2.25742,2.25742,0,0,1,.77368.55853,2.62232,2.62232,0,0,1,.51826.88814,3.49864,3.49864,0,0,1,.18865,1.18384v4.3061h-1.01v-4.3061a1.9851,1.9851,0,0,0-.45042-1.4,1.52165,1.52165,0,0,0-1.1637-.48435,1.56955,1.56955,0,0,0-.66028.142,1.63624,1.63624,0,0,0-.53839.39638,1.8526,1.8526,0,0,0-.35611.5988,2.11158,2.11158,0,0,0-.12824.74719v4.3061h-1.009v-4.3061a1.98506,1.98506,0,0,0-.45043-1.4,1.52233,1.52233,0,0,0-1.16475-.48435,1.50178,1.50178,0,0,0-.63166.142,1.62552,1.62552,0,0,0-.5384.39638,2.07492,2.07492,0,0,0-.37094.5988,1.962,1.962,0,0,0-.141.74719v4.3061h-1.009Z"/>
+    <path class="cls-1"
+          d="M68.39055,25.12655h.80759l.1346.94219h.06677a2.34585,2.34585,0,0,1,.93583-.79381,3.313,3.313,0,0,1,2.56374-.04664,2.60919,2.60919,0,0,1,.95491.69949,3.36014,3.36014,0,0,1,.63272,1.1372,5.43759,5.43759,0,0,1,0,3.12227,3.36014,3.36014,0,0,1-.63272,1.1372,2.60908,2.60908,0,0,1-.95491.69949,3.06349,3.06349,0,0,1-1.21139.23529,2.92848,2.92848,0,0,1-1.31949-.27556,2.53882,2.53882,0,0,1-.90086-.7334h-.06783v3.02508h-1.009ZM71.55309,31.317a1.96128,1.96128,0,0,0,1.56114-.68571,2.99146,2.99146,0,0,0,.59138-2.0052,2.99149,2.99149,0,0,0-.59138-2.00521,2.11774,2.11774,0,0,0-3.12227,0,2.98588,2.98588,0,0,0-.59245,2.00521,2.98585,2.98585,0,0,0,.59245,2.0052A1.95829,1.95829,0,0,0,71.55309,31.317Z"/>
+    <path class="cls-1"
+          d="M79.36143,32.25923a3.5076,3.5076,0,0,1-1.30571-.23529,2.72284,2.72284,0,0,1-1.01638-.69949,3.34727,3.34727,0,0,1-.66558-1.1372,4.60854,4.60854,0,0,1-.2427-1.56113A4.6949,4.6949,0,0,1,76.3674,27.065a3.25231,3.25231,0,0,1,.65922-1.1372,2.73334,2.73334,0,0,1,1.0026-.69949A3.32709,3.32709,0,0,1,79.2936,24.993a3.047,3.047,0,0,1,1.4.302,3.11509,3.11509,0,0,1,.98882.7811,3.1694,3.1694,0,0,1,.585,1.04923,3.49088,3.49088,0,0,1,.18865,1.09693,2.59583,2.59583,0,0,1-.01271.2692c-.00954.08055-.018.15262-.02756.21515-.00848.07206-.018.13459-.0265.18865H77.14108a2.58155,2.58155,0,0,0,.67935,1.81655,2.13015,2.13015,0,0,0,1.541.60516,1.9818,1.9818,0,0,0,1.81655-1.009h1.07679a2.79418,2.79418,0,0,1-1.11706,1.46045A3.22194,3.22194,0,0,1,79.36143,32.25923Zm2.08575-4.23934a2.3453,2.3453,0,0,0-.69949-1.54735,2.23134,2.23134,0,0,0-2.90712,0,2.33547,2.33547,0,0,0-.69949,1.54735Z"/>
+    <path class="cls-1"
+          d="M84.99393,31.63392a1.70429,1.70429,0,0,1-.49176-1.258V26.06874H83.42538v-.94219h1.07679l.1346-1.88332h.87542v1.88332h1.81655v.94219H85.51219V30.3759a.77962.77962,0,0,0,.80653.80654h1.01v.94219H86.25195A1.70186,1.70186,0,0,1,84.99393,31.63392Z"/>
+    <path class="cls-1"
+          d="M91.58563,32.25923a3.50769,3.50769,0,0,1-1.30572-.23529,2.723,2.723,0,0,1-1.01638-.69949,3.34741,3.34741,0,0,1-.66557-1.1372,4.6083,4.6083,0,0,1-.2427-1.56113A4.6949,4.6949,0,0,1,88.5916,27.065a3.25231,3.25231,0,0,1,.65922-1.1372,2.73334,2.73334,0,0,1,1.0026-.69949A3.32709,3.32709,0,0,1,91.5178,24.993a3.047,3.047,0,0,1,1.4.302,3.11509,3.11509,0,0,1,.98882.7811,3.1694,3.1694,0,0,1,.585,1.04923,3.49088,3.49088,0,0,1,.18865,1.09693,2.59288,2.59288,0,0,1-.01272.2692c-.00953.08055-.018.15262-.02755.21515-.00848.07206-.018.13459-.0265.18865H89.36528a2.58155,2.58155,0,0,0,.67935,1.81655,2.13015,2.13015,0,0,0,1.541.60516,1.9818,1.9818,0,0,0,1.81655-1.009H94.479a2.79418,2.79418,0,0,1-1.11706,1.46045A3.22194,3.22194,0,0,1,91.58563,32.25923Zm2.08575-4.23934a2.3453,2.3453,0,0,0-.69949-1.54735,2.23134,2.23134,0,0,0-2.90712,0,2.33547,2.33547,0,0,0-.69949,1.54735Z"/>
+    <path class="cls-1"
+          d="M96.3745,25.12655h.8076l.13459.94219h.06677a1.9014,1.9014,0,0,1,.90828-.84045,2.84328,2.84328,0,0,1,1.11071-.23528,2.68728,2.68728,0,0,1,1.02909.195,2.43164,2.43164,0,0,1,.83409.55853,2.53811,2.53811,0,0,1,.55854.88814,3.27437,3.27437,0,0,1,.20242,1.18384v4.3061h-1.009v-4.3061a1.88054,1.88054,0,0,0-.49176-1.4,1.71981,1.71981,0,0,0-1.258-.48435,1.8029,1.8029,0,0,0-.74718.15474,2.014,2.014,0,0,0-.59881.41121,1.815,1.815,0,0,0-.39744.59881,1.88894,1.88894,0,0,0-.141.71963v4.3061h-1.009Z"/>
+    <path class="cls-1"
+          d="M104.7764,31.63392a1.7043,1.7043,0,0,1-.49177-1.258V26.06874h-1.07679v-.94219h1.07679l.1346-1.88332h.87542v1.88332h1.81656v.94219h-1.81656V30.3759a.77964.77964,0,0,0,.80654.80654h1.01v.94219h-1.07679A1.70184,1.70184,0,0,1,104.7764,31.63392Z"/>
+    <path class="cls-1"
+          d="M115.14105,32.25923a3.0872,3.0872,0,0,1-1.35234-.28192,2.34409,2.34409,0,0,1-.93478-.79487h-.06783l-.1346.94219h-.80759v-8.8814h1.01V26.002h.06677a2.54267,2.54267,0,0,1,.90192-.7334,2.91289,2.91289,0,0,1,1.31843-.27556,3.05625,3.05625,0,0,1,1.21139.23528,2.61284,2.61284,0,0,1,.956.69949,3.37627,3.37627,0,0,1,.63166,1.1372,5.43736,5.43736,0,0,1,0,3.12227,3.37627,3.37627,0,0,1-.63166,1.1372,2.61273,2.61273,0,0,1-.956.69949A3.05608,3.05608,0,0,1,115.14105,32.25923Zm-.1346-.9422a1.95833,1.95833,0,0,0,1.56114-.68571,2.98585,2.98585,0,0,0,.59245-2.0052,2.98588,2.98588,0,0,0-.59245-2.00521,2.11774,2.11774,0,0,0-3.12227,0,2.99144,2.99144,0,0,0-.59139,2.00521,2.99141,2.99141,0,0,0,.59139,2.0052A1.96127,1.96127,0,0,0,115.00645,31.317Z"/>
+    <path class="cls-1"
+          d="M120.392,24.19429a.69831.69831,0,0,1-.50448-.20136.66738.66738,0,0,1-.20878-.49813.69925.69925,0,0,1,.20242-.50448.68231.68231,0,0,1,.51084-.20878.66738.66738,0,0,1,.49813.20878.69925.69925,0,0,1,.20242.50448.68177.68177,0,0,1-.20242.49071A.66349.66349,0,0,1,120.392,24.19429Zm-.51084.93226h1.009v6.99808h-1.009Z"/>
+    <path class="cls-1" d="M123.03591,23.24323h1.01v8.8814h-1.01Z"/>
+    <path class="cls-1"
+          d="M128.79071,32.25923a3.05086,3.05086,0,0,1-1.21033-.23529,2.604,2.604,0,0,1-.956-.69949,3.36014,3.36014,0,0,1-.63272-1.1372,5.43759,5.43759,0,0,1,0-3.12227,3.36014,3.36014,0,0,1,.63272-1.1372,2.6041,2.6041,0,0,1,.956-.69949,3.051,3.051,0,0,1,1.21033-.23528,2.91444,2.91444,0,0,1,1.31949.27556,2.53874,2.53874,0,0,1,.90086.7334h.06783V23.24323h1.009v8.8814h-.80759l-.1346-.94219h-.06677a2.34,2.34,0,0,1-.93583.79487A3.084,3.084,0,0,1,128.79071,32.25923Zm.1346-.9422a1.95829,1.95829,0,0,0,1.56113-.68571,2.98585,2.98585,0,0,0,.59245-2.0052,2.98588,2.98588,0,0,0-.59245-2.00521,2.11772,2.11772,0,0,0-3.12226,0,2.99144,2.99144,0,0,0-.59139,2.00521,2.99141,2.99141,0,0,0,.59139,2.0052A1.96124,1.96124,0,0,0,128.92531,31.317Z"/>
+    <path class="cls-1"
+          d="M137.11233,32.25923a3.50763,3.50763,0,0,1-1.30571-.23529,2.72284,2.72284,0,0,1-1.01638-.69949,3.34743,3.34743,0,0,1-.66558-1.1372,4.60854,4.60854,0,0,1-.2427-1.56113,4.6949,4.6949,0,0,1,.23634-1.56114,3.25231,3.25231,0,0,1,.65922-1.1372,2.73334,2.73334,0,0,1,1.0026-.69949,3.32709,3.32709,0,0,1,1.26438-.23528,3.047,3.047,0,0,1,1.4.302,3.11524,3.11524,0,0,1,.98883.7811,3.16955,3.16955,0,0,1,.585,1.04923,3.49088,3.49088,0,0,1,.18865,1.09693,2.59583,2.59583,0,0,1-.01271.2692c-.00954.08055-.018.15262-.02756.21515-.00848.07206-.018.13459-.0265.18865H134.892a2.58155,2.58155,0,0,0,.67935,1.81655,2.13015,2.13015,0,0,0,1.541.60516,1.9818,1.9818,0,0,0,1.81655-1.009h1.0768a2.79424,2.79424,0,0,1-1.11707,1.46045A3.22194,3.22194,0,0,1,137.11233,32.25923Zm2.08575-4.23934a2.3453,2.3453,0,0,0-.69949-1.54735,2.23134,2.23134,0,0,0-2.90712,0,2.33547,2.33547,0,0,0-.69949,1.54735Z"/>
+    <path class="cls-1"
+          d="M141.74294,25.12655h.80759l.1346.94219h.06677a1.90132,1.90132,0,0,1,.90828-.84045,2.84327,2.84327,0,0,1,1.1107-.23528,2.68734,2.68734,0,0,1,1.0291.195,2.43174,2.43174,0,0,1,.83409.55853,2.53823,2.53823,0,0,1,.55853.88814,3.27415,3.27415,0,0,1,.20243,1.18384v4.3061h-1.009v-4.3061a1.88054,1.88054,0,0,0-.49177-1.4,1.71979,1.71979,0,0,0-1.258-.48435,1.8029,1.8029,0,0,0-.74718.15474,2.01427,2.01427,0,0,0-.59881.41121,1.81485,1.81485,0,0,0-.39743.59881,1.88875,1.88875,0,0,0-.141.71963v4.3061h-1.009Z"/>
+    <rect class="cls-1" x="42.62491" y="2.59971" width="2.63263" height="15.22942"/>
+  </svg>
+</template>
+
+<style scoped lang="scss">
+  .cls-1 {
+    fill: #002f6c;
+  }
+</style>
diff --git a/client/src/layouts/DefaultFooter.vue b/client/src/layouts/DefaultFooter.vue
index 9cb52f12..a048eaab 100644
--- a/client/src/layouts/DefaultFooter.vue
+++ b/client/src/layouts/DefaultFooter.vue
@@ -10,12 +10,10 @@
           </p>
         </div>
 
-        <div class="default-footer__logo-hep">
-          HEP
-        </div>
-        <div class="default-footer__logo-ehb">
-          EHB
-        </div>
+        <hep-logo class="default-footer__logo-hep">
+        </hep-logo>
+        <ehb-logo class="default-footer__logo-ehb">
+        </ehb-logo>
       </div>
     </div>
     <div class="default-footer__section">
@@ -30,6 +28,18 @@
   </footer>
 </template>
 
+<script>
+  import HepLogo from '@/components/icons/HepLogo';
+  import EhbLogo from '@/components/icons/EhbLogo';
+
+  export default {
+    components: {
+      HepLogo,
+      EhbLogo
+    }
+  }
+</script>
+
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
@@ -55,6 +65,15 @@
       width: 330px;
     }
 
+    &__logo-hep {
+      width: 147px;
+      height: 35px;
+    }
+    &__logo-ehb {
+      width: 100px;
+      height: 32px;
+    }
+
     &__links {
       width: $footer-width;
       padding: $large-spacing 0;