{% 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="container mx-auto px-4">
        <div class="md:flex -mx-4">
            <main id="main-content" class="md:w-2/3 lg:w-3/4 px-4 mb-8 lg:mb-0">
                {% block page_title %}
                    <h1>{{ page.title }}</h1>
                {% endblock %}

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

            {% block sidebar_wrapper %}
                <div class="md:w-1/3 lg:w-1/4 px-4" role="complementary">
                    {% block sidebar %}
                        {% include 'badges' %}
                    {% endblock %}
                </div>
            {% endblock %}
        </div>

        <footer class="border-t border-grey-light pt-4 mt-4">
            <p>
                &copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}.
                Built with <a class="link" href="https://sculpin.io">Sculpin</a> and <a class="link" href="https://tailwindcss.com">Tailwind CSS</a>.
                Hosted on <a class="link" href="https://www.netlify.com">Netlify</a>.
            </p>

            {% include 'meetups' %}
        </footer>
    </div>
{% endblock %}