From 54ef62707d136ff70d8a265d19720e7bdefc7319 Mon Sep 17 00:00:00 2001
From: Mats Rauhala <mats.rauhala@iki.fi>
Date: Wed, 29 Mar 2023 23:26:33 +0300
Subject: [PATCH] Project list

---
 .../projects/2021-01-21-bidirectional.md      |  1 -
 .../projects/2021-01-21-zettelkast.md         |  1 -
 rauhala.info/templates/project-list.html      | 28 +++++++++++++------
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/rauhala.info/projects/2021-01-21-bidirectional.md b/rauhala.info/projects/2021-01-21-bidirectional.md
index 63ab210..12d0cf8 100644
--- a/rauhala.info/projects/2021-01-21-bidirectional.md
+++ b/rauhala.info/projects/2021-01-21-bidirectional.md
@@ -2,7 +2,6 @@
 title: bidirectional
 github: https://github.com/MasseR/bidirectional
 issues: https://github.com/MasseR/bidirectional/issues
-badge: https://github.com/MasseR/bidirectional/workflows/Test/badge.svg
 ---
 
 Bidirectional serialization based on Lysxia's post on [Monadic profunctors for bidirectional programming](https://blog.poisson.chat/posts/2017-01-01-monadic-profunctors.html).
diff --git a/rauhala.info/projects/2021-01-21-zettelkast.md b/rauhala.info/projects/2021-01-21-zettelkast.md
index a4cd2e5..2591d4d 100644
--- a/rauhala.info/projects/2021-01-21-zettelkast.md
+++ b/rauhala.info/projects/2021-01-21-zettelkast.md
@@ -2,7 +2,6 @@
 title: zettelkast
 github: https://github.com/MasseR/zettelkast
 issues: https://github.com/MasseR/zettelkast/issues
-badge: https://github.com/MasseR/zettelkast/workflows/Test/badge.svg
 ---
 
 Command-line tool for managing zettelkast documents. The tool primarily focuses
diff --git a/rauhala.info/templates/project-list.html b/rauhala.info/templates/project-list.html
index 8adba04..6f0bdad 100644
--- a/rauhala.info/templates/project-list.html
+++ b/rauhala.info/templates/project-list.html
@@ -1,11 +1,23 @@
-<ul>
+<div class="bg-white py-24 sm:py-32">
+  <div class="mx-auto max-w-7xl px-6 lg:px-8">
     $for(items)$
-        <li>
-          <div class="projectlist">
-            <a href="$url$">$title$</a>
-            <a href="$github$">$if(badge)$<img src="$badge$" />$else$ Github $endif$</a>
-          </div>
-        </li>
+    <div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 first:border-none border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+      <article class="flex max-w-xl flex-col items-start justify-between">
+        <div class="flex items-center gap-x-4 text-xs">
+          <time datetime="$date$" class="text-gray-500">$date$</time>
+        </div>
+        <div class="group relative">
+          <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
+            <a href="$url$">
+              <span class="absolute inset-0"></span>
+              $title$
+            </a>
+            <a href="$github$">$if(badge)$<img src="$badge$" />$else$$endif$</a>
+          </h3>
+        </div>
+      </article>
+    </div>
     $endfor$
-</ul>
+  </div>
+</div>