{% extends "templates/base.html" %}

{% block contained-main-content %}
<div class="row">
  <div class="col-md-8 blog-main">
    <div class="row">
      <div class="col-md-6 col-sm-6">
        <article class=" blog-teaser">
          <header>
            <img src="{{ page-data.base-path }}/img/cat.png" alt="A Cat">
            <h3><a href="blog-detail.html">Cats Everywhere</a></h3>
            <span class="meta">24 July 2013, Alexander Rechsteiner</span>
            <hr>
          </header>
          <div class="body">
            Bacon ipsum dolor sit amet esse duis pastrami anim, pancetta fatback capicola officia tenderloin. Meatloaf culpa ut, bacon sed sausage jerky cillum est ham ad laboris ham hock dolore. Venison ut enim, aliqua elit frankfurter et incididunt consequat culpa nostru aliqua elit pancetta.
          </div>
          <div class="clearfix">
            <a href="blog-detail.html" class="btn btn-tales-one">Read more</a>
          </div>
        </article>
      </div>
      <div class="col-md-6 col-sm-6">
        <article class="blog-teaser">
          <header>
            <img src="{{ page-data.base-path }}/img/hands.png" alt="Hands">
            <h3><a href="blog-detail.html">Big Thinkers</a></h3>
            <span class="meta">24 July 2013, Alexander Rechsteiner</span>
            <hr>
          </header>
          <div class="body">
            Bacon ipsum dolor sit amet esse duis pastrami anim, pancetta fatback capicola officia tenderloin. Meatloaf culpa ut, bacon sed sausage jerky cillum est ham ad laboris ham hock dolore. Venison ut enim, aliqua elit frankfurter et incididunt consequat culpa nostru aliqua elit pancetta.
          </div>
          <div class="clearfix">
            <a href="blog-detail.html" class="btn btn-tales-one">Read more</a>
          </div>
        </article>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6 col-sm-6">
        <article class="blog-teaser">
          <header>
            <img src="{{ page-data.base-path }}/img/bike.png" alt="A Bike">
            <h3><a href="blog-detail.html">My Insightful Article</a></h3>
            <span class="meta">24 July 2013, Alexander Rechsteiner</span>
            <hr>
          </header>
          <div class="body">
            Bacon ipsum dolor sit amet esse duis pastrami anim, pancetta fatback capicola officia tenderloin. Meatloaf culpa ut, bacon sed sausage jerky cillum est ham ad laboris ham hock dolore. Venison ut enim, aliqua elit frankfurter et incididunt consequat culpa nostru aliqua elit pancetta.
          </div>
          <div class="clearfix">
            <a href="blog-detail.html" class="btn btn-tales-one">Read more</a>
          </div>
        </article>
      </div>
      <div class="col-md-6 col-sm-6">
        <article class="blog-teaser">
          <header>
            <img src="{{ page-data.base-path }}/img/violin.png" alt="A Violin Player">
            <h3><a href="blog-detail.html">Why I Play Violin</a></h3>
            <span class="meta">24 July 2013, Alexander Rechsteiner</span>
            <hr>
          </header>
          <div class="body">
            Bacon ipsum dolor sit amet esse duis pastrami anim, pancetta fatback capicola officia tenderloin. Meatloaf culpa ut, bacon sed sausage jerky cillum est ham ad laboris ham hock dolore. Venison ut enim, aliqua elit frankfurter et incididunt consequat culpa nostru aliqua elit pancetta.
          </div>
          <div class="clearfix">
            <a href="blog-detail.html" class="btn btn-tales-one">Read more</a>
          </div>
        </article>
      </div>
    </div>

    <div class="paging">
      <a href="#" class="newer"><i class="fa fa-long-arrow-left"></i> Newer</a>
       <span>&bull;</span>
      <a href="#" class="older">Older <i class="fa fa-long-arrow-right"></i></a>
    </div>
  </div>
  <aside class="col-md-4 blog-aside">

    <div class="aside-widget">
      <header>
        <h3>Read next...</h3>
      </header>
      <div class="body">
        <ul class="tales-list">
          <li><a href="index.html">Email Encryption Explained</a></li>
          <li><a href="#">Selling is a Function of Design.</a></li>
          <li><a href="#">It’s Hard To Come Up With Dummy Titles</a></li>
          <li><a href="#">Why the Internet is Full of Cats</a></li>
          <li><a href="#">Last Made-Up Headline, I Swear!</a></li>
        </ul>
      </div>
    </div>

    <div class="aside-widget">
      <header>
        <h3>Authors Favorites</h3>
      </header>
      <div class="body">
        <ul class="tales-list">
          <li><a href="index.html">Email Encryption Explained</a></li>
          <li><a href="#">Selling is a Function of Design.</a></li>
          <li><a href="#">It’s Hard To Come Up With Dummy Titles</a></li>
          <li><a href="#">Why the Internet is Full of Cats</a></li>
          <li><a href="#">Last Made-Up Headline, I Swear!</a></li>
        </ul>
      </div>
    </div>

    <div class="aside-widget">
      <header>
        <h3>Featured</h3>
      </header>
      <ul>
        <ii><a href="">TBD</a></ii>
      </ul>
    </div>

    <div class="aside-widget">
      <header>
        <h3>From our sponsors</h3>
      </header>
      <div class="body">
        (content forthcoming ...)
      </div>
    </div>

    <div class="aside-widget">
      <header>
        <h3>Tags</h3>
      </header>
      <div class="body clearfix">
        <ul class="tags">
          <li><a href="#">OpenPGP</a></li>
          <li><a href="#">Django</a></li>
          <li><a href="#">Bitcoin</a></li>
          <li><a href="#">Security</a></li>
          <li><a href="#">GNU/Linux</a></li>
          <li><a href="#">Git</a></li>
          <li><a href="#">Homebrew</a></li>
          <li><a href="#">Debian</a></li>
        </ul>
      </div>
    </div>
  </aside>
</div>
{% endblock %}