Commit 9219d743 authored by Tobias Bengfort's avatar Tobias Bengfort
Browse files

fix contrast colors

- dark/light colors are always dark/light.
- bg/fg colors change depending on user preference.
parent 93f3c267
:root {
--brand: #800080;
--brand-off: #cc9c00;
--body-bg: #fff;
--body-fg: #222;
--body-always-light: #fff;
--brand-bg: var(--brand-off);
--brand-fg: var(--brand);
--light: #fff;
--dark: #222;
--body-bg: var(--light);
--body-fg: var(--dark);
--tint: #aaa;
line-height: 1.5;
......@@ -31,7 +34,7 @@ main {
}
a {
color: var(--brand);
color: var(--brand-fg);
}
strong {
......@@ -129,6 +132,9 @@ footer {
background-color: var(--body-fg);
color: var(--tint);
}
footer nav a:hover {
color: var(--brand-bg);
}
.logo {
display: flex;
......@@ -165,7 +171,7 @@ nav a {
text-transform: uppercase;
}
nav a:hover {
color: var(--brand);
color: var(--brand-fg);
}
.tiles {
......@@ -301,6 +307,7 @@ a.card:hover {
#filter-all:checked ~ #filters [for="filter-all"],
#filter-prototype:checked ~ #filters [for="filter-prototype"] {
background-color: var(--brand-off) !important;
color: var(--dark)
}
#filter-full-game:focus-visible ~ #filters [for="filter-full-game"],
#filter-jam:focus-visible ~ #filters [for="filter-jam"],
......@@ -324,8 +331,8 @@ a.card:hover {
.img-border {border: 2px solid var(--body-fg)}
.bg-body {background-color: var(--body-bg); color: var(--body-fg)}
.bg-inverse {background-color: var(--body-fg); color: var(--body-bg)}
.bg-brand {background-color: var(--brand); color: var(--body-always-light)}
.bg-brand-off {background-color: var(--brand-off); color: var(--body-always-light)}
.bg-brand {background-color: var(--brand); color: var(--light)}
.bg-brand-off {background-color: var(--brand-off); color: var(--dark)}
.visually-hidden {
position: absolute !important;
width: 0 !important;
......@@ -349,12 +356,10 @@ a.card:hover {
@media (prefers-color-scheme: dark) {
:root {
--brand: #800080;
--body-bg: #222;
--body-fg: #fff;
--body-bg: var(--dark);
--body-fg: var(--light);
--brand-bg: var(--brand);
--brand-fg: var(--brand-off);
--tint: #555;
}
a {
color: var(--brand-off);
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment