mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
CSS: a11y: brighten bkg for astigmatic readers
Reduces the "halo" effect that comes with reading bright text on a solid black background.
This commit is contained in:
parent
0d2d25b124
commit
636ecb3591
2 changed files with 12 additions and 16 deletions
|
@ -1,9 +1,10 @@
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html {
|
html {
|
||||||
/* "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: #000;
|
* I've been told that pure white on black is a bit harsh */
|
||||||
color: #eee; /* I've been told that pure white on black is a bit harsh */
|
background-color: #090900;
|
||||||
|
color: #ececec;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* IndieWeb u-photo shouldn't look like floating punctuation marks */
|
/* IndieWeb u-photo shouldn't look like floating punctuation marks */
|
||||||
|
@ -12,7 +13,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #ed5;
|
color: #ed7;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
|
|
|
@ -8,7 +8,8 @@
|
||||||
* 4. single-row nav links widescreen, multiline nav on narrow screens
|
* 4. single-row nav links widescreen, multiline nav on narrow screens
|
||||||
* 5. Soft border around code in case it looks too similar to regular
|
* 5. Soft border around code in case it looks too similar to regular
|
||||||
* text, and to show it continue across more than one line
|
* text, and to show it continue across more than one line
|
||||||
* 6. Increase the line-spacing a bit.
|
* 6. Increase the line-spacing a bit so users on mobile devices can
|
||||||
|
* tap links more easily.
|
||||||
* 7. Horizontally center non-inline images; left-aligned stick out.
|
* 7. Horizontally center non-inline images; left-aligned stick out.
|
||||||
* 8. dark.css changes a few colors if the browser wants dark mode.
|
* 8. dark.css changes a few colors if the browser wants dark mode.
|
||||||
* 9. Support unstyled lists: for webmentions, post lists, nav links.
|
* 9. Support unstyled lists: for webmentions, post lists, nav links.
|
||||||
|
@ -17,17 +18,11 @@
|
||||||
* default fonts, non-dark-mode colors, etc.
|
* default fonts, non-dark-mode colors, etc.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
html {
|
||||||
font: 100%/1.5em sans-serif;
|
font: 100%/1.5 sans-serif;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: 50em;
|
max-width: 50em;
|
||||||
padding: 0 5%;
|
padding: 0 3%;
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
line-height: 1.25;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
|
@ -51,8 +46,8 @@ nav li {
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* single-line nav o4 widescreen, multi-line nav on narrow screens */
|
/* single-line nav on widescreen, multi-line nav on narrow screens */
|
||||||
@media (min-width: 24rem) {
|
@media (min-width: 24em) {
|
||||||
nav li {
|
nav li {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue