{% extends "base.html" %}
{% block content %}
<section class="essay blog-index">
    <header class="essay-header">
        <h1 class="title">Blog</h1>
        <p class="lead">Articles, notes, and ideas organized by time.</p>
    </header>

    {% if posts | length == 0 %}
    <p class="empty-state">No blog posts yet.</p>
    {% else %}
    <div class="post-list">
        {% for post in posts %}
        <article class="post-item">
            {% if post.meta.date %}
            <time class="post-date">{{ post.meta.date }}</time>
            {% endif %}
            <h2><a href="{{ root_path }}/{{ post.url }}">{{ post.meta.title }}</a></h2>
        </article>
        {% endfor %}
    </div>
    {% endif %}
</section>
{% endblock %}
{% block margin %}
<div class="margin-note">
    <p>The right column is reserved for the table of contents, annotations, and contextual notes while reading.</p>
</div>
{% endblock %}