Now that more mobile browsers support text zoom, I don't need to worry
about font size as much. Moreover, iOS and Android support a zoomed mode
that makes all tap targets and text larger. This mode made my site's
larger text uncomfortably larger than other sites. On Android, this is
the "Display size" setting; on iOS, this is the "display zoom" setting
under "Display and Brightness" section.
This commit switches everything back to the browser's default font
sizes to better accomodate non-default zoom levels and display zoom
settings.
New foreground colors when BOTH "prefers-color-scheme: dark" and
"prefers-contrast: more" media queries evaluate to "true" at the same
time. Regular and reduced-contrast dark-mode remain unchanged, and
non-dark colors continue to be browser-defaults.
High-contrast dark-mode now has visually distinct visited/unvisited
links for red-green and blue-yellow color blindness, and targets an even
higher APCA contrast.
- CSS containment was cutting off nested list-item markers; increase
their padding to compensate
- Remove nested <details> use, it was causing problems and was probably
unnecessary
- Increase list padding so that ordered-list decimal markers have space
to fit without overflowing.
- Improve style for removing underline between h-card name and photo, so
it doesn't apply to any unnecessary elements.
- Reduce budget for document size.
- Fix unnecessarily excessive spacing around "li > article" entry data
(was due to containment)
- Aesthetic tweak: ugly underline between microformat u-photo and p-name
- Make CSS file smaller by using some microformats2 classnames instead
of microdata attributes.
- Remove unnecessary elements from attribute selectors wherever it
improves compression.
- Dark theme: prevent active link color from being overridden.
- Sort properties/attributes to improve compression ratios.
- Bump font size from 109% to 109.375% so the default font size hits
17.5px and we get nice round numbers.
CSS containmnet crops breadcrumb focus indicators when they overflow
their containers. Instead of adding a new rule for this, refactor some
old rules so padding-increases also apply to the breadcrumb containers.
Add padding to elements so content containment won't cause cropping.
Adjust the global body padding accordingly. This also exposed a
redundancy in the stylesheet, which was removed.
Now the site headers/footers, article elements (including archive
pages), <pre> elements, and other top-level elements are contained.
Rendering long-ass articles with thousands of nodes should be a little
faster.
Link targets need to be focusable to work with VoiceOver.
Making <main> focusable causes some side-effects, like making the TAB
key go to the beginning of <main> instead of the element after the
currently-clicked region.
Also removes the annoying outline around "main" in some non-mainstream
browsers, without having to add extra CSS.
I respect whatever you're into, but that doesn't mean it belongs on my
site. Disable the text inflation algorithm. Don't make landscape fonts
comically large.
