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 {
border: 1px solid var(--separator-color);
border: 1px solid rgb(var(--dk-gray));
padding: 0.3em;
}

19
static/styles/railroad.css
View file

@ -1,16 +1,15 @@
:root {
--rect-fill: #fafafa;
--rect-fill: rgba(var(--mid-blue), 0.1);
}
@media (prefers-color-scheme: dark) {
:root {
--rect-fill: #272822;
--rect-fill: rgb(var(--mid-blue), 0.9);
}
}
svg.railroad-diagram path {
stroke-width: 2;
stroke: var(--body-foreground-color);
stroke: var(--foreground-body-color);
fill: none;
}
@ -18,7 +17,7 @@ svg.railroad-diagram text {
font-family: var(--monospace-font-family);
text-anchor: middle;
white-space: pre;
fill: var(--body-foreground-color);
fill: var(--foreground-body-color);
}
svg.railroad-diagram text.diagram-text {
@ -43,7 +42,7 @@ svg.railroad-diagram g.non-terminal text {
svg.railroad-diagram rect {
stroke-width: 2;
stroke: var(--body-foreground-color);
stroke: var(--foreground-body-color);
fill: var(--rect-fill);
}
@ -54,12 +53,12 @@ svg.railroad-diagram rect.group-box {
}
svg.railroad-diagram path.diagram-text {
stroke-width: 3;
stroke: var(--body-foreground-color);
fill: var(--body-background-color);
stroke-width: 2;
stroke: var(--foreground-body-color);
fill: var(--background-body-color);
cursor: help;
}
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 {
--lt-blue: rgb(69, 212, 243);
--mid-blue: rgb(26, 169, 239);
--dk-blue: rgb(63, 46, 231);
--purple: rgb(161, 49, 232);
--lilac: rgb(187, 121, 245);
--black: 0, 0, 0;
--dk-gray: 32, 32, 32;
--mid-gray: 128, 128, 128;
--lt-gray: 223, 223, 223;
--white: 255, 255, 255;
--background-color: #fff;
--foreground-body-color: rgba(0, 0, 0, 0.8);
--foreground-header-color: #000;
--lt-blue: 69, 212, 243;
--mid-blue: 26, 169, 239;
--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);
--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);
--font-family-body: Verdana, Helvetica, sans-serif;
@ -35,11 +42,11 @@
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #000;
--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);
--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);
--twitter-icon: url(/icons/twitter-dark.svg);
--github-icon: url(/icons/github-dark.svg);
@ -49,7 +56,7 @@
}
a {
color: var(--mid-blue);
color: rgb(var(--mid-blue));
text-decoration: none;
}
a:hover {
@ -169,17 +176,17 @@ main {
}
h1.site {
color: var(--mid-blue);
color: rgb(var(--mid-blue));
}
@supports (background-clip: text) {
h1.site {
background:
radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
radial-gradient(circle at 30% 30%, var(--lt-blue), var(--mid-blue) 20%, transparent 80%),
radial-gradient(ellipse at 95% 20%, var(--dk-blue), var(--mid-blue) 70%, transparent 80%),
radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
radial-gradient(ellipse at 50% 50%, var(--dk-blue), transparent 80%);
radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, 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%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
background-clip: text;
color: transparent;
}
@ -275,7 +282,7 @@ nav.site {
}
nav.site li {
color: var(--mid-blue);
color: var(--site-nav-link-color);
display: block;
margin-inline-end: 0.5em;
}