<div class="list-display rounded">
    <h1 id="blog">
        <span id="blog-all"></span>
        {% for tag in site.tags %}
            <span id="blog-{{ tag[0] | slugify }}"></span>
        {% endfor %}
        📔 Blog
    </h1>
    <p>
        This is my blog, where I post about gaming, programming and life. The featured posts are the ones you'll probably be most interested in, but you can select a different category to see every post.
    </p>
    <p>📫 You can also subscribe to this blog through the <a href="https://ell.lt/lists">mailing list</a> or the <a href="/feed.xml">Atom feed</a>.</p>
    <div id="blog-cats">
        {% include tagbtn.html tag="All" %}
        {%- assign sorted = site.tags | sort -%}
        {%- for tag in sorted -%}
            {%- assign name = tag[0] -%}
            {% include tagbtn.html tag=name %}
        {%- endfor -%}
    </div>

    <div id="blog-list">
        {% for post in site.posts %}
            {% if post.archived != true %}
                {% include post.html post=post %}
            {% endif %}
        {% endfor %}
    </div>
    <button type="button" class="btn btn-link" id="blog-archive-button">Show archived posts</button>
    <div id="blog-archive">
        {% for post in site.posts %}
            {% if post.archived == true %}
                {% include post.html post=post %}
            {% endif %}
        {% endfor %}
        <em id="no-archived-posts" hidden>There are no archived posts in this category.</em>
    </div>
    <script src="/scripts/blog.js"></script>
</div>