mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-27 22:12:10 +00:00
972e025aa3
Use excessively harsh colors in response to a "prefers-contrast: more" media query, but otherwise use something a bit softer to accommodate overstimulation.
56 lines
1.2 KiB
CSS
56 lines
1.2 KiB
CSS
/* The dark stylesheet is the only place we set custom colors besides
|
|
* border colors for inline text. Make sure the perceptual contrast
|
|
* stays within the ideal APCA ranges, not lower and preferably not
|
|
* higher either. */
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
/* Pure white on black causes halation.
|
|
* "background" is short for a bunch of unnecessary CSS rules
|
|
* background-color is all I need.
|
|
* This is the brightest background that still achieves an APCA
|
|
* contrast of 90 Lc.*/
|
|
background-color: #1a1919;
|
|
/* Dimming the default text color is not the same as reducing screen
|
|
* brightness, since other colors in this stylesheet have brighter
|
|
* red and blue channels than the default text. */
|
|
color: #e6e6e6;
|
|
}
|
|
|
|
/* Only color <a> if it's a link; if href is empty, let it be. */
|
|
a:link {
|
|
color: #eee7b2;
|
|
}
|
|
|
|
a:active {
|
|
color: #b93;
|
|
}
|
|
|
|
a:visited {
|
|
color: #ffdaff;
|
|
}
|
|
|
|
@media (prefers-contrast: less) {
|
|
html {
|
|
background-color: #333;
|
|
}
|
|
}
|
|
|
|
/* Small text needs higher contrast. */
|
|
@media not (prefers-contrast: less) {
|
|
sup a:link {
|
|
color: #feb;
|
|
}
|
|
|
|
sup a:visited {
|
|
color: #ffe5ff;
|
|
}
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
html {
|
|
background-color: #111;
|
|
color: #eee;
|
|
}
|
|
}
|
|
|
|
}
|