From 45f9087f03fde7e7d762e25a9f2966d1e6e907f3 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 25 Jul 2023 22:27:59 -0700
Subject: [PATCH] fix checkbox/tasklist styling

---
 content/features/upcoming features.md |  1 -
 quartz/styles/base.scss               | 39 ++++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/content/features/upcoming features.md b/content/features/upcoming features.md
index dab75c6ad..6d36de85a 100644
--- a/content/features/upcoming features.md	
+++ b/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
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index fd94a1a1e..ebdc2faf7 100644
--- a/quartz/styles/base.scss
+++ b/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 {