~seirdy/seirdy.one

636ecb3591630bd2fc6f0a37481de22b48a13a84 — Rohan Kumar 2 months ago 0d2d25b
CSS: a11y: brighten bkg for astigmatic readers

Reduces the "halo" effect that comes with reading bright text on a solid
black background.
2 files changed, 12 insertions(+), 16 deletions(-)

M assets/css/dark.css
M assets/css/main.css
M assets/css/dark.css => assets/css/dark.css +5 -4
@@ 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 {

M assets/css/main.css => assets/css/main.css +7 -12
@@ 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;
	}