mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02: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.
|
||||
* "background" is short for a bunch of unnecessary CSS rules
|
||||
* background-color is all I need */
|
||||
background-color: #111;
|
||||
background-color: #141414;
|
||||
/* 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: #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. */
|
||||
a:link {
|
||||
color: #f1e7b2;
|
||||
|
@ -29,17 +24,21 @@
|
|||
}
|
||||
|
||||
a:visited {
|
||||
color: #fdf;
|
||||
color: #ffd9ff;
|
||||
}
|
||||
|
||||
/* Small text needs higher contrast */
|
||||
sup a:visited {
|
||||
color: #ffe3ff;
|
||||
/* Small text needs higher contrast. */
|
||||
@media not (prefers-contrast: less) {
|
||||
sup a:link {
|
||||
color: #feb;
|
||||
}
|
||||
|
||||
sup a:visited {
|
||||
color: #ffe5ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */
|
||||
@media (prefers-contrast: less) {
|
||||
/* stylelint-enable */
|
||||
html {
|
||||
background-color: #333;
|
||||
}
|
||||
|
|
|
@ -11,8 +11,8 @@
|
|||
*
|
||||
* To keep myself from caring about minute details, I limited myself to
|
||||
* only defining spacing in increments of .125em. Pixels are 1px or
|
||||
* multiples of 3px; percentages are in increments of 2.5%. This also
|
||||
* improves compression. No more "finding the perfect value".
|
||||
* multiples of 3px. This also improves compression. No more "finding
|
||||
* the perfect value".
|
||||
*
|
||||
* 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
|
||||
|
@ -40,8 +40,11 @@ html {
|
|||
* <sup>, <sub>, <small>, etc. large enough to have decent contrast
|
||||
* with minimal adjustment, and makes tap-targets larger.
|
||||
* Only do this on screen, since printouts already improve legibility
|
||||
* and cost paper + ink. */
|
||||
font-size: 107.5%;
|
||||
* and cost paper + ink.
|
||||
* 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
|
||||
* link activation on tablets, and is a common practice that users are
|
||||
|
@ -127,6 +130,11 @@ html {
|
|||
padding: .875em .25em;
|
||||
}
|
||||
|
||||
/* Make superscripts a bit easier to tap. */
|
||||
sup > a {
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
|
||||
nav li ol {
|
||||
/* 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
|
||||
|
|
Loading…
Reference in a new issue