Merge pull request #519 from rust-lang/improve-responsive-nav-behavior-498

fix(nav): improve responsive nav behavior.

Author: ashleygwilliams

src/styles/_tachyons-ext.scss

@@ -1,5 +1,15 @@
 // Custom classes we use to extend Tachyons
 
+// Note that for *new* definitions we need to apply only at the smallest sizes,
+// we have to specify as much (rather than having them be the default), because
+// media queries do not increase specificity, and as such our classes will
+// *always* trump Tachyon's classes by way of being defined *after* them.
+@media screen and (max-width: 30em) {
+  .flex-20-s {
+    flex: 0 0 20%;
+  }
+}
+
 @media screen and (min-width: 30em) and (max-width: 60em) {
   .max-width-half-m {
     max-width: 50%;

templates/nav.hbs

@@ -7,13 +7,13 @@
     <span class="pl4 db dn-l">{{!-- spacer --}}</span>
   </a>
 
-  <ul class="nav list w-100 w-auto-l flex flex-none flex-row flex-wrap justify-center justify-end-l items-center pv2 ph4-ns">
-    <li class="flex-inline pv2 ph2 ph4-ns"><a href="/tools/install">Install</a></li>
-    <li class="flex-inline pv2 ph2 ph4-ns"><a href="/learn">Learn</a></li>
-    <li class="flex-inline pv2 ph2 ph4-ns"><a href="/tools">Tools</a></li>
-    <li class="flex-inline pv2 ph2 ph4-ns"><a href="/governance">Governance</a></li>
-    <li class="flex-inline pv2 ph2 ph4-ns"><a href="/community">Community</a></li>
-    <li class="flex-inline pv2 ph2 ph4-ns"><a href="https://blog.rust-lang.org/" target="_blank" rel="noopener">Blog</a></li>
+  <ul class="nav list w-100 w-auto-l flex flex-none flex-row flex-wrap justify-center justify-end-l items-center pv2 ph0 ph4-ns">
+    <li class="tc pv2 ph2 ph4-ns flex-20-s"><a href="/tools/install">Install</a></li>
+    <li class="tc pv2 ph2 ph4-ns flex-20-s"><a href="/learn">Learn</a></li>
+    <li class="tc pv2 ph2 ph4-ns flex-20-s"><a href="/tools">Tools</a></li>
+    <li class="tc pv2 ph2 ph4-ns flex-20-s"><a href="/governance">Governance</a></li>
+    <li class="tc pv2 ph2 ph4-ns flex-20-s"><a href="/community">Community</a></li>
+    <li class="tc pv2 ph2 ph4-ns flex-20-s"><a href="https://blog.rust-lang.org/" target="_blank" rel="noopener">Blog</a></li>
   </ul>
 
   <div class=" w-100 w-auto-l flex-none flex justify-center pv4 pv-0-l languages">