{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %}helvetica{% endblock %}

{% block content %}

  {% include 'header.html' %}

  <section class="mw7 center bg-white-10">
    <h1 class="ph3 ph0-l">{{ page.title }}</h1>

    {% for post in blogpages %}
      {% with post=post.specific %}
        <article class="pv4 bt bb b--black-10 ph3 ph0-l">
          <a class="db pv4 ph3 ph0-l no-underline black dim" href="{% pageurl post %}">
            <div class="flex flex-column flex-row-ns">
              <div class="w-100 w-60-ns pr3-ns order-2 order-1-ns">
                <h1 class="f3 mt0 lh-title">{{ post.title }}</h1>
                <p class="f5 f4-l lh-copy">{{ post.intro }}</p>
              </div>
              <div class="pl3-ns order-1 order-2-ns mb4 mb0-ns w-100 w-40-ns">
                {% with post.main_image as main_image %}
                  {% if main_image %}{% image main_image fill-320x240 class="db" %}{% endif %}
                {% endwith %}
              </div>
            </div>
            <p class="f6 lh-copy gray mv0">By <span class="ttu">{{ post.owner }}</span></p>
            <time class="f6 db gray">{{ post.date|date }}</time>
          </a>
        </article>
      {% endwith %}
    {% endfor %}

  </section>

  {% include 'footer.html' %}

{% endblock %}