fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-09-19 20:02:10 +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) {
html {
/* "background" is short for a bunch of unnecessary CSS rules
* background-color is all I need */
background-color: #000;
color: #eee; /* I've been told that pure white on black is a bit harsh */
* background-color is all I need
* 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 */
@ -12,7 +13,7 @@
}
a {
color: #ed5;
color: #ed7;
}
a:visited {

19
assets/css/main.css
View file

@ -8,7 +8,8 @@
* 4. single-row nav links widescreen, multiline nav on narrow screens
* 5. Soft border around code in case it looks too similar to regular
* 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.
* 8. dark.css changes a few colors if the browser wants dark mode.
* 9. Support unstyled lists: for webmentions, post lists, nav links.
@ -17,17 +18,11 @@
* default fonts, non-dark-mode colors, etc.
*/
body {
font: 100%/1.5em sans-serif;
html {
font: 100%/1.5 sans-serif;
margin: auto;
max-width: 50em;
padding: 0 5%;
}
h1,
h2,
h3 {
line-height: 1.25;
padding: 0 3%;
}
blockquote {
@ -51,8 +46,8 @@ nav li {
margin-bottom: 0.5em;
}
/* single-line nav o4 widescreen, multi-line nav on narrow screens */
@media (min-width: 24rem) {
/* single-line nav on widescreen, multi-line nav on narrow screens */
@media (min-width: 24em) {
nav li {
display: inline;
}