Merge branch 'feature/masthead-alignment' into develop

_layouts/default.html

@@ -20,12 +20,12 @@ layout: compress
 
     <div class="page__footer">
       <footer>
+        {% include footer/custom.html %}
         {% include footer.html %}
       </footer>
     </div>
 
     {% include scripts.html %}
-    {% include footer/custom.html %}
 
   </body>
 </html>

assets/_scss/_archive.scss

@@ -149,7 +149,6 @@ a:hover {
 
   @include breakpoint($small) {
     margin-bottom: 0;
-    text-align: center;
     @include gallery(4 of 12);
 
     .feature__item-teaser {
@@ -158,14 +157,8 @@ a:hover {
     }
   }
 
-  .archive__item-body {
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-  }
-
   &--left {
     @include full();
-    // margin-bottom: 2em;
     font-size: 1.25rem;
 
     .archive__item-teaser {
@@ -187,7 +180,6 @@ a:hover {
 
   &--right {
     @include full();
-    // margin-bottom: 2em;
     font-size: 1.25rem;
 
     .archive__item-teaser {
@@ -211,7 +203,6 @@ a:hover {
 
   &--center {
     @include full();
-    // margin-bottom: 2em;
     font-size: 1.25rem;
 
     .archive__item-teaser {

assets/_scss/_footer.scss

@@ -3,16 +3,24 @@
    ========================================================================== */
 
 .page__footer {
-  @include container;
+  @include full();
   @include clearfix;
   margin-top: 3em;
-  padding: 0 1em 3em;
   color: mix(#fff, $gray, 25%);
   animation: intro 0.3s both;
   animation-delay: 0.45s;
+  background-color: $lighter-gray;
+  border-top: 1px solid $light-gray;
 
-  @include breakpoint($x-large) {
-    max-width: $x-large;
+  footer {
+    @include container;
+    @include clearfix;
+    margin-top: 2em;
+    padding: 0 1em 2em;
+
+    @include breakpoint($x-large) {
+      max-width: $x-large;
+    }
   }
 
   a {
@@ -23,21 +31,18 @@
       text-decoration: underline;
     }
   }
+
+  .fa {
+    color: mix(#fff, $gray, 25%);
+  }
 }
 
 .page__footer-copyright {
   font-family: $global-font-family;
   font-size: $type-size-7;
-
-  @include breakpoint($large) {
-    @include prefix(2.5 of 12);
-  }
 }
 
 .page__footer-follow {
-  @include breakpoint($large) {
-    @include prefix(2.5 of 12);
-  }
 
   ul {
     margin: 0;

assets/_scss/_masthead.scss

@@ -14,8 +14,6 @@
     @include clearfix;
     padding: 1em 1em 1em;
     font-family: $sans-serif-narrow;
-    font-weight: 700;
-    text-transform: uppercase;
 
     @include breakpoint($x-large) {
       max-width: $x-large;
@@ -32,9 +30,6 @@
 }
 
 .masthead__menu {
-  @include breakpoint($large) {
-    @include prefix(2.5 of 12);
-  }
 
   ul {
     margin: 0;
@@ -47,10 +42,10 @@
 .masthead__menu-item {
   display: block;
   list-style-type: none;
-  font-size: $type-size-6;
   white-space: nowrap;
 
   &--lg {
-    font-size: $type-size-5;
+    padding-right: 2em;
+    font-weight: 700;
   }
 }

assets/_scss/_page.scss

@@ -49,6 +49,12 @@
 }
 
 .page__content {
+
+  h2 {
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid $border-color;
+  }
+
   p, li, dl {
     font-size: 1em;
   }
@@ -113,7 +119,6 @@
     margin-bottom: 2em;
     padding: 3em 0;
     @include clearfix;
-    text-align: center;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
@@ -121,8 +126,12 @@
     animation-delay: 0.25s;
 
     .wrapper {
-      padding-left: 2em;
-      padding-right: 2em;
+      padding-left: 1em;
+      padding-right: 1em;
+
+      @include breakpoint($x-large) {
+        max-width: $x-large;
+      }
     }
 
     .page__title,
@@ -133,6 +142,10 @@
       text-shadow: 1px 1px 4px rgba(#000, 0.5);
     }
 
+    .page__lead {
+      max-width: $medium;
+    }
+
     .page__title {
       font-size: $type-size-2;