From 39f195389eca3e7ed7f4a7791bf0792ef6ccef8c Mon Sep 17 00:00:00 2001
From: Alec Lomas <alec@lowmess.com>
Date: Mon, 27 Mar 2017 19:35:28 -0700
Subject: [PATCH] fix(site): show nav links on mobile

---
 site/index.html | 13 +++++++++----
 site/main.js    | 10 +++++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/site/index.html b/site/index.html
index e964ca8..e8da974 100644
--- a/site/index.html
+++ b/site/index.html
@@ -9,9 +9,12 @@
   </head>
   <body class="sans-serif min-vh-100 dark-gray">
     <header class="pa4">
-      <nav class="flex justify-between items-center">
-        <h1 class="f3 fw4 mv0 di flex-none">hero-patterns.js</h1>
-        <ul class="list tr dn db-ns pl0 mv0">
+      <nav class="flex-ns justify-between-ns items-center-ns">
+        <div class="flex-none-ns flex items-center mb2 mb0-ns">
+          <h1 class="f3 fw4 mv0 mr2">hero-patterns.js</h1>
+          <span class="version silver fw3"></span>
+        </div>
+        <ul class="list tr-ns pl0 mv0">
           <li class="di mr3"><a class="link" href="https://github.com/lowmess/hero-patterns">GitHub</a></li>
           <li class="di mr3"><a class="link" href="https://www.npmjs.com/package/hero-patterns">NPM</a></li>
           <li class="di"><a class="link" href="http://heropatterns.com">Patterns</a></li>
@@ -40,13 +43,15 @@ document.querySelector('.dark-side').style.backgroundImage = hero.deathStar()</c
     <footer class="pv3 ph4 lh-copy">
       <p class="mv3">Made by <a class="link fw5" href="https://github.com/lowmess">@lowmess</a></p>
       <p class="mv3">Patterns by <a class="link fw5" href="https://twitter.com/steveschoger">@steveschoger</a></p>
+      <p class="mv3">Deploys by <a class="link fw5" href="https://netlify.com">Netlify</a></p>
       <div class="mv3">
         <span>Links</span>
         <ul class="list di ml2 mv0 pa0">
           <li class="di mr2"><a class="link fw5" href="https://github.com/lowmess/hero-patterns">GitHub</a></li>
           <li class="di mr2"><a class="link fw5" href="https://www.npmjs.com/package/hero-patterns">NPM</a></li>
           <li class="di mr2"><a class="link fw5" href="http://heropatterns.com">Patterns</a></li>
-          <li class="di mr2"><a class="link fw5" href="https://randoma11y.com">Random a11y</a></li>
+          <li class="di mr2"><a class="link fw5" href="http://tachyons.io">Tachyons</a></li>
+          <li class="di"><a class="link fw5" href="https://randoma11y.com">Random a11y</a></li>
         </ul>
       </div>
     </footer>
diff --git a/site/main.js b/site/main.js
index 0461d5e..3f24147 100644
--- a/site/main.js
+++ b/site/main.js
@@ -1,6 +1,10 @@
 import combo from 'random-a11y-combo'
+import { version } from '../package.json'
 import * as hero from '../'
 
+// Add version number to header
+document.querySelector('.version').innerHTML = `v${version}`
+
 const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 const roundTo = (increment, number) => Math.round(number / increment) * increment
 const genAlpha = () => {
@@ -22,11 +26,11 @@ const markup = fn => {
   // generate actual markup
   let style = `background-position: center; background-color: ${c1}; background-image: ${fn(c2, alpha)}`
   let html = `
-    <div class="hero w-100 w-50-ns w-third-m w-25-l fl" id="${ident}">
+    <div class="hero w-100 w-50-ns w-third-m w-25-l fl" id="${ident}" role="presentation">
       <div class="hide-child aspect-ratio aspect-ratio--16x9" style="${style}">
         <div class="child absolute absolute--fill bg-black-70 flex flex-column items-center justify-center pa3">
-          <h3 class="white f5 f4-ns f3-l fw4 ttu tracked tc mt0 mb2">${name}</h3>
-          <code class="mt2 pv2 ph3 ba b--white br2 code white f5">${func}</code>
+          <span class="white f5 f4-ns f3-l fw4 ttu tracked tc mt0 mb2">${name}</span>
+          <code class="mt2 pv2 ph3 ba b--white br2 code white f6 f5-ns">${func}</code>
         </div>
       </div>
     </div>`
-- 
2.51.2