List alignment fixes and input dark mode support

Fixes margin and alignment issues in ul, ol and checkbox lists including when they are nested within each other.

input elements in dark mode are forced to be in browser's dark color scheme.

3 files changed, 23 insertions, 8 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 54c98cb..65ea0b4 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -59,19 +59,31 @@ p {
   line-height: var(--p-line-height);
 }
 
-ul {
-  margin-top: var(--ul-margin-top);
-  margin-bottom: var(--ul-margin-bottom);
-}
-
 li {
   margin-left: var(--li-indent);
+
+  &:has(> input[type="checkbox"]) {
+    list-style-type: none;
+  }
+
+  & > input[type="checkbox"] {
+    width: var(--li-checkbox-size);
+    height: var(--li-checkbox-size);
+    margin: 0 0.2em 0.15em -1.25em;
+    vertical-align: middle;
+  }
 }
 
 a {
   text-decoration: underline;
 }
 
+input {
+  .dark & {
+    color-scheme: dark;
+  }
+}
+
 /* Code blocks */
 
 .copy-code-button {
diff --git a/assets/css/reset.css b/assets/css/reset.css
index a2c9a46..bac5c29 100644
--- a/assets/css/reset.css
+++ b/assets/css/reset.css
@@ -64,7 +64,7 @@ p {
     margin-bottom: 0;
 }
 
-ul {
+ul, ol {
     padding: 0;
 }
 
diff --git a/assets/css/vars.css b/assets/css/vars.css
index b28df63..8a010ee 100644
--- a/assets/css/vars.css
+++ b/assets/css/vars.css
@@ -33,10 +33,13 @@
     --p-line-height: 1.5em;
     --caption-font-size: .8em;
 
-    /* List indentation */
-    --li-indent: 1.5rem;
+    /* Lists */
+    --li-indent: 2rem;
     --ul-margin-top: 1rem;
     --ul-margin-bottom: 1rem;
+    --li-checkbox-size: 0.8em;
+
+    /* TOC */
 
     --toc-margin-top: 2rem;
     --toc-margin-bottom: 3rem;