content-page layout

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;

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>