---
layout: default
title: Blog
generator: pagination
pagination:
    max_per_page: 10
use: [posts]
---
{% block content %}
    <h1>Blog</h1>

    <ul class="list-reset">
        {% for post in page.pagination.items %}
            <li class="mb-12">
                <h2 class="text-xl mb-1">
                    <a href="{{ post.url }}" class="no-underline hover:underline focus:underline text-black hover:text-grey-darker focus:text-grey-darker">
                        {{ post.title }}
                    </a>
                </h2>

                <div>
                    <p class="text-grey-dark mb-2">{{ post.date|date('j F Y') }}</p>
                </div>

                {% include 'post/intro-image' with { page: post } %}

                <div class="markdown mb-4">
                    {% if post.summary %}
                        {{ post.summary|markdown }}
                        <div>
                            <a
                                class="button text-grey-darker rounded-lg border border-grey-light bg-grey-lightest no-underline hover:underline focus:underline"
                                href="{{ post.url }}"
                            >
                                Continue reading <span class="element-invisible">about {{ post.title }}
                            </a>
                        </div>
                    {% elseif post.blocks.excerpt %}
                        {{ post.blocks.excerpt|markdown }}
                        <div>
                            <a
                                class="button text-grey-darker rounded-lg border border-grey-light bg-grey-lightest no-underline hover:underline focus:underline"
                                href="{{ post.url }}"
                            >
                                Continue reading <span class="element-invisible">about {{ post.title }}
                            </a>
                        </div>
                    {% else %}
                        {{ post.blocks.content|markdown }}
                    {% endif %}
                </div>
            </li>
        {% endfor %}
    </ul>

    {% include 'post-pager.html.twig' %}
{% endblock %}

{% block scripts %}
    <script>hljs.initHighlightingOnLoad();</script>
{% endblock %}