update spacing

components/NoContent.vue

@@ -0,0 +1,81 @@
+<template>
+  <article class="is-mounted no-content-page no-content-bg">
+    <h1 class="no-content-heading page-title">{{ heading }}</h1>
+    <p class="msg-txt">{{ message }}</p>
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'NoContent',
+
+  props: {
+    heading: {
+      type: String,
+      required: true,
+    },
+    message: {
+      type: String,
+      required: false,
+      default () {
+        return 'This page blah blah ...'
+      },
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.no-content-page {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+  text-align: center;
+  padding: $site-menu__header-height * 2 1rem 0;
+
+  @media (min-width: $bp__layout) {
+    padding: 0 0 0 $site-menu__header-width;
+    justify-content: center;
+  }
+}
+
+.no-content-bg {
+  $color-inner: $color__primary-500;
+  $color-outer: $color__primary-100;
+  $transparency-outer: .1;
+  $transparency-inner: .05;
+
+  background-color: rgba($color-inner, .1);
+  background: linear-gradient(
+    to bottom,
+    rgba($color-inner, $transparency-inner),
+    rgba($color-outer, $transparency-outer)
+  );
+
+  @media (min-width: $bp__layout) {
+    background:
+      linear-gradient(
+        to bottom,
+        rgba($color-outer, $transparency-outer),
+        rgba($color-inner, $transparency-inner),
+        rgba($color-outer, $transparency-outer)
+      ),
+      linear-gradient(
+        to right,
+        rgba($color-outer, $transparency-outer),
+        rgba($color-inner, $transparency-inner),
+        rgba($color-outer, $transparency-outer)
+      );
+  }
+}
+
+.no-content-heading {
+  margin-bottom: .25em;
+}
+
+.msg-txt {
+  color: $color__neutral-700;
+}
+</style>
+