Move color variables from main.css to root.css; split body and header colors

This commit is contained in:
Eryn Wells 2022-09-25 08:48:21 -07:00
parent 979cd1bbcb
commit 10d7c586c0
2 changed files with 8 additions and 12 deletions

View file

@ -6,7 +6,8 @@
--lilac: rgb(187, 121, 245);
--background-color: #fff;
--foreground-color: #000;
--foreground-body-color: rgba(0, 0, 0, 0.8);
--foreground-header-color: #000;
--separator-color: #dfdfdf;
--header-border-color: var(--separator-color);
@ -33,7 +34,9 @@
@media (prefers-color-scheme: dark) {
:root {
--background-color: #000;
--foreground-color: #fff;
--foreground-body-color: rgba(255, 255, 255, 0.8);
--foreground-header-color: #fff;
--separator-color: #222;
--box-shadow-color: rgba(25, 25, 25, 0.8);
--twitter-icon: url(/icons/twitter-dark.svg);
@ -54,6 +57,7 @@ a:hover {
a:visited { color: none; }
body {
color: var(--foreground-body-color);
font-size: 2rem;
line-height: 1.2;
}
@ -138,6 +142,7 @@ footer.site p + p {
}
h1, h2, h3, h4, h5, h6 {
color: var(--foreground-header-color);
font-family: var(--font-family-heading);
margin: 0;
margin-block: 2rem 0.5rem;
@ -272,6 +277,7 @@ nav.bulleted li:first-child::before {
}
nav.bulleted li::before {
color: var(--foreground-header-color);
content: "•";
font-size: 60%;
opacity: 80%;