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

10
static/styles/root.css
View file

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