From a104db5120c86a7da0f54c3417d68e1444f39f7d Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Tue, 18 Jun 2024 15:56:26 +1000
Subject: [PATCH] Visually separate page links

---
 src/routes/+page.svelte | 72 ++++++++++++++++++++++++++++-------------
 1 file changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2b5ad58..3aa32c9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -60,31 +60,33 @@
         </p>
     </div>
 
-    <dl>
+    <ol class="page-links">
         {#each pages as page}
-            <h3>
-                <a href={"/" + page.slug + "/"}>
-                    {page.title}
-                </a>
-            </h3>
-            <p>{page.description}</p>
-            {#if page.published}
-                <p>
-                    <small>
-                        Published:
-                        <DateTime datetime={page.published} />
-                        {#if page.edited}
-                            &bull; Last edited:
-                            <DateTime
-                                datetime={page.edited}
-                                display="dateTime"
-                            />
-                        {/if}
-                    </small>
-                </p>
-            {/if}
+            <li>
+                <h3>
+                    <a href={"/" + page.slug + "/"}>
+                        {page.title}
+                    </a>
+                </h3>
+                <p>{page.description}</p>
+                {#if page.published}
+                    <p>
+                        <small>
+                            Published:
+                            <DateTime datetime={page.published} />
+                            {#if page.edited}
+                                &bull; Last edited:
+                                <DateTime
+                                    datetime={page.edited}
+                                    display="dateTime"
+                                />
+                            {/if}
+                        </small>
+                    </p>
+                {/if}
+            </li>
         {/each}
-    </dl>
+    </ol>
 
     <h2 id="projects">Projects</h2>
 
@@ -339,6 +341,30 @@
 </main>
 
 <style>
+    ol.page-links {
+        padding-left: 0.5rem;
+        list-style: none;
+    }
+
+    ol.page-links li {
+        padding: 0.5rem;
+
+        background-color: var(--background-2);
+        border-left: 2px solid var(--accent);
+    }
+
+    ol.page-links li {
+        margin-top: 1rem;
+    }
+
+    ol.page-links li > *:first-child {
+        margin-top: 0;
+    }
+
+    ol.page-links li > *:last-child {
+        margin-bottom: 0;
+    }
+
     ul.buttons {
         display: flex;
         flex-direction: row;