Site header redesign (#6567)

Merge pull request 6567

docs/_includes/header.html

@@ -1,19 +1,31 @@
 <header>
   <nav class="mobile-nav show-on-mobiles">
-    {% include primary-nav-items.html %}
+    {% include mobile-nav-items.html %}
   </nav>
-  <div class="grid">
+  <div class="flexbox">
-    <div class="unit one-third center-on-mobiles">
+    <div class="center-on-mobiles">
       <h1>
-        <a href="/">
+        <a href="/" class="logo">
           <span class="sr-only">Jekyll</span>
-          <img src="/img/logo-2x.png" width="249" height="115" alt="Jekyll Logo">
+          <img src="/img/logo-2x.png" width="140" height="65" alt="Jekyll Logo">
         </a>
       </h1>
     </div>
-    <nav class="main-nav unit two-thirds hide-on-mobiles">
+    <nav class="main-nav hide-on-mobiles">
       {% include primary-nav-items.html %}
-      {% include search/input.html %}
     </nav>
+    <div class="search hide-on-mobiles">
+      {% include search/input.html %}
+    </div>
+    <div class="meta hide-on-mobiles">
+      <ul>
+        <li>
+          <a href="{{ site.repository }}/releases/tag/v{{ jekyll.version }}">v{{ jekyll.version }}</a>
+        </li>
+        <li>
+          <a href="{{ site.repository }}">GitHub</a>
+        </li>
+      </ul>
+    </div>
   </div>
 </header>

docs/_includes/mobile-nav-items.html

@@ -0,0 +1,17 @@
+<ul>
+  <li class="{% if page.overview %}current{% endif %}">
+    <a href="/">Home</a>
+  </li>
+  <li class="{% if page.url contains '/docs/' %}current{% endif %}">
+    <a href="/docs/home/">Docs</a>
+  </li>
+  <li class="{% if page.author %}current{% endif %}">
+    <a href="/news/">News</a>
+  </li>
+  <li class="{% if page.url contains '/help/' %}current{% endif %}">
+    <a href="/help/">Help</a>
+  </li>
+  <li>
+    <a href="{{ site.repository }}">GitHub</a>
+  </li>
+</ul>

docs/_includes/primary-nav-items.html

@@ -11,7 +11,4 @@
   <li class="{% if page.url contains '/help/' %}current{% endif %}">
     <a href="/help/">Help</a>
   </li>
-  <li>
-    <a href="{{ site.repository }}">GitHub</a>
-  </li>
 </ul>

docs/_sass/_docsearch.scss

@@ -1,23 +1,33 @@
 .searchbox {
+  padding-top: 1px;
   .searchbox__input {
-    padding: 5px 5px 5px 29px;
+    padding: 6px 5px 5px 29px;
+    font-size: 0.75em;
     border: none;
     border-radius: 5px;
-    color: #444;
+    color: #555;
+    background-color: #333 !important;
+    box-shadow: 0 0 1px 0 #555;
 
     &::-webkit-input-placeholder {
       color: #aaa;
     }
-
     &:-ms-input-placeholder {
       color: #aaa;
     }
-
     &::placeholder {
       color: #aaa;
     }
+
+    &:focus, &:active {
+      color: #eaeaea;
+      background-color: #252525 !important;
     }
   }
+}
+
+.searchbox__submit svg { fill: #fc0 }
+.searchbox__reset svg { fill: #999 }
 
 .algolia-autocomplete {
   .ds-dropdown-menu {

docs/_sass/_style.scss

@@ -14,7 +14,6 @@ body {
   font: 300 21px Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #ddd;
   background-color: #333;
-  border-top: 5px solid #fc0;
   @include box-shadow(inset 0 3px 30px rgba(0,0,0,.3));
   text-shadow: 0 1px 3px rgba(0,0,0,.5);
   -webkit-font-feature-settings: "kern" 1;
@@ -50,13 +49,28 @@ footer {
 /* Header */
 
 header {
+  padding: 15px;
+  background: darken(#333, 3%);
 
   h1,
   nav { display: inline-block; }
 
+  .flexbox {
+    display: flex;
+    height: 50px;
+
+    & > * { margin: auto }
   }
 
-nav {
+  .logo {
+    display: block;
+    img { margin-top: -7px }
+  }
+
+  .search .svg-icons { display: none }
+}
+
+nav, .meta {
 
   ul {
     padding: 0;
@@ -68,16 +82,20 @@ nav {
   li { display: inline-block; }
 }
 
-.main-nav {
+.meta ul {
-  margin-top: 52px;
+  margin-left: 10px;
+
+  li { vertical-align: middle; }
+}
+
+.main-nav, .meta {
 
   li {
-    margin-right: 10px;
 
     a {
       @include border-radius(5px);
       font-weight: 900;
-      font-size: 14px;
+      font-size: 0.75em;
       padding: 0.5em 1em;
       text-shadow: none;
       text-transform: uppercase;
@@ -101,7 +119,6 @@ nav {
     }
   }
 }
-
 .mobile-nav {
   padding: 0 5px;
 
@@ -118,9 +135,9 @@ nav {
     color: #fc0;
     text-align: center;
     text-transform: uppercase;
-    font-size: 14px;
+    font-size: 0.625em;
     font-weight: 900;
-    padding: 5px;
+    padding: 10px 5px;
     @include border-radius(5px);
   }
 
@@ -160,10 +177,20 @@ h6:hover .header-link {
   opacity: 1;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 568px) {
-  .main-nav ul {
+  header { padding-bottom: 0 }
-    text-align: right;
 }
+@media (max-width: 580px) {
+  header {
+    .flexbox { height: auto }
+    .logo img { margin-top: 0 }
+  }
+}
+@media (max-width: 699px) {
+  .searchbox { display: none }
+}
+@media (max-width: 768px) {
+  .main-nav ul { text-align: right }
 }
 @media (max-width: 830px) {
   .main-nav {
@@ -171,9 +198,8 @@ h6:hover .header-link {
     .hide-on-mobiles { display: none; }
   }
 }
-
+@media (max-width: 890px) {
-@media (max-width: 950px) {
+  .meta { display: none; }
-  .searchbox { display: none;}
 }
 
 /* Footer */