<!DOCTYPE html>
<html>

  {% include head.html %}

  <body>
    <div id="background" class="fade"></div>
    <div class="page-content">
      {% include box.html box="small" %}
      <div class="wrapper index">
        <ul class="posts">
        {% for post in site.posts %}
          <li style="background-image: url('{{ post.thumb }}')" data-thumb="{{ post.backgrounds.first }}">
            <a href="{{ post.url }}">
              <h1>{{ post.title }}</h1>
              <!-- <p>{{ post.content | truncatewords: post.preview  }}</p> -->
            </a>
          </li>
        {% endfor %}
        </ul>
      </div>
    </div>

    {% include footer.html %}
    <script type="text/javascript">backstretch("{{ site.portfoliobackground }}");</script>
  </body>

</html>
