From 290e49fe268250e92e4ce77576f1b7765faeb645 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 21 Jul 2020 13:19:48 +0200
Subject: [PATCH 1/5] New contact page.

---
 frontend/components/Contact.vue | 93 +++++++++++++++++++++++++++++++++
 frontend/routes.js              |  5 ++
 2 files changed, 98 insertions(+)
 create mode 100644 frontend/components/Contact.vue

diff --git a/frontend/components/Contact.vue b/frontend/components/Contact.vue
new file mode 100644
index 0000000..96ea842
--- /dev/null
+++ b/frontend/components/Contact.vue
@@ -0,0 +1,93 @@
+<template>
+  <main role="main">
+    <div class="banner blue-background">
+      <div class="banner-content top-show col-wrap max-width">
+        <h1>Kontakt oss</h1>
+
+        <p class="margin-top--md">Har du noen problemer eller noe du lurer på? Ta kontakt under!</p>
+      </div>
+    </div>
+
+    <section class="contact max-width col-wrap">
+      <div class="container-info col-6">
+        <h3 class="margin-bottom--sm">Kontaktinfo</h3>
+        <div class="text-container accent--lg">
+          <p>
+            Epost:
+            <br>
+            kevin.midboe@gmail.com
+          </p>
+          <p>
+            Telefon:
+            <br>
+            93 40 46 42
+          </p>
+        </div>
+      </div>
+
+      <div class="container-social col-6">
+        <h3 class="margin-bottom--sm">Følg oss på sosiale medier</h3>
+        <ul>
+          <li>Email: kevin.midboe@gmail.com</li>
+          <li>Address: Schleppegrells gate 18</li>
+        </ul>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'frontend/styles/variables';
+@import 'frontend/styles/spacing';
+
+#content {
+  overflow: hidden;
+  width: 100vw;
+}
+
+.banner {
+  height: 100%;
+  width: 100%;
+
+  &.blue-background {
+    background-color: var(--color-background-blue);
+    color: black;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding-top: var(--space-xxxxl);
+
+    p {
+      font-size: var(--text-md);
+    }
+
+    @include mobile {
+      flex-direction: column-reverse;
+    }
+  }
+}
+
+section.contact {
+  margin: 6rem auto 0 auto;
+}
+
+img {
+  padding-top: 1.5rem;
+
+  @include mobile {
+    display: block;
+    margin: auto;
+    width: 80%;
+  }
+}
+</style>
diff --git a/frontend/routes.js b/frontend/routes.js
index 7fbcb75..fc97ea8 100644
--- a/frontend/routes.js
+++ b/frontend/routes.js
@@ -29,6 +29,11 @@ let routes = [
     path: '/shop',
     component: (resolve) => require(['./components/Shop.vue'], resolve)
   },
+  {
+    name: 'Contact',
+    path: '/contact',
+    component: (resolve) => require(['./components/Contact.vue'], resolve)
+  },
   {
     name: 'admin',
     path: '/admin',

From 4489c1380d9b389d454b1dadb86468d6f4a72748 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 21 Jul 2020 13:20:11 +0200
Subject: [PATCH 2/5] New global rules and globaly imported layout.scss

---
 frontend/App.vue            |   1 +
 frontend/styles/global.scss |  16 +++-
 frontend/styles/layout.scss | 174 ++++++++++++++++++++++++++++++++++++
 3 files changed, 187 insertions(+), 4 deletions(-)
 create mode 100644 frontend/styles/layout.scss

diff --git a/frontend/App.vue b/frontend/App.vue
index 817a94e..08d0414 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -18,4 +18,5 @@ export default {
 @import './styles/normalize';
 @import './styles/icons';
 @import './styles/global';
+@import './styles/layout';
 </style>
diff --git a/frontend/styles/global.scss b/frontend/styles/global.scss
index ff39790..99a5a97 100644
--- a/frontend/styles/global.scss
+++ b/frontend/styles/global.scss
@@ -11,8 +11,7 @@ body {
   font-family: "Mabry", sans-serif; 
   background-color: #19171A;
   color: white;
-
-  margin-bottom: 2rem;
+  padding-bottom: 2rem;
 }
 
 h1,h2,h3,h4,h5 {
@@ -43,8 +42,6 @@ h3 {
   }
 }
 
-
-
 .flex {
   display: flex;
 }
@@ -79,9 +76,12 @@ h3 {
   }
 }
 
+
 .col-wrap {
   padding-left: 120px;
   padding-right: 120px;
+  box-sizing: border-box;
+
 
   @include tablet {
     padding: 0 48px;
@@ -96,6 +96,10 @@ h3 {
 .max-width {
   max-width: 1520px;
   margin: auto;
+
+  @include mobile {
+    width: 90%;
+  }
 }
 
 .top-show {
@@ -103,6 +107,10 @@ h3 {
   padding-bottom: var(--space-xxl);
   padding-top: var(--space-xxxxl);
 
+  &-md {
+    padding-top: var(--space-xxxl);
+  }
+
   &-sm {
     padding-top: var(--space-xxl);
   }
diff --git a/frontend/styles/layout.scss b/frontend/styles/layout.scss
new file mode 100644
index 0000000..abb6762
--- /dev/null
+++ b/frontend/styles/layout.scss
@@ -0,0 +1,174 @@
+:root {
+    --width-1: 8.33%;
+    --width-2: 16.66%;
+    --width-3: 25%;
+    --width-4: 33.33%;
+    --width-5: 41.66%;
+    --width-6: 50%;
+    --width-7: 58.33%;
+    --width-8: 66.66%;
+    --width-9: 75%;
+    --width-10: 83.33%;
+    --width-11: 91.66%;
+    --width-12: 100%
+}
+
+.col-1 {
+    width:var(--width-1)
+}
+
+.col-2 {
+    width:var(--width-2)
+}
+
+.col-3 {
+    width:var(--width-3)
+}
+
+.col-4 {
+    width:var(--width-4)
+}
+
+.col-5 {
+    width:var(--width-5)
+}
+
+.col-6 {
+    width:var(--width-6)
+}
+
+.col-7 {
+    width:var(--width-7)
+}
+
+.col-8 {
+    width:var(--width-8)
+}
+
+.col-9 {
+    width:var(--width-9)
+}
+
+.col-10 {
+    width:var(--width-10)
+}
+
+.col-11 {
+    width:var(--width-11)
+}
+
+.col-12 {
+    width:var(--width-12)
+}
+
+.offset-1 {
+    margin-left:var(--width-1)
+}
+
+.offset-2 {
+    margin-left:var(--width-2)
+}
+
+.offset-3 {
+    margin-left:var(--width-3)
+}
+
+.offset-4 {
+    margin-left:var(--width-4)
+}
+
+.offset-5 {
+    margin-left:var(--width-5)
+}
+
+.offset-6 {
+    margin-left:var(--width-6)
+}
+
+.offset-7 {
+    margin-left:var(--width-7)
+}
+
+.offset-8 {
+    margin-left:var(--width-8)
+}
+
+.offset-9 {
+    margin-left:var(--width-9)
+}
+
+.offset-10 {
+    margin-left:var(--width-10)
+}
+
+.offset-11 {
+    margin-left:var(--width-11)
+}
+
+.offset-12 {
+    margin-left:var(--width-12)
+}
+
+.col-wrap {
+    padding-left: 120px;
+    padding-right:120px
+}
+
+@media (max-width: 1280px) {
+    .col-wrap {
+        padding-left: 64px;
+        padding-right:64px
+    }
+}
+
+@media (max-width: 992px) {
+    .col-wrap {
+        padding-left: 48px;
+        padding-right:48px
+    }
+}
+
+@media (max-width: 768px) {
+    .col-wrap {
+        padding-left: 32px;
+        padding-right:32px
+    }
+}
+
+@media (max-width: 520px) {
+    .col-wrap {
+        padding-left: 12px;
+        padding-right: 12px
+    }
+}
+
+.col-wrap [class*="col-"] {
+    float: left;
+    padding-left: 32px;
+    padding-right: 32px;
+    box-sizing: border-box
+}
+
+@media (max-width: 992px) {
+    .col-wrap [class*="col-"] {
+        padding-left: 16px;
+        padding-right:16px
+    }
+}
+
+@media (max-width: 520px) {
+    .col-wrap [class*="col-"] {
+        padding-left: 8px;
+        padding-right:8px
+    }
+}
+/*
+.col-wrap::after {
+    content: "";
+    visibility: hidden;
+    display: block;
+    height: 0;
+    clear:both
+}
+*/
+

From e21bc1f1b874ebc700376bb9cfcad336b854cc71 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 21 Jul 2020 13:20:42 +0200
Subject: [PATCH 3/5] White table for cart.

---
 frontend/components/Cart.vue | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/components/Cart.vue b/frontend/components/Cart.vue
index aeaef99..553928c 100644
--- a/frontend/components/Cart.vue
+++ b/frontend/components/Cart.vue
@@ -207,10 +207,25 @@ table.cart-inventory {
   }
 
   thead tr th {
-    border-bottom: 2px solid rgba(255,255,255,.1);
+    border-bottom: 2px solid rgba(0,0,0,.1);
 
     &:not(:last-of-type) {
-      border-right: 2px solid rgba(255,255,255,.1);
+      border-right: 2px solid rgba(0,0,0,0.1);
+    }
+  }
+
+  thead th:first-of-type {
+    border-top-left-radius: 6px;
+  }
+  thead th:last-of-type {
+    border-top-right-radius: 6px;
+  }
+  tbody tr:last-of-type {
+    td:first-of-type {
+      border-bottom-left-radius: 6px;
+    }
+    td:last-of-type {
+      border-bottom-right-radius: 6px;
     }
   }
 
@@ -276,28 +291,33 @@ table.cart-inventory--mobile {
 
 table {
   width: 100%;
-  border: 1px solid rgba(255,255,255,.1);
+  border: 1px solid rgba(0,0,0,.1);
   border-radius: 6px;
   margin-bottom: 1.5rem;
 
   font-size: 1.2em;
 
+//  background-color: white;
+  color: var(--color-background);
+
   @include mobile {
     font-size: 1.1em;
   }
 
   tr th, tr td {
-    border-bottom: 2px solid rgba(255,255,255,.1);
+    border-bottom: 2px solid rgba(0,0,0,.1);
   }
 
   th, td {
     padding: 0.75rem 1rem;
+    background-color: white;
   }
 
   th {
     text-align: left;
     vertical-align: top;
   }
+
 }
 
 .page-header {

From c572c967a439de8957f505c96ff86b9509b675a1 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 21 Jul 2020 13:21:01 +0200
Subject: [PATCH 4/5] Icon positioning in buttons.

---
 frontend/components/ui/Button.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/components/ui/Button.vue b/frontend/components/ui/Button.vue
index b416794..5f85894 100644
--- a/frontend/components/ui/Button.vue
+++ b/frontend/components/ui/Button.vue
@@ -93,4 +93,10 @@ button {
   }
 }
 
+button .icon {
+  position: relative;
+  top: 2.5px;
+  right: -8px;
+}
+
 </style>

From cc009b1ffd8dd888a181675e7155f1150195bfc6 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 21 Jul 2020 13:22:08 +0200
Subject: [PATCH 5/5] Cart icon follows scroll on all shop pages. w/ shopping
 cart icon & lower desktop positioning.

---
 frontend/components/ui/cart.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/components/ui/cart.vue b/frontend/components/ui/cart.vue
index 4f62a0f..90ec0d8 100644
--- a/frontend/components/ui/cart.vue
+++ b/frontend/components/ui/cart.vue
@@ -27,9 +27,14 @@ export default {
       isHeaderOffScreen: false
     }
   },
+  watch: {
+    $route(to, from) {
+      this.isHeaderOffScreen = false;
+    }
+  },
   mounted() {
     let observer = new IntersectionObserver((entry, observer) => {
-      if (this.$route.name == 'Shop') {
+      if (this.$route.path.includes('shop')) {
         const isHeaderIntersecting = entry[0].isIntersecting;
         this.isHeaderOffScreen = !isHeaderIntersecting;
       } else {
@@ -52,6 +57,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '/frontend/styles/variables';
+
 .cart {
   display: flex;
   flex-direction: row;
@@ -75,10 +82,18 @@ export default {
     top: 0.5rem;
     right: -6px;
     padding: 0.5rem;
-    padding-right: 2.5rem;
+    padding-right: 1.5rem;
     background-color: var(--color-background);
     border-radius: 6px;
     border: 0px solid !important;
+
+    .icon {
+      color: white;
+    }
+
+    @include desktop {
+      top: 1.5rem;
+    }
   }
 
   &:hover {