page headings

components/ContentPage.vue

@@ -1,6 +1,6 @@
 <template>
   <article class="content-page">
-    <h1 class="page-heading">{{ heading }}</h1>
+    <h1 v-if="heading !== ''" class="page-heading title">{{ heading }}</h1>
     <section class="content-container">
       <div v-if="$slots.default" class="content">
         <slot></slot>
@@ -17,7 +17,8 @@ export default {
   props: {
     heading: {
       type: String,
-      required: true
+      required: false,
+      default: '',
     }
   },
 
@@ -78,7 +79,7 @@ $z-index-top: 10;
 
   @media (min-width: $bp__layout) {
     width: 50%;
-    padding: 2rem;
+    padding: 1rem;
 
     background-color: rgba(0, 0, 0, .3);
   }
@@ -89,10 +90,21 @@ $z-index-top: 10;
 .page-heading {
   z-index: $z-index-top;
   position: relative;
+  margin: 2rem 1rem 1rem 2rem;
 
   @media (min-width: $bp__layout) {
-    max-width: 50%;
-    padding-right: $site-menu__header-width;
+    width: 14em;
+    max-width: calc(50% - #{$site-menu__header-width} - 3rem);
+  }
+}
+
+.title {
+  @include font-title();
+  color: $color__neutral-900;
+  font-size: 3.7vw;
+
+  @media (min-width: 90em) {
+    font-size: 3.5rem;
   }
 }
 

pages/services.vue

@@ -1,5 +1,5 @@
 <template>
-  <ContentPage heading="The Services Page Heading">
+  <ContentPage heading="My Services">
     <!-- TODO need to disable this if on mobile -->
     <BackgroundImagePreloader slot="background"
                               class="background-preloader"