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

Define all color vars as triples, and create semantic colors that convert the triples to rgb colors

Browse source
This commit is contained in:
Eryn Wells 2022-10-03 19:54:14 -07:00
parent e31a4a268d
commit d862251a8f
3 changed files with 41 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/styles/development.css
View file

@ -49,7 +49,7 @@
} }
#debug-page-info td { #debug-page-info td {
border: 1px solid var(--separator-color); border: 1px solid rgb(var(--dk-gray));
padding: 0.3em; padding: 0.3em;
} }

19
static/styles/railroad.css
View file

@ -1,16 +1,15 @@
:root { :root {
--rect-fill: #fafafa; --rect-fill: rgba(var(--mid-blue), 0.1);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--rect-fill: #272822; --rect-fill: rgb(var(--mid-blue), 0.9);
} }
} }
svg.railroad-diagram path { svg.railroad-diagram path {
stroke-width: 2; stroke-width: 2;
stroke: var(--body-foreground-color); stroke: var(--foreground-body-color);
fill: none; fill: none;
} }
@ -18,7 +17,7 @@ svg.railroad-diagram text {
font-family: var(--monospace-font-family); font-family: var(--monospace-font-family);
text-anchor: middle; text-anchor: middle;
white-space: pre; white-space: pre;
fill: var(--body-foreground-color); fill: var(--foreground-body-color);
} }
svg.railroad-diagram text.diagram-text { svg.railroad-diagram text.diagram-text {
@ -43,7 +42,7 @@ svg.railroad-diagram g.non-terminal text {
svg.railroad-diagram rect { svg.railroad-diagram rect {
stroke-width: 2; stroke-width: 2;
stroke: var(--body-foreground-color); stroke: var(--foreground-body-color);
fill: var(--rect-fill); fill: var(--rect-fill);
} }
@ -54,12 +53,12 @@ svg.railroad-diagram rect.group-box {
} }
svg.railroad-diagram path.diagram-text { svg.railroad-diagram path.diagram-text {
stroke-width: 3; stroke-width: 2;
stroke: var(--body-foreground-color); stroke: var(--foreground-body-color);
fill: var(--body-background-color); fill: var(--background-body-color);
cursor: help; cursor: help;
} }
svg.railroad-diagram g.diagram-text:hover path.diagram-text { svg.railroad-diagram g.diagram-text:hover path.diagram-text {
fill: #eee; fill: var(--rect-fill);
} }

55
static/styles/root.css
View file

@ -1,19 +1,26 @@
:root { :root {
--lt-blue: rgb(69, 212, 243); --black: 0, 0, 0;
--mid-blue: rgb(26, 169, 239); --dk-gray: 32, 32, 32;
--dk-blue: rgb(63, 46, 231); --mid-gray: 128, 128, 128;
--purple: rgb(161, 49, 232); --lt-gray: 223, 223, 223;
--lilac: rgb(187, 121, 245); --white: 255, 255, 255;
--background-color: #fff; --lt-blue: 69, 212, 243;
--foreground-body-color: rgba(0, 0, 0, 0.8); --mid-blue: 26, 169, 239;
--foreground-header-color: #000; --dk-blue: 63, 46, 231;
--purple: 161, 49, 232;
--lilac: 187, 121, 245;
--separator-color: #dfdfdf; --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(--lt-blue));
--separator-color: rgb(var(--lt-gray));
--header-border-color: var(--separator-color); --header-border-color: var(--separator-color);
--footer-border-color: var(--separator-color); --footer-border-color: var(--separator-color);
--box-shadow-color: rgba(230, 230, 230, 0.8); --box-shadow-color: rgba(var(--lt-gray), 0.8);
--header-box-shadow-color: var(--box-shadow-color); --header-box-shadow-color: var(--box-shadow-color);
--font-family-body: Verdana, Helvetica, sans-serif; --font-family-body: Verdana, Helvetica, sans-serif;
@ -35,11 +42,11 @@
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background-color: #000; --background-color: rgb(var(--black));
--foreground-body-color: rgba(255, 255, 255, 0.8); --foreground-body-color: rgba(var(--white), 0.8);
--foreground-header-color: #fff; --foreground-header-color: rgb(var(--white));
--separator-color: #222; --separator-color: rgb(var(--dk-gray));
--box-shadow-color: rgba(25, 25, 25, 0.8); --box-shadow-color: rgba(var(--dk-gray), 0.8);
--twitter-icon: url(/icons/twitter-dark.svg); --twitter-icon: url(/icons/twitter-dark.svg);
--github-icon: url(/icons/github-dark.svg); --github-icon: url(/icons/github-dark.svg);
@ -49,7 +56,7 @@
} }
a { a {
color: var(--mid-blue); color: rgb(var(--mid-blue));
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
@ -169,17 +176,17 @@ main {
} }
h1.site { h1.site {
color: var(--mid-blue); color: rgb(var(--mid-blue));
} }
@supports (background-clip: text) { @supports (background-clip: text) {
h1.site { h1.site {
background: background:
radial-gradient(circle at 20% 70%, var(--purple), transparent 40%), radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
radial-gradient(circle at 30% 30%, var(--lt-blue), var(--mid-blue) 20%, transparent 80%), radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
radial-gradient(ellipse at 95% 20%, var(--dk-blue), var(--mid-blue) 70%, transparent 80%), radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%),
radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%), radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%), radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
radial-gradient(ellipse at 50% 50%, var(--dk-blue), transparent 80%); radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
background-clip: text; background-clip: text;
color: transparent; color: transparent;
} }
@ -275,7 +282,7 @@ nav.site {
} }
nav.site li { nav.site li {
color: var(--mid-blue); color: var(--site-nav-link-color);
display: block; display: block;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
} }