Refine masthead

_includes/masthead.html

@@ -1,22 +1,21 @@
 <div class="masthead">
-  <div class="site-name">
+  <div class="masthead__inner-wrap">
-    <a href="{{ base_path }}/">{{ site.title }}</a>
+    <div class="masthead__menu">
+      <nav id="site-nav" class="greedy-nav">
+        <button><div class="navicon"></div></button>
+        <ul class="visible-links">
+          <li class="masthead__menu-item masthead__menu-item--lg"><a href="{{ base_path }}/">{{ site.title }}</a></li>
+          {% for link in site.data.navigation.main %}
+            {% if link.url contains 'http' %}
+              {% assign domain = '' %}
+              {% else %}
+              {% assign domain = base_path %}
+            {% endif %}
+            <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
+          {% endfor %}
+        </ul>
+        <ul class="hidden-links hidden"></ul>
+      </nav>
+    </div>
   </div>
-
+</div>
-  <div class="masthead__menu">
-    <nav id="site-nav" class="greedy-nav">
-      <button><div class="navicon"></div></button>
-      <ul class="visible-links">
-        {% for link in site.data.navigation.main %}
-          {% if link.url contains 'http' %}
-            {% assign domain = '' %}
-            {% else %}
-            {% assign domain = base_path %}
-          {% endif %}
-          <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
-        {% endfor %}
-      </ul>
-      <ul class="hidden-links hidden"></ul>
-    </nav>
-  </div>
-</div>

assets/_scss/_masthead.scss

@@ -3,42 +3,33 @@
    ========================================================================== */
 
 .masthead {
-  @include container;
+  border-bottom: 1px solid $border-color;
-  @include clearfix;
-  padding: 2em 2em 1em;
-  font-family: $sans-serif-narrow;
-  font-weight: 700;
-  text-transform: uppercase;
 
-  @include breakpoint($large) {
+  &__inner-wrap {
-    padding-left: 1em;
+    @include container;
-    padding-right: 1em;
+    @include clearfix;
+    padding: 2em 2em 1em;
+    font-family: $sans-serif-narrow;
+    font-weight: 700;
+    text-transform: uppercase;
+
+    @include breakpoint($large) {
+      padding-left: 1em;
+      padding-right: 1em;
+    }
+
+    @include breakpoint($x-large) {
+      max-width: $x-large;
+    }
+
+    nav {
+      z-index: 10;
+    }
+
+    a {
+      text-decoration: none;
+    }
   }
-
-  @include breakpoint($x-large) {
-    max-width: $x-large;
-  }
-
-  nav {
-    z-index: 10;
-  }
-
-  a {
-    text-decoration: none;
-  }
-}
-
-/* Site name */
-.site-name {
-  @include breakpoint($large) {
-    @include prefix(2 of 12);
-  }
-
-  @include breakpoint($x-large) {
-    @include prefix(2.5 of 12);
-  }
-
-  font-size: $type-size-5;
 }
 
 .masthead__menu {
@@ -63,4 +54,8 @@
   list-style-type: none;
   font-size: $type-size-6;
   white-space: nowrap;
+
+  &--lg {
+    font-size: $type-size-5;
+  }
 }

assets/_scss/_navigation.scss

@@ -175,8 +175,8 @@
 
   a {
     display: block;
-    margin: 0 20px;
+    margin: 0 1rem;
-    padding: 10px 0;
+    padding: 0.5rem 0;
     color: $gray;
     text-decoration: none;
 
@@ -189,7 +189,7 @@
     position: absolute;
     height: 100%;
     right: 0;
-    padding: 0 8px;
+    padding: 0 0.5rem;
     border: 0;
     outline: none;
     background-color: $primary-color;
@@ -198,10 +198,11 @@
   }
 
   .visible-links {
-    display: inline-table;
+    display: table;
 
     li {
       display: table-cell;
+      vertical-align: middle;
 
       &:first-child {
         font-weight: bold;

assets/_scss/_utilities.scss

@@ -272,9 +272,6 @@ body:hover .visually-hidden button {
    Navicons
    ========================================================================== */
 
-$navicon-width  : 28px;
-$navicon-height : 4px;
-
 .navicon {
   position: relative;
   width: $navicon-width;

assets/_scss/_variables.scss

@@ -94,10 +94,6 @@ $link-color-hover           : darken($link-color, 10);
 $link-color-visited         : lighten($link-color-hover, 20);
 $link-color-focus           : darken($link-color-visited, 10);
 
-$border-radius              : 4px;
-
-$box-shadow                 : 0 1px 1px rgba(0, 0, 0, 0.125);
-
 
 /*
    Breakpoints
@@ -135,4 +131,14 @@ $susy: (
   //   output: overlay,
   //   toggle: top right,
   // ),
-);
+);
+
+
+/*
+   Other
+   ========================================================================== */
+
+$border-radius              : 4px;
+$box-shadow                 : 0 1px 1px rgba(0, 0, 0, 0.125);
+$navicon-width              : 28px;
+$navicon-height             : 4px;