inherentlee/beall-greenhouses-market
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better parameters for color vars

Browse Source
This commit is contained in:
Lee Cattarin
2025-12-27 21:12:10 -08:00
parent 05cc4c4667
commit 01668a6b29
2 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/artist.css
View File

@ -57,7 +57,7 @@
.description { .description {
grid-area: desc; grid-area: desc;
background-color: light-dark(var(--color-light-alt), var(--color-dark-alt)); background-color: var(--color-alt);
border-radius: 0 0 1rem 1rem; border-radius: 0 0 1rem 1rem;
} }

36
css/main.css
View File

@ -7,6 +7,12 @@
--color-dark-alt: #00274b; --color-dark-alt: #00274b;
--color-orange-light: #ff764f; --color-orange-light: #ff764f;
--color-orange-dark: #f55e33; --color-orange-dark: #f55e33;
--color-bg: light-dark(var(--color-light), var(--color-dark));
--color-text: light-dark(var(--color-dark), var(--color-light));
--color-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
--color-accent: light-dark(var(--color-orange-dark), var(--color-orange-light));
--color-accent-flipped: light-dark(var(--color-orange-light), var(--color-orange-dark));
} }
* { * {
@ -16,8 +22,8 @@
} }
body { body {
background-color: light-dark(var(--color-dark), var(--color-light)); background-color: var(--color-text);
color: light-dark(var(--color-light), var(--color-dark)); color: var(--color-bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: sans-serif; font-family: sans-serif;
@ -25,8 +31,8 @@ body {
} }
#content { #content {
background-color: light-dark(var(--color-light), var(--color-dark)); background-color: var(--color-bg);
color: light-dark(var(--color-dark), var(--color-light)); color: var(--color-text);
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
border-radius: 0 0 2rem 2rem; border-radius: 0 0 2rem 2rem;
@ -86,16 +92,16 @@ h2 {
h2, h2,
h3 { h3 {
border-bottom: .25rem solid light-dark(var(--color-orange-dark), var(--color-orange-light)); border-bottom: .25rem solid var(--color-accent);
} }
a { a {
color: light-dark(var(--color-dark), var(--color-light)); color: var(--color-text);
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
text-decoration-style: solid; text-decoration-style: solid;
text-decoration-thickness: .25rem; text-decoration-thickness: .25rem;
text-decoration-color: light-dark(var(--color-orange-dark), var(--color-orange-light)); text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s; transition: text-decoration-thickness .5s;
margin: 0 .25rem; margin: 0 .25rem;
} }
@ -107,14 +113,14 @@ a:active {
a:focus { a:focus {
text-decoration: none; text-decoration: none;
outline: solid .25rem light-dark(var(--color-orange-dark), var(--color-orange-light)); outline: solid .25rem var(--color-accent);
outline-offset: .1rem; outline-offset: .1rem;
border-radius: .1rem; border-radius: .1rem;
} }
p { p {
background-color: light-dark(var(--color-light-alt), var(--color-dark-alt)); background-color: var(--color-alt);
color: light-dark(var(--color-dark), var(--color-light)); color: var(--color-text);
padding: .5rem; padding: .5rem;
border-radius: 0 0 1rem 1rem; border-radius: 0 0 1rem 1rem;
} }
@ -136,19 +142,19 @@ footer {
} }
footer p { footer p {
background-color: light-dark(var(--color-dark), var(--color-light)); background-color: var(--color-text);
color: light-dark(var(--color-light), var(--color-dark)); color: var(--color-bg);
text-align: center; text-align: center;
margin: 1rem 0 0; margin: 1rem 0 0;
} }
footer a { footer a {
color: light-dark(var(--color-light), var(--color-dark)); color: var(--color-bg);
text-decoration-color: light-dark(var(--color-orange-light), var(--color-orange-dark)); text-decoration-color: var(--color-accent-flipped);
} }
footer a:focus { footer a:focus {
outline-color: light-dark(var(--color-orange-light), var(--color-orange-dark)); outline-color: var(--color-accent-flipped);
} }
#contacts { #contacts {