Visually separate page links

src/routes/+page.svelte

@@ -60,8 +60,9 @@
         </p>
     </div>
 
-    <dl>
+    <ol class="page-links">
         {#each pages as page}
+            <li>
                 <h3>
                     <a href={"/" + page.slug + "/"}>
                         {page.title}
@@ -83,8 +84,9 @@
                         </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;