Improve/standardize the navigation bar

- Give the navigation bar a solid color if there's no jumbotron image
- Add 'jumbotron' FrontMatter spec to allow for pages to specify
  jumbotrons

Blocked by stakx-io/stakx#95

layout/_header.scss

@@ -1,6 +1,7 @@
 .site-header {
-    background: scrim-gradient();
-    position: relative;
+    background: $color-primary;
+    width: 100%;
+    z-index: 1;
 
     a {
         text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.9);
@@ -20,3 +21,12 @@
         font-size: 1.5em;
     }
 }
+
+// Only use a fancy gradient when
+.page-jumbotron .site-header {
+    position: absolute;
+
+    @include respond-up(lg) {
+        background: scrim-gradient();
+    }
+}

layout/_jumbotron.scss

@@ -0,0 +1,18 @@
+.page-jumbotron {
+    overflow: hidden;
+}
+
+.page-jumbotron__image {
+    height: 300px;
+    left: 50%;
+    position: relative;
+    transform: translateX(-50%);
+
+    @include respond-up(md) {
+        height: 400px;
+    }
+
+    @include respond-up(lg) {
+        height: 500px;
+    }
+}

layout/_navigation.scss

@@ -2,7 +2,7 @@ $_default-nav-breakpoint: 'lg';
 
 .c-hamburger {
     position: absolute;
-    right: 0;
+    right: 5px;
     top: 0;
 
     @include respond-up($_default-nav-breakpoint) {
@@ -35,8 +35,6 @@ $_default-nav-breakpoint: 'lg';
     li {
         @include respond-down($_default-nav-breakpoint) {
             border-top: $border-default;
-            padding-bottom: 10px;
-            padding-top: 10px;
         }
 
         @include respond-up($_default-nav-breakpoint) {
@@ -52,7 +50,13 @@ $_default-nav-breakpoint: 'lg';
 
     a {
         color: $color-text-primary;
+        display: block;
         text-decoration: none;
+
+        @include respond-down($_default-nav-breakpoint) {
+            padding-bottom: 10px;
+            padding-top: 10px;
+        }
     }
 }
 

styles.scss.twig

@@ -28,6 +28,7 @@ permalink: /assets/css/styles.css
 @import 'layout/footer';
 @import 'layout/hamburger';
 @import 'layout/header';
+@import 'layout/jumbotron';
 @import 'layout/navigation';
 
 @import 'components/buttons';
@@ -38,8 +39,6 @@ permalink: /assets/css/styles.css
 @import 'components/theater';
 @import 'components/video-player';
 
-@import 'pages/index';
-
 @import 'utilities/border-helpers';
 @import 'utilities/os';
 @import 'utilities/positioning';