start spiking out a more responsive header/nav

site/_includes/header.html

@@ -1,6 +1,9 @@
 <header>
+  <nav class="mobile-nav show-on-mobiles">
+    {% include primary-nav-items.html %}
+  </nav>
   <div class="grid">
-    <div class="unit one-quarter center-on-mobiles">
+    <div class="unit one-third center-on-mobiles">
       <h1>
         <a href="{{ site.url }}/">
           <span>Jekyll</span>
@@ -8,18 +11,8 @@
         </a>
       </h1>
     </div>
-    <nav class="unit three-quarters center-on-mobiles">
-      <ul class="grid">
-        <li class="unit one-third {% if page.overview %}current{% endif %}">
-          <a href="{{ site.url }}/">Overview</a>
-        </li>
-        <li class="unit one-third {% unless page.overview %}current{% endunless %}">
-          <a href="{{ site.url }}/docs">Documentation</a>
-        </li>
-        <li class="unit one-third">
-          <a href="https://github.com/mojombo/jekyll">View on GitHub</a>
-        </li>
-      </ul>
+    <nav class="main-nav unit two-thirds hide-on-mobiles">
+      {% include primary-nav-items.html %}
     </nav>
   </div>
 </header>

site/_includes/primary-nav-items.html

@@ -0,0 +1,11 @@
+<ul>
+  <li class="{% if page.overview %}current{% endif %}">
+    <a href="{{ site.url }}/">Overview</a>
+  </li>
+  <li class="{% unless page.overview %}current{% endunless %}">
+    <a href="{{ site.url }}/docs">Doc<span class="show-on-mobiles">s</span><span class="hide-on-mobiles">umentation</span></a>
+  </li>
+  <li class="">
+    <a href="https://github.com/mojombo/jekyll"><span class="hide-on-mobiles">View on </span>GitHub</a>
+  </li>
+</ul>

site/css/gridism.css

@@ -69,6 +69,10 @@
 .pull-left    { float: left; }
 .pull-right   { float: right; }
 
+.show-on-mobiles {
+  display: none;
+}
+
 /* Responsive Stuff */
 @media screen and (max-width: 568px) {
   /* Stack anything that isn’t full-width on smaller screens */
@@ -89,6 +93,12 @@
   .hide-on-mobiles {
     display: none !important;
   }
+  .show-on-mobiles {
+    display: block !important;
+  }
+  a .show-on-mobiles {
+    display: inline !important;
+  }
 }
 
 /* Expand the wrap a bit further on larger screens */

site/css/style.css

@@ -38,6 +38,64 @@ nav li {
   display: inline-block;
 }
 
+.main-nav {
+  margin-top: 52px;
+  text-align: center;
+}
+
+.main-nav ul {
+  display: inline-block;
+}
+
+.main-nav li {
+  margin-left: 10px;
+}
+
+.main-nav li a {
+  border-radius: 5px;
+  font-weight: 800;
+  font-size: 14px;
+  padding: 0.5em 1em;
+  text-shadow: none;
+  text-transform: uppercase;
+  transition: all .25s;
+   -moz-transition: all .25s;
+   -webkit-transition: all .25s;
+}
+
+.main-nav li a:hover {
+  background: #252525;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
+  text-shadow: 0 1px 3px rgba(0,0,0,.5);
+}
+
+.main-nav li.current a {
+  background: #fc0;
+  color: #222;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
+  text-shadow: 0 1px 0 rgba(255,255,255,.3);
+}
+
+.mobile-nav ul {
+  overflow: hidden;
+  width: 100%;
+  display: table;
+}
+
+.mobile-nav a {
+  float: left;
+  width: 100%;
+  background: #fc0;
+  color: #333;
+  box-shadow: inset 0 0 3px #c00;
+  text-align: center;
+}
+
+.mobile-nav li {
+  display: table-cell;
+  width: 33.3%;
+}
+
 /* Footer */
 
 body > footer {