eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
static/styles/main.css
View file

@ -7,9 +7,7 @@
--header: 8rem;
--footer: calc(8rem + var(--safe-bottom));
--light: #fff;
--light-dim: #888;
--dark: rgb(22, 22, 22);
--highlight-color: rgb(50, 186, 228);
--hljs-bg: #111;
@ -18,9 +16,6 @@
--body-padding: 4rem;
--body-width: 80rem;
--body-background-color: var(--light);
--body-foreground-color: var(--dark);
--heading-color: var(--body-foreground-color);
--link-color: var(--highlight-color);
@ -30,15 +25,10 @@
--tag-text-color: var(--dark);
--tag-background-color: #eee;
--tag-hover-background-color: #bbb;
--separator-color: #888;
}
@media (prefers-color-scheme: dark) {
:root {
--body-background-color: var(--dark);
--body-foreground-color: var(--light);
--tag-text-color: var(--light-dim);
--tag-background-color: rgb(40, 40, 40);
--tag-hover-background-color: rgb(73, 73, 73);

10
static/styles/root.css
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%;