Post lists with date below

posts.liquid

@@ -45,22 +45,23 @@ data:
   </li>
 {% endfor %}
 </ol>
-<table>
-{% for year in years -%}
-<tr>
-  <td>&nbsp;</td>
-  <td><h2 id="{{year}}">{{year}}</h2></td>
-</tr>
 
+{% for year in years -%}
+<h2 id="{{year}}">{{year}}</h2>
+
+<ul class="posts-list">
   {%- for post in collections.posts.pages %}
     {%- assign postyear = post.published_date | date: "%Y" %}
     {%- if postyear == year %}
-      <tr>
-        <td>{{ post.published_date | date: "%d. %b"}}</td>
-        <td><a href="/{{post.permalink }}">{{post.title}}</a></td>
-      </tr>
+      <li>
+      <a href="/{{post.permalink }}">
+        <span>{{post.title}}</span>
+        <span>
+          <time datetime="">{{ post.published_date | date: "%Y-%m-%d"}}</time>
+        </span>
+      </a>
+      </li>
     {%- endif %}
   {%- endfor %}
-
+</ul>
 {%- endfor %}
-</table>

style.css

@@ -364,3 +364,26 @@ table, tr, td { border: none; }
   pointer-events: none;
   z-index: 1;
 }
+
+ol.archive-chart,
+ul.posts-list {
+  padding-left: 0;
+}
+.posts-list li {
+  list-style: none;
+}
+.posts-list li a {
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  padding: calc(12rem / 18) 0px;
+}
+.posts-list li a:hover span:first-child {
+  text-decoration: underline;
+}
+.posts-list span:first-child {
+  font-size: 1.1rem;
+}
+.posts-list span:last-child {
+  font-size: 0.8rem;
+}