From a481989348aa4036bcf2a88aeb684751c4537451 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 24 Feb 2020 15:17:11 +0100
Subject: [PATCH] Add footer

---
 client/src/layouts/PublicLayout.vue | 41 ++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/client/src/layouts/PublicLayout.vue b/client/src/layouts/PublicLayout.vue
index a4e7b9a2..410309cb 100644
--- a/client/src/layouts/PublicLayout.vue
+++ b/client/src/layouts/PublicLayout.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="skillbox public">
-    <logo class="public__logo"></logo>
-    <router-view class="skillbox__content"></router-view>
-    <footer class="skillbox__footer">Footer</footer>
+    <div class="skillbox__header public__logo">
+      <logo class=""></logo>
+    </div>
+    <router-view class="skillbox__content public__content"></router-view>
+    <footer class="skillbox__footer public__footer footer">
+      <div class="footer__content">
+        Footer
+      </div>
+    </footer>
   </div>
 </template>
 
@@ -20,14 +26,41 @@ import Logo from '@/components/icons/Logo';
   @import "@/styles/_mixins.scss";
   @import "@/styles/_default-layout.scss";
 
-  .public {
+  @mixin content-block {
+    padding-right: $medium-spacing;
+    padding-left: $medium-spacing;
     max-width: 800px;
     min-width: 320px;
+    margin: 0 auto;
+  }
+
+
+  .public {
+    grid-template-areas: "h" "c" "f";
 
     &__logo {
       position: relative;
       left: -10px;
+      width: 100%;
+    }
+
+    &__content, &__logo {
+      @include content-block();
+    }
+
+    &__footer {
+      background-color: $color-silver-light;
+      display: block;
     }
   }
 
+  .footer {
+    padding-top: $large-spacing;
+
+    &__content {
+      @include content-block();
+    }
+  }
+
+
 </style>