Updating content styles

* Heading respond to device sizes - ref #46
* Tighter spacing between title and content
* Clearer separator between strapline and content

vendor/assets/stylesheets/ustyle/components/_cta.scss

@@ -37,8 +37,8 @@
 .us-cta__title.us-cta__title {
   @include heading-font;
   margin-top: 0;
-  font-size: 16px;
-  font-size: rem($base-font-size);
+  font-size: 18px;
+  font-size: rem($base-font-size + 2px);
 
   @include respond-to(tablet) {
     @include heading(4, $extend: false);

vendor/assets/stylesheets/ustyle/content/_base.scss

@@ -1,33 +1,51 @@
 @import "ustyle/content/c-header";
 @import "ustyle/content/c-social";
 
+$content-heading-font-sizes: 30px, 24px, 20px, 18px, 16px, 16px;
+
 .us-content {
+  // scss-lint:disable all
+
   margin-bottom: $gutter-width;
 
+  @include baseline($base-font-size, $root: true);
+
+  @include respond-to(tablet) {
+    @include baseline(18px, $root: true);
+  }
+
+  @include respond-to(desktop) {
+    @include baseline(20px, $root: true);
+    text-rendering: optimizeSpeed;
+  }
+
+  @for $level from 1 through 6 {
+    h#{$level},
+    .us-heading--#{$level} {
+      @include heading($level, $font-sizes: $content-heading-font-sizes);
+    }
+  }
+
+  // scss-lint:enable all
+
   h2,
   h3,
   h4,
   h5,
   h6 {
-    margin-top: 50px;
+    margin-top: 30px;
+    margin-bottom: .5em;
+
+    @include respond-to(tablet) {
+      margin-top: 50px;
+    }
   }
   //
   // Default typography styling
   //
   p,
   ul,
   blockquote {
-    @include baseline($base-font-size);
-
-    @include respond-to(tablet) {
-      @include baseline(18px);
-    }
-
-    @include respond-to(desktop, true) {
-      @include baseline(20px);
-      text-rendering: optimizeSpeed;
-    }
-
     a {
       @extend %anchor-link;
     }
@@ -46,6 +64,7 @@
   //
   table {
     width: 100%;
+    font-size: 16px;
     border-collapse: separate;
 
     img,
@@ -60,6 +79,7 @@
     td,
     th {
       padding: $gutter-width / 4;
+      text-align: left;
       vertical-align: middle;
       border-bottom: 1px solid $c-bordergrey;
     }
@@ -94,8 +114,16 @@
   }
 
   .strap {
-    font-weight: 700;
-    color: $c-navy;
+    @include baseline(18px);
+
+    @include respond-to(tablet) {
+      @include baseline(22px);
+      margin-bottom: 2em;
+    }
+  }
+
+  .us-cta {
+    font-size: 16px;
   }
 
   .internal-menu {

vendor/assets/stylesheets/ustyle/content/_c-header.scss

@@ -12,19 +12,16 @@
 }
 
 .us-content__title {
-  @include heading(3);
   position: relative;
-  padding: .5em 0 1em 0;
+  padding: .5em 0 0 0;
   margin: 0;
   clear: both;
+  font-size: 1.6785em; // 26px
   color: $c-navy;
   background-color: #fff;
 
-  @include respond-to(tablet, true) {
-    @include heading(2, $extend: false);
-  }
-
   @include respond-to(desktop, true) {
     @include heading(1, $extend: false);
+    padding: .5em 0 1em 0;
   }
 }

vendor/assets/stylesheets/ustyle/content/_c-social.scss

@@ -1,6 +1,5 @@
 .us-social {
   padding-top: 1em;
-  margin-bottom: 2em;
 }
 
 .us-social-btn {

vendor/assets/stylesheets/ustyle/mixins/_baseline.scss

@@ -19,7 +19,7 @@
 ///   The cap height of the font being used on the element
 ///
 
-@mixin baseline($font-size: $base-font-size, $line-height: $base-line-ratio, $scale: $base-scale, $cap-height: $base-cap-height) {
+@mixin baseline($font-size: $base-font-size, $line-height: $base-line-ratio, $scale: $base-scale, $cap-height: $base-cap-height, $root: false) {
   // rhythm unit
   $rhythm: $line-height * $font-size / $scale;
   // number of rhythm units that can fit the font-size
@@ -34,8 +34,10 @@
   // if you use this mixin only on elements that have one direction margins
   // http://csswizardry.com/2012/06/single-direction-margin-declarations/
   // you can use this method with no worries.
-  padding-top: $baseline-distance * $base-font-size;
-  padding-top: $baseline-distance + rem;
-  margin-bottom: ($line-height - $baseline-distance) * $base-font-size;
-  margin-bottom: $line-height - $baseline-distance + rem;
+  @if $root != true {
+    padding-top: $baseline-distance * $base-font-size;
+    padding-top: $baseline-distance + rem;
+    margin-bottom: ($line-height - $baseline-distance) * $base-font-size;
+    margin-bottom: $line-height - $baseline-distance + rem;
+  }
 }

vendor/assets/stylesheets/ustyle/mixins/_typography.scss

@@ -89,9 +89,9 @@
 /// @param {Bool} $extend [true]
 ///   If set to `false` will redeclare the font-family settings
 
-@mixin heading($level, $heading-font: true, $extend: true) {
-  $font-size: nth($heading-font-sizes, $level);
-  $line-height: nth($heading-line-heights, $level);
+@mixin heading($level, $heading-font: true, $extend: true, $font-sizes: $heading-font-sizes, $line-heights: $heading-line-heights) {
+  $font-size: nth($font-sizes, $level);
+  $line-height: nth($line-heights, $level);
   @include heading-font($extend);
   font-size: em($font-size);
   line-height: $line-height + em;