feat: various markup improvements for semantic

src/_includes/macros/posts.njk

@@ -1,13 +1,29 @@
+{% macro one(post, format = "MM/DD") %}
+<article class="[ posts-list-item column-gap-0.5 justify-between line-height-l ]">
+    <a href="{{ post.url }}">{{ post.data.title }}</a>
+    <p class="[ text-fadeText ]">{{ post.date | formatDate(format) }}</p>
+    <p class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</p>
+</article>
+{% endmacro %}
+
 {% macro list(posts, format = "MM/DD") %}
-<ul class="[ posts-list ] [ flow list-none m-0 p-0 flow-space-0.5 ]">
+<ol class="[ posts-list ] [ flow list-none p-0 ]">
     {% for post in posts %}
-        <li class="[ posts-list-item line-height-l gap-1 ]">
-                <div>
-                    <a href="{{ post.url }}">{{ post.data.title }}</a>
-                    <div class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</div>
-                </div>
-                <div class="[ text-fadeText ]">{{ post.date | formatDate(format) }}</div>
+        <li class="[ flow-space-0.5 ]">
+            {{ one(post, format) }}
         </li>
     {% endfor %}
-</ul>
+</ol>
+{% endmacro %}
+
+{% macro yearList(posts, year, format = "MM/DD") %}
+<section class="[ flow ]">
+    <header class="[ cluster gap-0.5 ]">
+        <h2>{{ year }}</h2>
+        <p class="[ bg-surface text-fadeText px-0.5 py-0.25 font-size-s line-height-s radius-0.5 ]">
+            {{ posts | length }}
+        </p>
+    </header>
+    {{ list(posts, format) }}
+</section>
 {% endmacro %}