update

assets/scss/_base.scss

@@ -1,3 +1,8 @@
+* {
+  outline: 1px dotted red;
+}
+
+
 html {
   overflow: hidden;
 }

assets/scss/_globals.scss

@@ -1,5 +1,8 @@
 $bp__m: 40em;
 
+// layout optomised for larger screens
+$bp__layout: $bp__m;
+
 $site-menu__header-width: 3em;
 $site-menu__header-height: 3em;
 

components/ContentPage.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="content-page">
+    <div class="background">
+    </div>
+    <h1>{{ heading }}</h1>
+    <section class="content-container">
+      <slot></slot>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    bgLoading: {
+      type: String,
+      required: false,
+      default: function () {
+        return 'linear-gradient(to top, orange, yellow)'
+      }
+    },
+    img: {
+      type: String,
+      required: false,
+      default: function () {
+        return 'url(https://via.placeholder.com/1920x1080)'
+      }
+    },
+    heading: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  computed: {
+    loadingStyle () {
+      return {
+        backgroundcolor: 'rgba(red, .5)'
+      }
+    }
+  },
+
+  methods: {
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+.content-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: $site-menu__header-width 0 0 0;
+
+  @media (min-width: $bp__layout) {
+    padding:  0 0 0 $site-menu__header-width;
+  }
+
+  background-color: rgba(black, .1); // TEMP
+}
+</style>

components/SiteMenu.vue

@@ -32,8 +32,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$bp-layout: $bp__m;
-
 .menu-drawer {
   position: absolute;
   width: 100%;
@@ -51,7 +49,7 @@ $bp-layout: $bp__m;
     transform: translate3d(0, 100%, 0);
   }
 
-  @media (min-width: $bp-layout) {
+  @media (min-width: $bp__layout) {
     max-width: 30em;
     top: 0;
     right: 100%;
@@ -67,7 +65,7 @@ $bp-layout: $bp__m;
   display: flex;
   flex-direction: column;
 
-  @media (min-width: $bp-layout) {
+  @media (min-width: $bp__layout) {
     flex-direction: row;
   }
 }
@@ -82,7 +80,7 @@ $bp-layout: $bp__m;
   position: relative;
   flex: 0 0 $site-menu__header-height;
 
-  @media (min-width: $bp-layout) {
+  @media (min-width: $bp__layout) {
     max-width: $site-menu__header-width;
   }
 
@@ -95,7 +93,7 @@ $bp-layout: $bp__m;
 
     background-color: rgba(green, .5);
 
-    @media (min-width: $bp-layout) {
+    @media (min-width: $bp__layout) {
       position: absolute;
       top: 0;
       right: 100%;

layouts/default.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="page-container">
+    <div class="page">
+      <nuxt />
+    </div>
     <SiteMenu
       :is-open="isMenuOpen"
       @toggleMenu="toggleMenu"
     />
-    <div class="page-content">
-      <nuxt />
-    </div>
   </div>
 </template>
 
@@ -43,4 +43,10 @@ export default {
 
   background-color: orange; // TEMP
 }
+
+.page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
 </style>

pages/index.vue

@@ -1,12 +1,19 @@
 <template>
-  <section class="index">
-    index
-  </section>
+  <ContentPage heading="The Index Page Heading">
+    <p>The Index Page Content ...</p>
+  </ContentPage>
 </template>
 
 <script>
+import ContentPage from '@/components/ContentPage'
+
 export default {
   name: 'HomePage',
+
+  components: {
+    ContentPage
+  },
+
   data() {
     return {
     }