{% extends 'base' %}

{% block body %}
    <a href="#main-content" class="skip-link w-full text-center text-white bg-blue p-4 focus:outline-none">Skip to main content</a>

    {% include 'layout/navbar' %}

    <div class="mt-24 max-w-xl px-4 mx-auto">
        <main id="main-content">
            {% block page_title %}
                <h1>{{ page.title }}</h1>
            {% endblock %}

            {% block content_wrapper %}
                {% block content %}{% endblock %}
            {% endblock %}
        </main>

        <footer class="border-grey-light border-t mb-8 mt-10 pt-5">
            <div class="md:flex md:justify-between">
                <div>
                    <p>&copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}</p>
                </div>

                <div>
                    <p>
                        Built with <a class="link" href="https://sculpin.io">Sculpin</a> and <a class="link" href="https://tailwindcss.com">Tailwind CSS</a>,
                        and hosted on <a class="link" href="https://www.netlify.com">Netlify</a>.
                    </p>
                </div>
            </div>
        </footer>
    </div>
{% endblock %}