mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02:09 +00:00
Support reduced-contrast + RTL in dark mode
Use -inline-start instead of -left for machine translators that change direction. Wrap that in a feature query so browsers that don't support these rules can fall back to default styling. Those browsers are desktop browsers anyway, where this doesn't relaly make a huge difference. Add reduced-contrast for dark mode, for readers with severe astigmatism. Reduced-contrast is the same as regular dark mode, except that the background is lighter. Somehow fit all of this in <1kb, any bigger and I'll have to stop inlining.
This commit is contained in:
parent
8b5c30c76c
commit
02b1a8421e
2 changed files with 29 additions and 22 deletions
|
@ -26,4 +26,12 @@
|
|||
pre {
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */
|
||||
@media (prefers-contrast: less) {
|
||||
/* stylelint-enable */
|
||||
html {
|
||||
background-color: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -53,12 +53,23 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
/* narrow screens: reduce margin for blockquotes a lot, using
|
||||
@supports (border-inline-start: 6px) {
|
||||
/* narrow screens: reduce margin for blockquotes a lot, using
|
||||
* a thick left-side border instead. */
|
||||
blockquote {
|
||||
border-left: 6px solid #bbb;
|
||||
margin-left: 0;
|
||||
padding-left: 0.75em;
|
||||
blockquote {
|
||||
border-inline-start: 6px solid #bbb;
|
||||
margin: 0;
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
|
||||
/* single-line nav on widescreen and print.
|
||||
* Single-line nav on print saves almost half a page. */
|
||||
@media print, (min-width: 32em) {
|
||||
header nav li {
|
||||
display: inline;
|
||||
padding-inline-end: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* narrow screens: remove unused figure margin. */
|
||||
|
@ -77,22 +88,13 @@ nav li,
|
|||
* rendering bullet points as unnecessary extra visual noise. Pretty
|
||||
* much the only purely-aesthetic change in this CSS file. */
|
||||
.unstyled-list {
|
||||
padding-left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.unstyled-list li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* single-line nav on widescreen and print.
|
||||
* Single-line nav on print saves almost half a page. */
|
||||
@media print, (min-width: 32em) {
|
||||
header nav li {
|
||||
display: inline;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* browsers make monospace small and unreadable for some dumb legacy
|
||||
* reason and this somehow fixes that without overriding the user's
|
||||
* font size preferences. */
|
||||
|
@ -119,18 +121,15 @@ kbd {
|
|||
|
||||
/* Narrow screens: allow horizontal scroll in a pre block. */
|
||||
pre {
|
||||
/* csslint ignore:start */
|
||||
overflow: auto;
|
||||
|
||||
/* csslint ignore:end */
|
||||
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
|
||||
* <pre> so that it looks just like <code> (see below). The use of
|
||||
* borders in place of background colors for distinguishing elements
|
||||
* is an officially documented WCAG technique. */
|
||||
* <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 {
|
||||
|
|
Loading…
Reference in a new issue