Fix main page

src/components/ArticleList.astro

@@ -23,12 +23,17 @@ for (const article of sorted) {
 }
 ---
 {[...byYear.entries()].map(([year, items]) => (
-  <div>
-    <h2 class="font-bold">{year}</h2>
-    {items.map((article) => (
-      <h3>
-        <a href={`/articles/${article.slug}/`}>{article.title}</a>
-      </h3>
-    ))}
+  <div class="mb-8">
+    <h2 class="font-bold text-2xl mb-3">{year}</h2>
+    <ul class="list-none p-0 m-0 flex flex-col gap-2">
+      {items.map((article) => (
+        <li class="flex flex-col content:flex-row content:items-baseline content:gap-3">
+          <time class="text-text-secondary text-sm shrink-0 w-12 tabular-nums" datetime={article.date.toISOString().slice(0, 10)}>
+            {String(article.date.getDate()).padStart(2, '0')}.{String(article.date.getMonth() + 1).padStart(2, '0')}
+          </time>
+          <a href={`/articles/${article.slug}/`} class="text-lg">{article.title}</a>
+        </li>
+      ))}
+    </ul>
   </div>
 ))}