add balance to bg-shape for page-header

Author: mansona

addon/styles/background-shapes.css

@@ -32,3 +32,13 @@
   background-repeat: no-repeat;
   background-position: bottom left;
 }
+
+@media (max-width: 1007px) {
+  .bg-shape-boxes-bottom {
+    background-size: 300px;
+  }
+
+  .bg-shape-boxes-bottom + * {
+    background-size: 100px;
+  }
+}

addon/templates/components/es-page-header.hbs

@@ -1,9 +1,11 @@
 <div class="es-page-header bg-shape-boxes-bottom" ...attributes>
-  <div class="container">
-    <h1 class="text-hero-xl">{{@headline}}</h1>
+  <div class="container layout">
+    <div class="lg:col-5">
+      <h1 class="text-hero-xl">{{@headline}}</h1>
 
-    <p class="text-hero-base {{if hasBlock "mb-2"}}">{{@detail}}</p>
+      <p class="text-hero-base {{if hasBlock "mb-2"}}">{{@detail}}</p>
 
-    {{yield}}
+      {{yield}}
+    </div>
   </div>
-</div>
+</div>

docs/components/page-header.md

@@ -12,6 +12,12 @@ should use the `<EsPageHeader />` component:
 >
   <EsButton>Go</EsButton>
 </EsPageHeader>
+<section>
+  <div class="container">
+    <h2>Next Section</h2>
+    <p>This is here to show how the bg-shape continues onto the next section</p>
+  </div>
+</section>
 ```
 
 This example is making use of the [`dark` css helper](/css/helpers#dark)