mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-24 05:02:10 +00:00
978b4b2b1a
Increased font size to decrease chars-per-line (SC 1.4.8) and increase tap target size. Pad the nav links more and add some extra space between them to meet SC 2.5.5.
271 lines
7.4 KiB
CSS
271 lines
7.4 KiB
CSS
/* 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 use any classes besides "unstyled-list" and "pix". My
|
|
* HTML contains microformats2 classnames for IndieWeb parsers, but I
|
|
* don't actually use those for styling.
|
|
*
|
|
* I cite WCAG 2.2 success criterions with "SC". */
|
|
|
|
html {
|
|
/* Mobile screens benefit from greater line-spacing so links are
|
|
* further apart. Dyslexic users prefer the spacing too.
|
|
* Necessary to meet SC 1.4.8.
|
|
* <100dpi screens: sans-serif is better. Why did browsers settle
|
|
* on serif being the default?? */
|
|
font: 100%/1.5 sans-serif;
|
|
}
|
|
|
|
/* This should not take effect on printouts, to save paper. */
|
|
@media screen {
|
|
body {
|
|
/* Default font sizes are one-size-fits-all; they're optimized for a
|
|
* wide variety of complex pages. For single-column websites like
|
|
* mine, it's ideal to bump it up ever so slightly. This also makes
|
|
* <sup>, <sub>, <small>, etc. large enough to have decent contrast
|
|
* with minimal adjustment, and makes tap-targets larger.
|
|
* Only do this on screen, since printouts already improve legibility
|
|
* and cost paper + ink. */
|
|
font-size: 110%;
|
|
|
|
/* Aligning to the center with space on both sides prevents accidental
|
|
* link activation on tablets, and is a common practice that users are
|
|
* more used to. */
|
|
margin: auto;
|
|
|
|
/* WCAG recommends a max line width. Not everyone can resize the
|
|
* viewport. This isn't for large blocks of text yet, so we don't have
|
|
* to go by SC 1.4.8.
|
|
* 45em = lowest acceptable width for titles, nav, footers, etc */
|
|
max-width: 45em;
|
|
padding: 0 3%;
|
|
}
|
|
|
|
/* 45em is too wide for long body text.
|
|
* Typically meets SC 1.4.8, plus or minus a few characters. */
|
|
div[itemprop="articleBody"] {
|
|
margin: auto;
|
|
max-width: 36em;
|
|
}
|
|
|
|
/* Compensate for misalignment and wasted space caused by a padding
|
|
* increase. */
|
|
nav:not([role="doc-toc"]) {
|
|
margin: -.5em 0 -.5em -.25em;
|
|
}
|
|
|
|
/* SC 2.5.5: Increase nav link tap target size a bit */
|
|
nav:not([role="doc-toc"]) a {
|
|
padding: .75em .25em;
|
|
}
|
|
|
|
nav li {
|
|
margin-bottom: .75em;
|
|
margin-top: .75em;
|
|
}
|
|
}
|
|
|
|
/* Save some space and paper by making the site nav and footer
|
|
* links single-line, but bump up the line-height to increase
|
|
* space between tap-targets (a11y) */
|
|
header li,
|
|
footer li {
|
|
display: inline-block;
|
|
margin-right: .75em;
|
|
line-height: 1.75
|
|
}
|
|
|
|
|
|
|
|
/* narrow screens: reduce margin for blockquotes a lot, using
|
|
* a thick left-side border instead. */
|
|
blockquote {
|
|
border-left: 4px solid;
|
|
margin: 0;
|
|
padding-left: .8em;
|
|
}
|
|
|
|
/* narrow screens: reduce list indentation, hyphenate nested lists
|
|
* touch screens: lists of links should be
|
|
* easy to tap so give them some spacing. */
|
|
dd,
|
|
ol,
|
|
ul {
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
}
|
|
|
|
ol ol,
|
|
ul ul {
|
|
hyphens: auto;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
/* Narrow screens: allow hyphenating titles
|
|
* I can't add soft hyphens to these. */
|
|
h1 {
|
|
hyphens: auto;
|
|
}
|
|
|
|
/* Very narrow screens: full hyphenation */
|
|
@media (max-width: 12em) {
|
|
article,
|
|
h2,
|
|
h3 {
|
|
hyphens: auto;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
|
|
/* <kbd> should be distinguished from <code> and surrounding text
|
|
* in a way beyond font-face; at least two visual distinctions needed
|
|
* Also, Small text is easier to read when slightly bolder.
|
|
* This is important in the dark theme where I set my own colors and
|
|
* try to maintain good perceptual contrast even for small text, but
|
|
* I don't want toggling the theme to impact anything besides color so
|
|
* I set the weight here. */
|
|
kbd,
|
|
sup {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* narrow screens: remove unused figure margins
|
|
* figure captions shouldn't look like regular paragraphs; there should
|
|
* be some extra space. */
|
|
figure {
|
|
margin: 1.5em 0;
|
|
}
|
|
|
|
/* figcaptions should be distinct from surrounding paragraphs tho */
|
|
figure:not([itemtype]) figcaption {
|
|
margin: 0 10%;
|
|
}
|
|
|
|
/* 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,
|
|
kbd,
|
|
samp {
|
|
font-family: monospace, monospace;
|
|
}
|
|
|
|
/* 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, names). For content I do control,
|
|
* I just add soft hyphens to the HTML. */
|
|
li[itemprop="comment"],
|
|
:not(pre) > code,
|
|
:not(pre) > samp,
|
|
span[itemtype="https://schema.org/Person"] {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Narrow screens: allow horizontal scroll in a pre block. */
|
|
pre {
|
|
padding: .5em;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Distinguish images from the background in case their color is
|
|
* too similar to the page background color. Also put a border around
|
|
* <pre> and <code> 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,
|
|
:not(pre) > samp {
|
|
border: 1px solid;
|
|
}
|
|
|
|
/* A black border is too harsh. */
|
|
:not(pre) > code,
|
|
:not(pre) > samp {
|
|
border-color: #999;
|
|
|
|
/* borders shouldn't touch text */
|
|
padding: 0 0.1em;
|
|
}
|
|
|
|
/* Some images look blurry when scaled; this makes them easier to
|
|
* read. */
|
|
.pix {
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
/* 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: 95%;
|
|
}
|
|
|
|
/* 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[aria-labelledby="webmentions"],
|
|
div[role="doc-endnotes"] {
|
|
border-top: 2px solid;
|
|
content-visibility: auto;
|
|
}
|
|
|
|
/* Some browser focus indicators are inaccessible; override them with
|
|
* something more visible. See WCAG 2.x SC 2.4.12. I also tried to
|
|
* match browser behavior; mainstream browsers use :focus-visible
|
|
* instead of focus but older/simpler browsers only support :focus.
|
|
* I borrowed these directives from
|
|
* https://www.tempertemper.net/blog/refining-focus-styles-with-focus-visible
|
|
* */
|
|
|
|
/* For browsers that don't support :focus-visible */
|
|
a:focus,
|
|
summary:focus,
|
|
pre[tabindex]:focus {
|
|
outline: 3px solid;
|
|
}
|
|
|
|
/* Remove :focus styling for browsers that do support :focus-visible */
|
|
@supports selector(:focus-visible) {
|
|
a:focus:not(:focus-visible),
|
|
summary:focus:not(:focus-visible),
|
|
pre[tabindex]:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
/* Add focus styling back in browsers that do support :focus-visible */
|
|
:focus-visible {
|
|
outline: 3px solid;
|
|
}
|
|
|
|
/* 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.
|
|
* */
|