Refine masthead

_includes/masthead.html

@@ -1,22 +1,21 @@
 <div class="masthead">
-  <div class="site-name">
-    <a href="{{ base_path }}/">{{ site.title }}</a>
-  </div>
-
+  <div class="masthead__inner-wrap">
     <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 }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
+            <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>

assets/_scss/_masthead.scss

@@ -3,6 +3,9 @@
    ========================================================================== */
 
 .masthead {
+  border-bottom: 1px solid $border-color;
+
+  &__inner-wrap {
     @include container;
     @include clearfix;
     padding: 2em 2em 1em;
@@ -26,19 +29,7 @@
     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;
-    padding: 10px 0;
+    margin: 0 1rem;
+    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
@@ -136,3 +132,13 @@ $susy: (
   //   toggle: top right,
   // ),
 );
+
+
+/*
+   Other
+   ========================================================================== */
+
+$border-radius              : 4px;
+$box-shadow                 : 0 1px 1px rgba(0, 0, 0, 0.125);
+$navicon-width              : 28px;
+$navicon-height             : 4px;