6 files changed, 49 insertions, 40 deletions
diff --git a/_sass/code.scss b/_sass/code.scss
index cc27a5e..79791b3 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -17,11 +17,3 @@ pre.highlight {
 %token_number { color: var(--code-number); }
 %token_operator { color: var(--code-operator); }
 
-:root {
-	--code-comment: #556885;
-	--code-keyword: #a72076;
-	--code-string: #755a1c;
-	--code-number: #c94f29;
-	--code-operator: #6327c1;
-}
-
diff --git a/_sass/color.scss b/_sass/color.scss
new file mode 100644
index 0000000..51bb888
--- /dev/null
+++ b/_sass/color.scss
@@ -0,0 +1,32 @@
+:root {
+	--bg-0: canvas;
+	--fg-0: canvastext;
+	--bg-1: canvastext;
+	--fg-1: canvas;
+	--bg-2: buttonface;
+	--fg-2: buttontext;
+
+	--code-comment: #556885;
+	--code-keyword: #a72076;
+	--code-string: #755a1c;
+	--code-number: #c94f29;
+	--code-operator: #6327c1;
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+	:root {
+		--bg-0: canvas;
+		--fg-0: canvastext;
+		--bg-1: color-mix(in srgb, canvas 100%, white 10%);
+		--fg-1: canvastext;
+		--bg-2: var(--bg-1);
+		--fg-2: var(--fg-1);
+
+		--code-comment: #808b9bd9;
+		--code-keyword: #d25a76;
+		--code-string: #e4a87e;
+		--code-number: #fa7d57;
+		--code-operator: #da9eff;
+	}
+}
+
diff --git a/_sass/layout.scss b/_sass/layout.scss
index c8ada80..cbc9d17 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -57,6 +57,10 @@ aside {
 	padding: 6px 0px;
 }
 
+ul {
+	padding-left: 24px;
+}
+
 aside ul {
 	padding-left: 16px;
 	margin: 0;
@@ -71,8 +75,8 @@ aside > ul { margin-left: 12px; }
 summary { list-style-position: outside; }
 // hide bullets for list items that can be expanded
 li.stub::marker { content: ""; }
-// give collapsable element arrow "clickable" cursor
-summary::marker { cursor: pointer; }
+// collapsable element
+summary, summary::marker { cursor: pointer; }
 
 blockquote {
 	position: relative;
diff --git a/_sass/media.scss b/_sass/media.scss
index d254674..134d0d4 100644
--- a/_sass/media.scss
+++ b/_sass/media.scss
@@ -11,25 +11,10 @@
 }
 
 @media only screen and (prefers-color-scheme: dark) {
-	.invert, input, button {
-		background-color: #222;
-		color: inherit;
-	}
-
 	nav .item.active {
-		color: inherit;
-		background-color: canvas;
 		text-decoration: underline;
 		font-weight: bold;
 	}
-
-	:root {
-		--code-comment: #808b9bd9;
-		--code-keyword: #d25a76;
-		--code-string: #e4a87e;
-		--code-number: #fa7d57;
-		--code-operator: #da9eff;
-	}
 }
 
 @media print {
diff --git a/_sass/theme.scss b/_sass/theme.scss
index 290cc8e..4fb0daa 100644
--- a/_sass/theme.scss
+++ b/_sass/theme.scss
@@ -1,3 +1,4 @@
+
 blockquote {
 	font-style: italic;
 	opacity: .8;
@@ -24,15 +25,14 @@ blockquote.admonition .title {
 	color: var(--color);
 }
 
-// navbar colors
-.invert {
-	background-color: black;
-	color: white;
+nav, header, footer {
+	background-color: var(--bg-1);
+	color: var(--fg-1);
 }
 
 nav .item.active {
-	color: canvastext !important;
-	background-color: canvas !important;
+	background-color: var(--bg-0) !important;
+	color: var(--fg-0) !important;
 }
 
 // only show underline when hovering link
@@ -65,7 +65,7 @@ td, th {
 	padding: 0 1ex;
 }
 table {
-	border-color: currentColor;
+	border-color: currentcolor;
 	border-spacing: 0;
 }
 
@@ -96,12 +96,10 @@ table {
 	list-style-type: disclosure-open;
 }
 
-*:focus { outline: none; }
-
 input, button {
 	border: none;
-	background: #ccc;
-	color: inherit;
+	background-color: var(--bg-2);
+	color: var(--fg-2);
 
 	box-sizing: content-box;
 	height: 20px;
diff --git a/_sass/typography.scss b/_sass/typography.scss
index 6edab4f..335e433 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -1,14 +1,12 @@
 html {
-	font-family: "Inter", sans-serif;
+	font-family: sans-serif;
 	font-size: 10pt;
-	font-feature-settings: "ss07", "ss08";
-
 	hyphens: auto;
 	tab-size: 2;
 }
 
 code {
-	font-family: "JetBrainsMono", monospace;
+	font-family: monospace;
 	font-size: 9pt;
 }