/* CSS that adds the bare minimum for a simple layout. * Nothing here exists purely for aesthetics except the unstyled-list; * everything else addresses a specific a11y, compatibility, or critical * usability need. * I also don't define any non-semantic classes besides unstyled-list. * The the other classnames referenced here are from microformats2. */ /* Start with browser defaults: default fonts, non-dark-mode colors, etc * Only change things to solve a specific a11y or significant usability * need. One exception: cosmetic improvement for unstyled-list */ html { /* Mobile screens benefit from greater line-spacing so links are * further apart. Dyslexic users prefer the spacing too. * <100dpi screens: sans-serif is better. Why did browsers settle * on serif being the default?? */ font: 100%/1.5 sans-serif; /* Aligning to the center with space on both sides prevents accidental * link activation on mobile devices. */ margin: auto; } /* WCAG recommends a max line width. Not everyone can resize the * viewport. * This should not take effect on printouts, to save paper. */ @media screen { html { max-width: 45em; padding: 0 2%; } .e-content { margin: auto; max-width: 38em; } } @supports (border-inline-start: 6px) { /* narrow screens: reduce margin for blockquotes a lot, using * a thick left-side border instead, or a right-side border in * RTL locales. Some browsers like NetSurf or IE don't support this, * but they're pretty much only used on the desktop where a huge indent * is less of a problem.*/ blockquote { border-inline-start: 5px solid #aaa; margin: 0; padding: 0 0.8em; } } /* single-line nav on widescreen and print. * Single-line nav on print saves almost half a page. */ @media (min-width: 32em) { header nav li { display: inline; /* inline-end doesn't work in netsurf. -right should stil make sense * in RTL machine translation, it'll just look a bit indented. */ padding-right: 0.5em; } } a[aria-current="page"] { font-weight: bold; } /* narrow screens: remove unused figure margin. */ figure { margin: 0; } /* Mobile optimization: nav links are tappable with fat fingers */ nav li, .unstyled-list li { margin-bottom: 0.5em; } /* Lists without bullets: navlinks, posts lists, webmentions. * Those three are lists whose items are already easily distinguishable, * rendering bullet points as unnecessary extra visual noise. Pretty * much the only purely-aesthetic change in this CSS file. */ .unstyled-list { padding: 0; } .unstyled-list li { list-style-type: none; } /* browsers make monospace small and unreadable for some dumb legacy * reason and this somehow fixes that without overriding the user's * font size preferences. */ code, pre, kbd { /* stylelint-disable -- compatibility hack */ font-family: monospace, monospace; /* stylelint-enable */ } /* Narrow screens: long words can cause content to flow out of the * viewport, triggering horizontal scrolling. Allow breaking words in * content I don't control (comments). For content I do control, I just * add soft hyphens to the HTML. */ .u-comment, :not(pre) > code { overflow-wrap: break-word; /* borders shouldn't touch text */ padding: 0 0.1em; } /* Narrow screens: allow horizontal scroll in a pre block. */ pre { overflow: auto; padding: 0.5em; } /* Distinguish images from the background in case their color is * too similar to the page background color. Also put a border around *
 and  to distinguish them in ways besides font-family. The
 * use of borders in place of background colors for distinguishing
 * elements is an officially documented WCAG technique. */
img,
pre,
:not(pre) > code {
	border: 1px solid #aaa;
}

/* center images that aren't my indieweb icon; same justification as
 * for centering the body contents. Also makes images easier to see
 * for people holding a device with one hand. */
img:not(.u-photo) {
	display: block;
	height: auto;
	margin: auto;
	max-width: 100%;
}

/* WCAG Technique C25: use borders to separate sections.
 * Also use "content-visibility: auto" to improve performance by
 * reducing the number of DOM nodes rendered at once. */
footer,
section[role="doc-endnotes"] {
	border-top: 1px solid #aaa;
	content-visibility: auto;
}

/* Todo:
 * - Some browsers don't scale SVGs properly; the img container
 *   dimensions crop the image rather than scale it. Investigate
 *   if this only applies to Internet Explorer or if it applies to
 *   other uncommon browsers too. If any non-IE browsers do this and/or
 *   if the spec allows this behavior, try to correct it here.
 * - Wait till Webkit fixes its broken-ass default dark stylesheet
 *   then consider trimming the dark stylesheet I provide.
 * - Investigate CSS-based hints to screenreaders. */