From 2b754c6c513858e774f5a6a39fbed1674a0859b6 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Thu, 3 Jan 2019 17:52:38 +0000
Subject: [PATCH] content-page layout

---
 assets/scss/_globals.scss  |  4 ++--
 components/ContentPage.vue | 33 ++++++++++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/assets/scss/_globals.scss b/assets/scss/_globals.scss
index 2e66530..364d849 100644
--- a/assets/scss/_globals.scss
+++ b/assets/scss/_globals.scss
@@ -3,7 +3,7 @@ $bp__m: 40em;
 // layout optomised for larger screens
 $bp__layout: $bp__m;
 
-$site-menu__header-width: 3em;
-$site-menu__header-height: 3em;
+$site-menu__header-width: 3rem;
+$site-menu__header-height: 3rem;
 
 $color__bg-menu: #f00;
diff --git a/components/ContentPage.vue b/components/ContentPage.vue
index 2885f46..27f3d60 100644
--- a/components/ContentPage.vue
+++ b/components/ContentPage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content-page">
-    <h1>{{ heading }}</h1>
+    <h1 class="page-heading">{{ heading }}</h1>
     <section class="content-container">
       <slot></slot>
     </section>
@@ -61,9 +61,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$z-index-bottom: 5;
+$z-index-top: 10;
 
 .content-page {
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   padding: $site-menu__header-width 0 0 0;
@@ -76,12 +80,34 @@ export default {
 }
 
 .content-container {
-  z-index: 10;
+  z-index: $z-index-top;
   position: relative;
+
+  height: 100%;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  @media (min-width: $bp__layout) {
+    position: absolute;
+    width: 50%;
+    top: 0;
+    right: 0;
+  }
 }
 
 .background-container {
-  z-index: 5;
+  z-index: $z-index-bottom
+}
+
+.page-heading {
+  z-index: $z-index-top;
+  position: relative;
+
+  @media (min-width: $bp__layout) {
+    max-width: 50%;
+    padding-right: $site-menu__header-width;
+  }
 }
 
 .background {
@@ -94,6 +120,7 @@ export default {
 
 .background-img {
   background-size: cover;
+  background-position: center center;
   opacity: .5;
 }
 </style>