From fa38966821c883fa82a3a520896c470c801730b2 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:28:57 +0800
Subject: [PATCH] Turn shrine index into a list

---
 src/pages/shrines.njk | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/pages/shrines.njk b/src/pages/shrines.njk
index ea17cb12..e26ab776 100644
--- a/src/pages/shrines.njk
+++ b/src/pages/shrines.njk
@@ -10,14 +10,32 @@ eleventyComputed:
 
 <p>Here is a list of shrines I have made for my own website.</p>
 
-<h2><a href="./asummersend/">{% cite "A Summer’s End — Hong Kong 1986" %}</a></h2>
+<ul class="shrine-index">
+    <li>
+        <h2><a href="./asummersend/">{% cite "A Summer’s End — Hong Kong 1986" %}</a></h2>
+        <img src="/assets/shrines/asummersend/images/ASE_Key_art_intro.avif" alt="Key art of A Summer’s End — Hong Kong 1986" loading="lazy">
+    </li>
+    <li>
+        <h2><a href="./starwarskotor/">{% cite "Star Wars: Knights of the Old Republic" %}</a></h2>
+        <img src="/assets/shrines/starwarskotor/images/swkotor-header.avif" alt="Key art of the Star Wars: Knights of the Old Republic series" loading="lazy">
+    </li>
+    <li>
+        <h2><a href="./cassettebeasts/">{% cite "Cassette Beasts" %}</a></h2>
+        <img src="/assets/shrines/cassettebeasts/images/CassetteBeasts_keyart_16_9.avif" alt="Key art of Cassette Beasts" loading="lazy">
+    </li>
+</ul>
 
-<img src="/assets/shrines/asummersend/images/ASE_Key_art_intro.avif" alt="Key art of A Summer’s End — Hong Kong 1986" loading="lazy">
+<style>
+    .shrine-index {
+        display: grid;
+        gap: 2em;
+        list-style: none;
+        padding: 0;
+        margin: 2em 0 0;
+    }
 
-<h2><a href="./starwarskotor/">{% cite "Star Wars: Knights of the Old Republic" %}</a></h2>
-
-<img src="/assets/shrines/starwarskotor/images/swkotor-header.avif" alt="Key art of the Star Wars: Knights of the Old Republic series" loading="lazy">
-
-<h2><a href="./cassettebeasts/">{% cite "Cassette Beasts" %}</a></h2>
-
-<img src="/assets/shrines/cassettebeasts/images/CassetteBeasts_keyart_16_9.avif" alt="Key art of Cassette Beasts" loading="lazy">
\ No newline at end of file
+    .shrine-index li {
+        display: grid;
+        gap: 0.7em;
+    }
+</style>
\ No newline at end of file