fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 22:12:10 +00:00
Code Issues Projects Releases Wiki Activity

Improve dark-mode contrast a bit

Browse source 
- Lighten dark background some more
- Replace the black superscript backgrounds with different foreground
  colors.
This commit is contained in:
Rohan Kumar 2022-05-23 08:42:24 -07:00
parent 279d70810e
commit 404d7d8561
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 23 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
assets/css/dark.css
View file

@ -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. */
@media not (prefers-contrast: less) {
sup a:link {
color: #feb;
} }
/* Small text needs higher contrast */
sup a:visited { sup a:visited {
color: #ffe3ff; 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;
} }

16
assets/css/main.css
View file

@ -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