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

Rework the background-color and color CSS vars

Browse source
This commit is contained in:
Eryn Wells 2022-10-19 07:35:29 -07:00
parent e5701b5c92
commit 484029731e
1 changed files with 23 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

36
static/styles/root.css
View file

@ -17,9 +17,6 @@
--purple: 161, 49, 232;
--lilac: 187, 121, 245;
--background-color: rgb(var(--white));
--foreground-body-color: rgba(var(--black), 0.8);
--foreground-header-color: rgb(var(--black));
--site-nav-link-color: rgb(var(--mid-blue));
--separator-color: rgb(var(--lt-gray));
@ -42,6 +39,15 @@
--body-header-line-height: 1.1;
--body-code-background-color: rgb(var(--super-lt-gray));
--heading-color: rgb(var(--black));
--html-background-color: rgb(var(--white));
--html-color: rgba(var(--black), 0.8);
--platter-background-color: rgba(var(--white), var(--platter-background-opacity));
--platter-background-opacity: 0.6;
--platter-backdrop-filter: blur(10px);
--content-width: 80rem;
--transition-duration: 0.7s;
@ -55,13 +61,18 @@
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: rgb(var(--black));
--foreground-body-color: rgba(var(--white), 0.8);
--foreground-header-color: rgb(var(--white));
--separator-color: rgb(var(--dk-gray));
--box-shadow-color: rgba(var(--dk-gray), 0.8);
--body-code-background-color: rgb(var(--dk-gray));
--heading-color: rgb(var(--white));
--html-background-color: rgb(var(--black));
--html-color: rgba(var(--white), 0.8);
--platter-background-color: rgba(var(--black), var(--platter-background-opacity));
--platter-backdrop-filter: brightness(0.66) blur(10px);
--twitter-icon: url(/icons/twitter-dark.svg);
--github-icon: url(/icons/github-dark.svg);
--instagram-icon: url(/icons/instagram-dark.svg);
@ -120,7 +131,6 @@ blockquote {
}
body {
color: var(--foreground-body-color);
font-size: var(--body-font-size);
line-height: var(--body-line-height);
}
@ -224,7 +234,7 @@ footer.site p + p {
}
h1, h2, h3, h4, h5, h6 {
color: var(--foreground-header-color);
color: var(--heading-color);
font-family: var(--font-family-heading);
font-weight: 600;
margin-block: 3.5rem 1rem;
@ -326,8 +336,8 @@ header.site .grid nav:last-of-type {
}
html {
background-color: var(--background-color);
color: var(--foreground-color);
background-color: var(--html-background-color);
color: var(--html-color);
font-family: var(--font-family-body);
font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
}
@ -375,13 +385,13 @@ nav.site li {
nav.site .active { font-weight: bold; }
nav.bulleted li:first-child::before {
color: var(--foreground-color);
color: var(--html-color);
content: "";
margin-inline-end: 0;
}
nav.bulleted li::before {
color: var(--foreground-header-color);
color: var(--heading-color);
content: "•";
font-size: 60%;
font-weight: normal;
@ -578,7 +588,7 @@ ol ol {
}
.platter {
background: var(--background-color);
background-color: var(--platter-background-color);
border: 1px solid var(--header-border-color);
border-radius: 12px;
box-shadow: 3px 4px 4px var(--header-box-shadow-color);