From f078b30866f483df92992a220d45862f0df7efd0 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Mon, 7 Oct 2024 21:02:29 -0700
Subject: [PATCH] Restyle <ol> and <ul>

Use * for unordered lists and fix the number placement in ordered lists
---
 assets/css/050_lists.css           | 48 +++++++++++++++++++++++++++---
 assets/css/099_page_footer.css     |  6 +++-
 assets/css/099_page_navigation.css |  1 +
 assets/css/099_taxonomy_list.css   |  4 +++
 4 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/assets/css/050_lists.css b/assets/css/050_lists.css
index 21b0abd..f146cde 100644
--- a/assets/css/050_lists.css
+++ b/assets/css/050_lists.css
@@ -14,12 +14,52 @@ ul
   grid-column: main-start / main-end;
 }
 
-ol, ul {
-  padding-inline-start: var(--space-l);
+ol {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  list-style: none;
+  padding-inline-start: 0;
+
+  &:not([start]) {
+    counter-reset: list-item;
+  }
+
+  &[start] {
+    counter-reset: list-item attr(start integer);
+  }
+
+  li {
+    display: grid;
+    gap: 1ch;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+
+    /* TODO: Figure out support for <li value="42"> */
+
+    &:not([value]) {
+      counter-increment: list-item;
+    }
+
+    &::before {
+      content: counter(list-item) ".";
+    }
+  }
 }
 
-li::marker {
-  font-size: var(--text-s);
+ul {
+  list-style-type: "*";
+  padding-inline-start: 1ch;
+
+  li {
+    padding-inline-start: 1ch;
+  }
+}
+
+li {
+  &::marker, &::before {
+    color: var(--text-color-secondary);
+    font-family: var(--font-family-monospace);
+  }
 }
 
 dl {
diff --git a/assets/css/099_page_footer.css b/assets/css/099_page_footer.css
index 1b6ba4f..a75d3e0 100644
--- a/assets/css/099_page_footer.css
+++ b/assets/css/099_page_footer.css
@@ -7,5 +7,9 @@
  **************/
 
 .page-footer {
-    margin-block-start: var(--space-xl);
+  margin-block-start: var(--space-xl);
+
+  :last-child {
+    margin-bottom: 0;
+  }
 }
diff --git a/assets/css/099_page_navigation.css b/assets/css/099_page_navigation.css
index 5983de7..99e285b 100644
--- a/assets/css/099_page_navigation.css
+++ b/assets/css/099_page_navigation.css
@@ -17,6 +17,7 @@
 
   li {
     display: block;
+    padding-inline: 0;
   }
 
   .next-page {
diff --git a/assets/css/099_taxonomy_list.css b/assets/css/099_taxonomy_list.css
index cccf330..47fcc43 100644
--- a/assets/css/099_taxonomy_list.css
+++ b/assets/css/099_taxonomy_list.css
@@ -23,6 +23,10 @@
         text-transform: uppercase;
     }
 
+    li {
+      padding-inline-start: 0;
+    }
+
     li:not(:last-child)::after {
         color: var(--text-color-secondary);
         content: ":";