<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a blog page with a list of posts.">
    <title>{{ _.title }}</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]>
      <!-->
      <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
    <!--<![endif]-->
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="css/layouts/blog-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]>
      <!-->
      <link rel="stylesheet" href="css/layouts/blog.css">
    <!--<![endif]-->
  </head>

  <body>
    <div id="layout" class="pure-g">
      <div class="sidebar pure-u-1 pure-u-md-1-4">
        <div class="header">
          <a href="/">
            <h1 class="brand-title">
              {{ _.title }}
            </h1>
          </a>
          <h2 class="brand-tagline">
            {{ _.subtitle }}
          </h2>
          <nav class="nav">
            <ul class="nav-list">
              <li class="nav-item">
                <a class="pure-button" href="{{ _.source }}">
                  Source
                </a>
              </li>
              <li class="nav-item">
                <a class="pure-button" href="#">
                  Document
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="content pure-u-1 pure-u-md-3-4">
        <div>
          <!-- A wrapper for all the blog posts -->
          <div class="posts">
            <h1 class="content-subhead">
              Recent Posts
            </h1>
            {% for post in posts %}
            <section class="post">
              <header class="post-header">
                <img class="post-avatar" alt="Eric Ferraiuolo&#x27;s avatar" height="48"
                width="48" src="{{_.avatar}}">
                <a href="{{ post.src }}">
                  <h2 class="post-title">
                  {{ post.title }}
                </h2>
                </a>
                <p class="post-meta">
                  By
                  <a class="post-author" href="#">
                    {{ _.author }}
                  </a>
                  under
                  <a class="post-category post-category-js" href="#">
                    {{ post.tag }}
                  </a>
                </p>
              </header>
              <div class="post-description">
                <p>
                  {{ post.body }}
                </p>
              </div>
            </section>
            {% endfor %}
          </div>
          <div class="footer">
            <div class="pure-menu pure-menu-horizontal">
              <ul>
                <li class="pure-menu-item">
                  <a href="{{ _.social.twitter }}" class="pure-menu-link">
                    Twitter
                  </a>
                </li>
                <li class="pure-menu-item">
                  <a href="{{ _.social.github }}" class="pure-menu-link">
                    GitHub
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>
