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

CSS: a11y: brighten bkg for astigmatic readers

Browse source 
Reduces the "halo" effect that comes with reading bright text on a solid
black background.
This commit is contained in:
Rohan Kumar 2021-08-30 15:08:59 -07:00
parent 0d2d25b124
commit 636ecb3591
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 12 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
assets/css/dark.css
View file

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

19
assets/css/main.css
View file

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