fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-09-19 20:02:10 +00:00
Code Issues Projects Releases Wiki Activity

Dark palette: reduce excessively harsh contrast

Browse source 
Use excessively harsh colors in response to a "prefers-contrast: more"
media query, but otherwise use something a bit softer to accommodate
overstimulation.
This commit is contained in:
Rohan Kumar 2022-05-23 08:54:06 -07:00
parent e03b892166
commit 972e025aa3
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/css/dark.css
View file

@ -6,17 +6,19 @@
html { html {
/* Pure white on black causes halation. /* Pure white on black causes halation.
* "background" is short for a bunch of unnecessary CSS rules * "background" is short for a bunch of unnecessary CSS rules
* background-color is all I need */ * background-color is all I need.
background-color: #141414; * 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 /* Dimming the default text color is not the same as reducing screen
* brightness, since other colors in this stylesheet have brighter * brightness, since other colors in this stylesheet have brighter
* red and blue channels than the default text. */ * red and blue channels than the default text. */
color: #e9e9e9; color: #e6e6e6;
} }
/* Only color <a> if it's a link; if href is empty, let it be. */ /* Only color <a> if it's a link; if href is empty, let it be. */
a:link { a:link {
color: #f1e7b2; color: #eee7b2;
} }
a:active { a:active {
@ -24,7 +26,13 @@
} }
a:visited { a:visited {
color: #ffd9ff; color: #ffdaff;
}
@media (prefers-contrast: less) {
html {
background-color: #333;
}
} }
/* Small text needs higher contrast. */ /* Small text needs higher contrast. */
@ -38,9 +46,11 @@
} }
} }
@media (prefers-contrast: less) { @media (prefers-contrast: more) {
html { html {
background-color: #333; background-color: #111;
color: #eee;
} }
} }
} }

3
assets/css/main.css
View file

@ -169,7 +169,7 @@ ul ul {
/* Step 1 to making the single-line nav: remove the bullet padding. */ /* Step 1 to making the single-line nav: remove the bullet padding. */
nav ul { nav ul {
padding: 0 padding: 0;
} }
/* step 2: remove bullets and make elements inline. /* step 2: remove bullets and make elements inline.
@ -181,7 +181,6 @@ nav ul li {
margin-right: .375em; margin-right: .375em;
} }
/* narrow screens: reduce margin for blockquotes a lot, using /* narrow screens: reduce margin for blockquotes a lot, using
* a border instead. Put it on the left and right to make it * a border instead. Put it on the left and right to make it
* LTR/RTL-neutral, for machine translators that change text * LTR/RTL-neutral, for machine translators that change text