Merge branch 'improvement/navigation' into improvement/navigation-new

# Conflicts:
#	_includes/nav.html
#	_layouts/default.html

_sass/layout.scss

@@ -37,7 +37,7 @@
   }
 }
 
-.main-content-wrap {
+.main-wrap {
   @include mq(md) {
     position: absolute;
     top: 0;
@@ -48,9 +48,13 @@
     overflow-x: hidden;
     overflow-y: scroll;
   }
+
+  &:focus {
+    outline: none;
+  }
 }
 
-.main-content {
+.main {
   @include mq(md) {
     position: relative;
     max-width: $content-width;
@@ -64,11 +68,7 @@
   }
 }
 
-.js-main-content:focus {
-  outline: none;
-}
-
-.page {
+.main-content-wrap {
   @include container;
   padding-top: $gutter-spacing-sm;
   padding-bottom: $gutter-spacing-sm;
@@ -79,7 +79,7 @@
   }
 }
 
-.page-header {
+.main-header {
   @include container;
   display: none;
   padding-top: $gutter-spacing-sm;
@@ -103,7 +103,7 @@
   }
 }
 
-.navigation,
+.site-nav,
 .site-header,
 .site-footer {
   width: 100%;
@@ -113,9 +113,7 @@
   }
 }
 
-.navigation {
-  @include container;
-
+.site-nav {
   @include mq(md) {
     padding-top: $sp-8;
     padding-bottom: $gutter-spacing-sm;
@@ -165,7 +163,7 @@
   }
 }
 
-.menu-button {
+.site-button {
   appearance: none;
   display: flex;
   height: 100%;
@@ -175,12 +173,18 @@
   text-transform: uppercase;
   background: transparent;
   border: 0;
+  @include fs-3;
 
   @include mq(md) {
     display: none;
   }
 }
 
+.site-title:hover,
+.site-button:hover {
+  background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
+}
+
 // stylelint-disable selector-max-type
 
 body {
@@ -202,6 +206,8 @@ body {
   left: 0;
   padding-top: $sp-4;
   padding-bottom: $sp-4;
+  color: $grey-dk-000;
+  @include fs-2;
 
   @include mq(md) {
     position: static;