andwati.com/templates/archive.html

{% extends "base.html" %} {% block title %}{{ section.title }} | {{ config.title }}{% endblock title
%} {% block content %}
<div class="post-detail">
  <header class="post-header" style="margin-bottom: 3rem">
    <h1 class="post-title" style="font-size: clamp(2.5rem, 5vw, 4.5rem)">Archive</h1>
  </header>

  <div class="archive-list" style="max-width: 65ch; margin: 0 auto">
    {% set section = get_section(path="posts/_index.md") %} {% for year, posts in section.pages |
    sort(attribute="date") | reverse | group_by(attribute="year") %}
    <div class="archive" style="margin-bottom: 2rem">
      <h2
        style="font-size: 1.5rem; color: var(--text-color); margin-bottom: 1rem; margin-top: 2rem"
      >
        {{ year }}
      </h2>
      <ul
        style="
          list-style-type: none;
          padding-left: 1rem;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        "
      >
        {% for post in posts %}
        <li class="hover-scale" style="display: flex; gap: 1rem; align-items: baseline">
          <time
            datetime="{{ post.date }}"
            style="
              color: var(--text-muted);
              font-size: 0.95rem;
              white-space: nowrap;
              font-family: var(--font-mono);
            "
            >{{ post.date | date(format="%d-%b") }}</time
          >
          <a
            href="{{ post.permalink }}"
            style="color: var(--accent-color); font-weight: 500; font-size: 1.05rem"
            >{{ post.title }}</a
          >
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock content %}