3 files changed, 126 insertions(+), 133 deletions(-)

M _includes/masthead.html
M _sass/minimal-mistakes/_masthead.scss
M _sass/minimal-mistakes/_navigation.scss

@@ 1,31 1,29 @@
 {% capture logo_path %}{{ site.logo }}{% endcapture %}
 
-<div class="masthead">
-  <nav id="site-nav" class="greedy-nav">
-    {% unless logo_path == empty %}
-      <a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt=""></a>
-    {% endunless %}
-    <a class="site-title" href="{{ '/' | relative_url }}">
-      {{ site.masthead_title | default: site.title }}
-      {% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
-    </a>
-    <ul class="visible-links">
-      {%- for link in site.data.navigation.main -%}
-        <li class="masthead__menu-item">
-          <a href="{{ link.url | relative_url }}"{% if link.description %} title="{{ link.description }}"{% endif %}>{{ link.title }}</a>
-        </li>
-      {%- endfor -%}
-    </ul>
-    {% if site.search == true %}
-    <button class="search__toggle" type="button">
-      <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
+<nav id="site-nav" class="greedy-nav masthead">
+  {% unless logo_path == empty %}
+    <a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt=""></a>
+  {% endunless %}
+  <a class="site-title" href="{{ '/' | relative_url }}">
+    {{ site.masthead_title | default: site.title }}
+    {% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
+  </a>
+  <ul class="visible-links">
+    {%- for link in site.data.navigation.main -%}
+      <li class="masthead__menu-item">
+        <a href="{{ link.url | relative_url }}"{% if link.description %} title="{{ link.description }}"{% endif %}>{{ link.title }}</a>
+      </li>
+    {%- endfor -%}
+  </ul>
+  {% if site.search == true %}
+  <button class="search__toggle" type="button">
+    <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
 <i class="icon fas fa-fw fa-search"></i>
-    </button>
-    {% endif %}
-    <button class="greedy-nav__toggle hidden" type="button">
-      <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
-      <div class="navicon"></div>
-    </button>
-    <ul class="hidden-links hidden"></ul>
-  </nav>
-</div>
+  </button>
+  {% endif %}
+  <button class="greedy-nav__toggle hidden" type="button">
+    <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
+    <div class="navicon"></div>
+  </button>
+  <ul class="hidden-links hidden"></ul>
+</nav>

@@ 41,6 41,106 @@
   }
 }
 
+.greedy-nav {
+  display: flex;
+  align-items: center;
+  min-height: $nav-height;
+
+  a {
+    display: block;
+    margin: 0 1rem;
+    text-decoration: none;
+
+    &.site-logo {
+      margin-left: 0;
+      margin-right: 0.5rem;
+    }
+
+    &.site-title {
+      margin-left: 0;
+    }
+  }
+
+  &__toggle {
+    align-self: center;
+    height: $nav-toggle-height;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .visible-links {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+    overflow: hidden;
+
+    li {
+      flex: none;
+    }
+
+    a {
+      position: relative;
+    }
+  }
+
+  .hidden-links {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 15px;
+    padding: 5px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: $border-radius;
+    box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
+
+    &.hidden {
+      display: none;
+    }
+
+    a {
+      margin: 0;
+      padding: 10px 20px;
+      font-size: $type-size-5;
+    }
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: -11px;
+      right: 10px;
+      width: 0;
+      border-style: solid;
+      border-width: 0 10px 10px;
+      display: block;
+      z-index: 0;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: -10px;
+      right: 10px;
+      width: 0;
+      border-style: solid;
+      border-width: 0 10px 10px;
+      display: block;
+      z-index: 1;
+    }
+
+    li {
+      display: block;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
 .site-logo img {
   max-height: 2rem;
 }

@@ 150,111 150,6 @@
 }
 
 /*
-     Priority plus navigation
-     ========================================================================== */
-
-.greedy-nav {
-  position: relative;
-  display: flex;
-  align-items: center;
-  min-height: $nav-height;
-
-  a {
-    display: block;
-    margin: 0 1rem;
-    text-decoration: none;
-
-    &.site-logo {
-      margin-left: 0;
-      margin-right: 0.5rem;
-    }
-
-    &.site-title {
-      margin-left: 0;
-    }
-  }
-
-  &__toggle {
-    align-self: center;
-    height: $nav-toggle-height;
-    border: 0;
-    outline: none;
-    cursor: pointer;
-  }
-
-  .visible-links {
-    display: flex;
-    justify-content: flex-end;
-    flex: 1;
-    overflow: hidden;
-
-    li {
-      flex: none;
-    }
-
-    a {
-      position: relative;
-    }
-  }
-
-  .hidden-links {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: 15px;
-    padding: 5px;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: $border-radius;
-    box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
-
-    &.hidden {
-      display: none;
-    }
-
-    a {
-      margin: 0;
-      padding: 10px 20px;
-      font-size: $type-size-5;
-    }
-
-    &:before {
-      content: "";
-      position: absolute;
-      top: -11px;
-      right: 10px;
-      width: 0;
-      border-style: solid;
-      border-width: 0 10px 10px;
-      display: block;
-      z-index: 0;
-    }
-
-    &:after {
-      content: "";
-      position: absolute;
-      top: -10px;
-      right: 10px;
-      width: 0;
-      border-style: solid;
-      border-width: 0 10px 10px;
-      display: block;
-      z-index: 1;
-    }
-
-    li {
-      display: block;
-      border-bottom-width: 1px;
-      border-bottom-style: solid;
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-  }
-}
-
-/*
      Navigation list
      ========================================================================== */