<!doctype html>
<title>
  {% if page.title %}
    {{ page.title }} | {{ site.title }}
  {% else %}
    {{ site.title }}
  {% endif %}
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  display: block;
  font-family: sans-serif;
  padding: 0 1em;
  margin: 0 auto;
  border-top: 10px solid #f7df1e;
  line-height:1.5;
  color:#333;
  position:relative;
}

html::before {
  width:100%;
  display:block;
  position:fixed;
  top:0;
  left:0;
  height:10px;
  background:#f7df1e;
  content: " ";
}

body {
  padding:0;
  margin: 0;
}

a:hover, a:active, a:focus {
  color: red;
}

code, pre, kbd {
  font-size: 100%;
  font-family: Triplicate T4, Fira Mono OT, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospacek;
}

section.side {
  display: block;
  padding:0;
  min-height:100px;
  margin: 0;
  width:100%;
}

.side h2, .side p {
  margin-top: 0;
}

section.side li {
  display: inline;
}

section.side ul {
  display: block;
  overflow:auto;
}

section.side li ul {
  display: inline;
}

.side ul {
  padding:0;
  margin:0 ;
}

.side img {
  display: block;
  margin-right: 1em;
  margin-top: 1em;
}

section.main {
  display: block;
  padding-top:20px;
}

@media only screen and (min-width: 240px) {
  .side img {
    float:left;
    margin: 0 1em 0 0;
  }
}

@media only screen and (min-width: 800px) {
  html {
    width:600px;
    padding:0 0 0 200px;
  }
  section.side {
    width: 200px;
    position: fixed;
    margin: 0 0 0 -200px;
  }
  .side img {
    display: block;
    float:none;
  }

  section.side ul {
    overflow: none;
    display: block;
  }

  section.side li {
    display: block;
  }

  section.side a {
    display: block;
  }

  section.side li ul {
    margin: 0;
    display: block;
  }

  section.side li li {
    margin-left: 1em;
  }

  .side h2, .side p {
    margin-top: 1em;
  }

  section.main {
    float: right;
    width: 600px;
    padding-bottom: 100px;
  }
}
</style>
<link href="/static/prism.css" rel="stylesheet">

<body>

<section class='side'>
  <h2><a href=/><img src='/static/tapjs.png' width=100 height=100 alt='Test Anything JS'></a></h2>
  <p>{{ site.description }}</p>
  <ul>
  {% for link in site.links %}
    <li>
      <a href="{{ link.url }}">{{ link.name }}</a>
      {% if link.links %}
      <ul>
        {% for sublink in link.links %}
        <li><a href="{{ sublink.url }}">{{ sublink.name }}</a></li>
        {% endfor %}
      </ul>
      {% endif %}
    </li>
  {% endfor %}
  </ul>
  <pre><a href="http://npm.im/tap">npm install tap</a>
<a href="/cli/">tap test/*.js</a></pre>
</section>
<section class='main'>
{{ content }}
</section>
<script src="/static/prism.js"></script>
</body>
