fix checkbox/tasklist styling

content/features/upcoming features.md

@@ -6,7 +6,6 @@ draft: true
 
 - images in same folder are broken on shortest path mode
 - watch mode for config/source code
-- https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Task+lists task list styling
 - publish metadata https://help.obsidian.md/Editing+and+formatting/Metadata#Metadata+for+Obsidian+Publish
 - metadata aliases: https://help.obsidian.md/Editing+and+formatting/Metadata#Predefined+metadata
 - block links: https://help.obsidian.md/Linking+notes+and+files/Internal+links#Link+to+a+block+in+a+note

quartz/styles/base.scss

@@ -92,11 +92,17 @@ a {
     & li:has(> input[type="checkbox"]) {
       list-style-type: none;
       padding-left: 0;
-      margin-left: -1.4rem;
+    }
+
+    & li:has(> input[type="checkbox"]:checked) {
+      text-decoration: line-through;
+      text-decoration-color: var(--gray);
+      color: var(--gray);
     }
 
     & li > * {
-      margin: 0;
+      margin-top: 0;
+      margin-bottom: 0;
     }
   }
 
@@ -175,8 +181,35 @@ a {
 input[type="checkbox"] {
   transform: translateY(2px);
   color: var(--secondary);
-  border-color: var(--lightgray);
+  border: 1px solid var(--lightgray);
+  border-radius: 3px;
   background-color: var(--light);
+  position: relative;
+  margin-inline-end: 0.2rem;
+  margin-inline-start: -1.4rem;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+
+  &:checked {
+    border-color: var(--secondary);
+    background-color: var(--secondary);
+
+    &::after {
+      content: "";
+      top: -1px;
+      left: -1px;
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      width: 4px;
+      height: 8px;
+      display: block;
+      border: solid 1px var(--light);
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
 }
 
 blockquote {