Added 'Skip to navigation' link

components/Footer.js

@@ -19,7 +19,7 @@ class Footer extends Component {
    return (
      <footer className="footer flexItem-none py-3 bgDarker-1">
        <div className="maxW-4 mx-auto px-3 px-4@sm flex@sm flex-wrap">
          <nav className="mr-auto@sm" role="navigation">
          <nav id="nav" className="mr-auto@sm" role="navigation">
            <ul className="listReset lineHeight-44 mb-0 flex@sm flex-wrap items-center">
              { homeLink }
              <li className="inlineBlock mr-3">

components/SkipLink.js

@@ -0,0 +1,22 @@
import React, { Component, PropTypes } from 'react'
import { Link } from 'react-router'


class SkipLink extends Component {

  render() {
    const { to, text } = this.props

    return (
      <a href={to} className="skipLink hide p-1 bgDarker-1">{ text }</a>
    )
  }

}

SkipLink.propTypes = {
  to: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired
}

export default SkipLink

pages/_template.js

@@ -6,6 +6,7 @@ import suncalc from 'suncalc'

import Header from 'components/Header'
import Footer from 'components/Footer'
import SkipLink from 'components/SkipLink'

import 'styles/styles.css'

@@ -37,6 +38,7 @@ class Template extends Component {
    return (
      <div className={wrapperClasses}>
        { header }
        <SkipLink />
        <div className="content maxW-4 mx-auto px-2 px-4@sm pb-4">
          {children}
        </div>

styles/components/_skipLink.css

@@ -0,0 +1,14 @@
/* Skip Link */

.skipLink {
  top: 0;
  left: 0;

  /* Undoing .hide */
  &:focus {
    clip: initial;
    height: auto;
    width: auto;
    overflow: visible;
  }
}

styles/styles.css

@@ -15,6 +15,7 @@
@import './modules/_colors.css';

@import './components/_wrap.css';
@import './components/_skipLink.css';
@import './components/_figure.css';
@import './components/_stickyFooter.css';