Display posts as more structured list

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;

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 %}
+{% endblock %}