Merge pull request #92 from runofthemillgeek/fix/list-alignment-input-dark-mode

List alignment fixes and input dark mode support

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;