diff options
Diffstat (limited to 'styles')
| -rw-r--r-- | styles/button.css | 3 | ||||
| -rw-r--r-- | styles/colors.css | 11 | ||||
| -rw-r--r-- | styles/globals.css | 7 | ||||
| -rw-r--r-- | styles/navbar.css | 14 | ||||
| -rw-r--r-- | styles/tags.css | 40 |
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; } |