From 5c8dbeb486d3174b7f1b785741b6dd0805658e22 Mon Sep 17 00:00:00 2001
From: Alex Coleman <hello@alexjcoleman.me>
Date: Sun, 20 Oct 2024 20:54:32 +0100
Subject: [PATCH] Display posts as more structured list

---
 custom/static/css/main.css  | 16 ++++++++++++++++
 custom/templates/index.html |  8 +++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/custom/static/css/main.css b/custom/static/css/main.css
index 69dc063..e912a23 100644
--- a/custom/static/css/main.css
+++ b/custom/static/css/main.css
@@ -58,6 +58,22 @@ footer li {
     display: inline-block;
 }
 
+.post-list {
+    list-style: none;
+    padding: 0;
+}
+
+.post-list > li {
+    display: grid;
+    grid-template-columns: 35% 65%;
+    padding-bottom: .5em;
+}
+
+.post-list time {
+    text-align: right;
+    padding-right: .8em;
+}
+
 pre {
     padding: 1rem;
     border: 1px solid black;
diff --git a/custom/templates/index.html b/custom/templates/index.html
index f38c20c..124ea3e 100644
--- a/custom/templates/index.html
+++ b/custom/templates/index.html
@@ -2,9 +2,11 @@
 {% block title %}{{ SITENAME }}{% endblock %}
 {% block content %}
   {% block content_title %}{% endblock %}
-  <ul>
+  <ul class="post-list">
     {% for article in articles_page.object_list %}
-        <li><a href="/{{ article.url }}">{{ article.date | strftime('%-d %b %Y')}} {{ article.title }}</a> </li>
+        <li>
+          <time datetime="{{ article.date }}">{{ article.date | strftime('%-d %b %Y')}}</time> <a href="/{{ article.url }}">{{ article.title }}</a>
+        </li>
     {% endfor %}
   </ul>
-{% endblock %}
\ No newline at end of file
+{% endblock %}