mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-14 09:42:09 +00:00
Improve dark-mode contrast a bit
- Lighten dark background some more - Replace the black superscript backgrounds with different foreground colors.
This commit is contained in:
parent
279d70810e
commit
404d7d8561
2 changed files with 23 additions and 16 deletions
|
@ -7,18 +7,13 @@
|
||||||
/* 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: #111;
|
background-color: #141414;
|
||||||
/* 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: #e9e9e9;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Small text needs higher contrast */
|
|
||||||
sup {
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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: #f1e7b2;
|
||||||
|
@ -29,17 +24,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: #fdf;
|
color: #ffd9ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Small text needs higher contrast */
|
/* Small text needs higher contrast. */
|
||||||
sup a:visited {
|
@media not (prefers-contrast: less) {
|
||||||
color: #ffe3ff;
|
sup a:link {
|
||||||
|
color: #feb;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup a:visited {
|
||||||
|
color: #ffe5ff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */
|
|
||||||
@media (prefers-contrast: less) {
|
@media (prefers-contrast: less) {
|
||||||
/* stylelint-enable */
|
|
||||||
html {
|
html {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,8 +11,8 @@
|
||||||
*
|
*
|
||||||
* To keep myself from caring about minute details, I limited myself to
|
* To keep myself from caring about minute details, I limited myself to
|
||||||
* only defining spacing in increments of .125em. Pixels are 1px or
|
* only defining spacing in increments of .125em. Pixels are 1px or
|
||||||
* multiples of 3px; percentages are in increments of 2.5%. This also
|
* multiples of 3px. This also improves compression. No more "finding
|
||||||
* improves compression. No more "finding the perfect value".
|
* the perfect value".
|
||||||
*
|
*
|
||||||
* I cite WCAG 2.2 success criteria with "SC". I also tried to meet
|
* I cite WCAG 2.2 success criteria with "SC". I also tried to meet
|
||||||
* the Google a11y requirement of 48px tap targets separated by atl
|
* the Google a11y requirement of 48px tap targets separated by atl
|
||||||
|
@ -40,8 +40,11 @@ html {
|
||||||
* <sup>, <sub>, <small>, etc. large enough to have decent contrast
|
* <sup>, <sub>, <small>, etc. large enough to have decent contrast
|
||||||
* with minimal adjustment, and makes tap-targets larger.
|
* with minimal adjustment, and makes tap-targets larger.
|
||||||
* Only do this on screen, since printouts already improve legibility
|
* Only do this on screen, since printouts already improve legibility
|
||||||
* and cost paper + ink. */
|
* and cost paper + ink.
|
||||||
font-size: 107.5%;
|
* 108.75% is the minimum required to get superscripts to reach 14.5
|
||||||
|
* CSS pixels with most default stylesheets. At that size, my dark
|
||||||
|
* color palette has sufficient contrast.*/
|
||||||
|
font-size: 108.75%;
|
||||||
|
|
||||||
/* Aligning to the center with space on both sides prevents accidental
|
/* Aligning to the center with space on both sides prevents accidental
|
||||||
* link activation on tablets, and is a common practice that users are
|
* link activation on tablets, and is a common practice that users are
|
||||||
|
@ -127,6 +130,11 @@ html {
|
||||||
padding: .875em .25em;
|
padding: .875em .25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Make superscripts a bit easier to tap. */
|
||||||
|
sup > a {
|
||||||
|
padding-bottom: .25em;
|
||||||
|
}
|
||||||
|
|
||||||
nav li ol {
|
nav li ol {
|
||||||
/* Don't duplicate bottom space: the last list item in the nested
|
/* Don't duplicate bottom space: the last list item in the nested
|
||||||
* list and the list item that is the entire nested list will both
|
* list and the list item that is the entire nested list will both
|
||||||
|
|
Loading…
Reference in a new issue