Project list

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).

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

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 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>
-        </li>
     $endfor$
-</ul>
+  </div>
+</div>