aboutsummaryrefslogtreecommitdiff
path: root/styles
diff options
context:
space:
mode:
authorlonkaars <l.leblansch@gmail.com>2021-03-30 12:52:46 +0200
committerlonkaars <l.leblansch@gmail.com>2021-03-30 12:52:46 +0200
commit2a0b62d48e9c63246d1f8935acc9756137dd8fd2 (patch)
treefecc7d189ee4dc003d86bd27be9a1b1e196a94c7 /styles
parent627166edff0d7c32a99f330c83fb98891a68fc81 (diff)
light mode css
Diffstat (limited to 'styles')
-rw-r--r--styles/button.css3
-rw-r--r--styles/colors.css11
-rw-r--r--styles/globals.css7
-rw-r--r--styles/navbar.css14
-rw-r--r--styles/tags.css40
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; }