From a9806efb60a4dab1cde14a05e31fd18b966c31e2 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Thu, 24 Jan 2019 09:44:26 +0000
Subject: [PATCH] page headings

---
 components/ContentPage.vue | 22 +++++++++++++++++-----
 pages/services.vue         |  2 +-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/components/ContentPage.vue b/components/ContentPage.vue
index cc0b2d5..ef1ca0f 100644
--- a/components/ContentPage.vue
+++ b/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;
   }
 }
 
diff --git a/pages/services.vue b/pages/services.vue
index 2b4184c..ac4d9de 100644
--- a/pages/services.vue
+++ b/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"