feat: large page header (#132)

* new: large version of the page header * large header responsive styles Co-authored-by: Nathan Rogan <nathan.rogan@wmca.org.uk>
wmcadigital · Apr 29, 2021 · e7eaf0f · e7eaf0f
1 parent 95f44b4
commit e7eaf0f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git a/src/wmcads/assets/sass/wmcads-grid/_grid-cols.scss b/src/wmcads/assets/sass/wmcads-grid/_grid-cols.scss
@@ -14,7 +14,6 @@ textarea,
 .wmcads-grid {
   display: flex;
   width: 100%;
-  letter-spacing: -0.31em;
   text-rendering: optimizespeed;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;

diff --git a/src/wmcads/assets/sass/wmcads-grid/_wmcads-grid.scss b/src/wmcads/assets/sass/wmcads-grid/_wmcads-grid.scss
@@ -27,7 +27,6 @@ textarea,
   [class*="wmcads-col-"] {
     display: inline-block;
     zoom: 1;
-    letter-spacing: normal;
     word-spacing: normal;
     text-rendering: auto;
     vertical-align: top;

diff --git a/src/wmcads/components/page-header/_page-header.njk b/src/wmcads/components/page-header/_page-header.njk
@@ -3,7 +3,7 @@
 {% set text = params.text if params.text else "Page header" %}
 {% set iconName = params.icon if params.icon else "" %}
 
-<div class="wmcads-page-header {% if(params.home) %} wmcads-page-header__home {% endif %} {% if(params.topm) %} wmcads-m-t-md {% endif %}" style="background-image:url('https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000')">
+<div class="wmcads-page-header {% if(params.home) %} wmcads-page-header__home {% endif %} {% if(params.topm) %} wmcads-m-t-md {% endif %} {% if(params.large) %} wmcads-page-header__large {% endif %}" style="background-image:url('https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000')">
   {% if(params.title) %}
   <div class="wmcads-container wmcads-page-header-container">
         <div class="wmcads-page-header-box">

diff --git a/src/wmcads/components/page-header/_page-header.scss b/src/wmcads/components/page-header/_page-header.scss
@@ -35,6 +35,13 @@
     }
   }
 
+  &__large {
+    height: 600px;
+    @media screen and (max-width: $breakpoint-md) {
+      height: 300px;
+    }
+  }
+
   img {
     display: block;
     width: 100%;

diff --git a/src/www/pages/components/page-header/index.njk b/src/www/pages/components/page-header/index.njk
@@ -29,6 +29,16 @@
     })
   ])  
 }}
+<h2>Plain Header - Large</h2>
+<p>Where a larger page header is needed you can use the following which will modify the height to 600px.</p>
+{{
+  compExample([
+    wmcadsPageHeader({
+      title: false,
+      large: true
+    })
+  ])  
+}}
 <h2>Homepage Header</h2>
 {{
   compExample([