light mode css

5 files changed, 73 insertions, 2 deletions

diff --git a/styles/button.css b/styles/button.css
index ff5ecec..d3a44e3 100644
--- a/styles/button.css
+++ b/styles/button.css
@@ -23,3 +23,6 @@
 a.button { min-width: calc(200px - 2 * 12px); }
 a.button::after { display: none; }
 
+@media (prefers-color-scheme: light) {
+	.button { color: var(--bg) !important; }
+}
diff --git a/styles/colors.css b/styles/colors.css
index afe051f..5cce897 100644
--- a/styles/colors.css
+++ b/styles/colors.css
@@ -11,3 +11,14 @@
 	--fg: var(--almond);
 }
 
+@media (prefers-color-scheme: light) {
+	:root {
+		--heliotrope-gray: #c9c9dd;
+		--purple-navy: #989abb;
+		--fire-opal: #ba3321;
+
+		--bg: var(--magnolia);
+		--fg: var(--xiketic);
+	}
+}
+
diff --git a/styles/globals.css b/styles/globals.css
index c1c4658..d0e0e4b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -64,3 +64,10 @@ h3 { font-size: 32px; }
 	background-color: var(--fg);
 }
 
+@media (prefers-color-scheme: light) {
+	.subtile {
+		opacity: .6;
+		color: var(--fg);
+	}
+}
+
diff --git a/styles/navbar.css b/styles/navbar.css
index bfd48c5..7e66aa3 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -1,6 +1,6 @@
 .navbarItem .inner {
 	background-color: var(--oxford-blue);
-	color: var(--almond);
+	color: var(--fg);
 
 	padding: 8px;
 	border-radius: 8px;
@@ -35,7 +35,7 @@
 .navbarItem.indentLevel0 { margin-bottom: 12px; }
 
 .navbarItem.active .inner,
-.navbarItem:hover .inner {
+.navbarItem:not(.chapter):hover .inner {
 	background-color: var(--heliotrope-gray);
 	color: var(--oxford-blue);
 }
@@ -79,3 +79,13 @@
 .navbarItem > div > svg {
 	vertical-align: super;
 }
+
+@media (prefers-color-scheme: light) {
+	.navbarItem .inner { background-color: var(--heliotrope-gray); }
+
+	.navbarItem.active .inner,
+	.navbarItem:not(.chapter):hover .inner {
+		color: var(--bg);
+		background-color: var(--fg);
+	}
+}
diff --git a/styles/tags.css b/styles/tags.css
new file mode 100644
index 0000000..95ce012
--- /dev/null
+++ b/styles/tags.css
@@ -0,0 +1,40 @@
+.titleWrapper .tags {
+	margin-top: 12px;
+}
+
+.titleWrapper .tags .tag {
+	--tag-color: hsl(var(--tag-hue), 75%, 70%);
+
+	padding: 4px 12px;
+	border-radius: 999px;
+
+	text-decoration: none;
+	color: var(--fg);
+
+	box-shadow: inset 0 0 0 2px var(--tag-color);
+
+	position: relative;
+	z-index: 1;
+}
+
+@media (prefers-color-scheme: light) {
+	.titleWrapper .tags .tag {
+		--tag-color: hsl(var(--tag-hue), 50%, 40%);
+	}
+}
+
+.titleWrapper .tags .tag::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: -1;
+
+	border-radius: 999px;
+	background-color: var(--tag-color);
+	opacity: .25;
+}
+
+.titleWrapper .tags > * { margin-right: 6px; }