Merge pull request #48 from texastribune/blast-header

 Standardize blast header component

assets/scss/2-tools/_mixins.scss

@@ -78,4 +78,18 @@
 // $media-type - {String} ($mq-media-type) Media type: screen, print…
 //
 // Styleguide 2.1.4
-//
+//
+
+
+// @mixin gap
+//
+// This is to account for the eminent deprecation of [`grid-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). Some browsers honor `gap`, while others are living in the past with `grid-gap`. This keeps us working for both names. Eventually, we can remove this mixin in favor of just using gap. The new `gap` naming is introduced on Chrome 68+, Safari 11.2, Firefox 61+, and Edge 16+<br>Example: `.my-grid { @include gap($size-m) }`
+//
+// $size = $size-b - Size of gap
+//
+// Styleguide 2.1.3
+//
+@mixin gap($size: $size-b) {
+  grid-gap: $size;
+  gap: $size;
+}

assets/scss/6-components/_all.scss

@@ -5,6 +5,7 @@
 // Styleguide 6.0.0
 @import 'ad/ad';
 @import 'back-to-top/back-to-top';
+@import 'blast-header/blast-header';
 @import 'button/button';
 @import 'card/card';
 @import 'caption/caption';

assets/scss/6-components/blast-header/_blast-header.scss

@@ -0,0 +1,45 @@
+// Blast Header (c-blast-header)
+//
+// Header for Blast product.
+//
+// Markup: 6-components/blast-header/blast-header.html
+//
+// Styleguide 6.1.1
+$blast-header-height: 18rem;
+
+// Header w/ logos
+.c-blast-header {
+  background-size: cover;
+  height: $blast-header-height;
+
+  &__col {
+    margin-left: auto;
+    margin-right: auto;
+
+    &--brand {
+      margin-bottom: $size-m;
+      max-width: px-to-rem(450px);
+    }
+
+    &--title {
+      max-width: px-to-rem(250px);
+    }
+
+    &__logo {
+      height: px-to-rem(20px);
+    }
+  }
+  @supports (display: grid) {
+    @include mq($from: bp-m) {
+      &__inner {
+        @include gap;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+
+      &__col {
+        margin: 0;
+      }
+    }
+  }
+}

assets/scss/6-components/blast-header/blast-header.html

@@ -0,0 +1,11 @@
+<header class="c-blast-header l-align-center-children has-bg-black-off has-text-white has-l-btm-marg" style="background-image: url('/img/blast-header/c-blast-header-bg.jpg')">
+  <div class="c-blast-header__inner l-container l-width-full has-page-padding">
+    <div class="c-blast-header__col c-blast-header__col--brand">
+      <a class="l-display-block" href="/theblast/"><img class="l-width-max" src="/img/blast-header/c-blast-header-logo.png" alt="The Blast Logo"></a>
+    </div>
+    <div class="c-blast-header__col c-blast-header__col--title l-align-center-self">
+      <h1 class="is-hidden-until-bp-m t-size-m has-s-btm-marg">The best political<br>newsletter in Texas.</h1>
+      <a class="l-display-block" href="/"><img class="c-blast-header__logo l-width-max" src="/img/blast-header/c-blast-header-attribution-logo.svg" alt="A project by The Texas Tribune"></a>
+    </div>
+  </div>
+</header>

assets/scss/6-components/checkbox/_checkbox.scss

@@ -6,9 +6,8 @@
 //
 // Styleguide 6.1.5
 .c-checkbox {
+  @include gap;
   display: grid;
-  gap: $size-b;
-  grid-gap: $size-b;
   grid-template-columns: .2rem 1fr;
 
   &__box {

assets/scss/6-components/share/_share.scss

@@ -10,8 +10,8 @@ $share-width: $size-xxxl;
 $share-gap: $size-m;
 
 .c-share {
+  @include gap($share-gap);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax($share-width, 1fr));
   grid-template-rows: repeat(auto-fit, minmax($share-height, 1fr));
-  grid-gap: $share-gap;
 }

assets/scss/6-components/sponsor-card/_sponsor-card.scss

@@ -9,9 +9,9 @@ $c-sponsor-card-padding: $size-s;
 $c-sponsor-card-min: 300px;
 
 .c-sponsor-card {
+  @include gap($c-sponsor-card-padding);
   border-top: 5px solid $color-sponsor;
   display: grid;
-  grid-gap: $c-sponsor-card-padding;
   grid-template-columns: repeat(auto-fit, minmax($c-sponsor-card-min, auto));
   padding: ($c-sponsor-card-padding * 3) $c-sponsor-card-padding
     $c-sponsor-card-padding;