{% extends "base.html" %}
{% set title = "Blog" %}
{% set stylelist = ["blog/index.css"] %}

{% block content %}
<header>
  <div>
    <h1>The BLOG</h1>
    <p>Public writing archive</p>
  </div>
</header>

<main>
  {% for year, zodiac in blog.index.years | dictsort | reverse %}
  <article>
    <a href="{{ blog.index.url }}{{ year }}/">
      <img src="{{blog.index.icon}}{{year}}.webp" alt="The {{ zodiac }}, zodiac animal of {{ year }}">
    </a>
    <nav>
      <h2><a href="{{ blog.index.url }}{{ year }}/">{{ year }}</a></h2>
      {% for month, len in blog.index.months  %}
      <a href="{{ blog.index.url }}{{ year }}/{{ loop.index }}/">{{ month }}</a>
      {% endfor %}
    </nav>
  </article>
  {% endfor %}
</main>
{% endblock %}