fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-17 22:32:10 +00:00
Code Issues Projects Releases Wiki Activity

Support reduced-contrast + RTL in dark mode

Browse source 
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:
Rohan Kumar 2022-03-30 17:44:39 -07:00
parent 8b5c30c76c
commit 02b1a8421e
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/css/dark.css
View file

@ -26,4 +26,12 @@
pre { pre {
border-color: #333; border-color: #333;
} }
/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */
@media (prefers-contrast: less) {
/* stylelint-enable */
html {
background-color: #222;
}
}
} }

37
assets/css/main.css
View file

@ -53,12 +53,23 @@ html {
} }
} }
@supports (border-inline-start: 6px) {
/* narrow screens: reduce margin for blockquotes a lot, using /* narrow screens: reduce margin for blockquotes a lot, using
* a thick left-side border instead. */ * a thick left-side border instead. */
blockquote { blockquote {
border-left: 6px solid #bbb; border-inline-start: 6px solid #bbb;
margin-left: 0; margin: 0;
padding-left: 0.75em; 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. */ /* narrow screens: remove unused figure margin. */
@ -77,22 +88,13 @@ nav li,
* rendering bullet points as unnecessary extra visual noise. Pretty * rendering bullet points as unnecessary extra visual noise. Pretty
* much the only purely-aesthetic change in this CSS file. */ * much the only purely-aesthetic change in this CSS file. */
.unstyled-list { .unstyled-list {
padding-left: 0; padding: 0;
} }
.unstyled-list li { .unstyled-list li {
list-style-type: none; 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 /* browsers make monospace small and unreadable for some dumb legacy
* reason and this somehow fixes that without overriding the user's * reason and this somehow fixes that without overriding the user's
* font size preferences. */ * font size preferences. */
@ -119,18 +121,15 @@ kbd {
/* Narrow screens: allow horizontal scroll in a pre block. */ /* Narrow screens: allow horizontal scroll in a pre block. */
pre { pre {
/* csslint ignore:start */
overflow: auto; overflow: auto;
/* csslint ignore:end */
padding: 0.5em; padding: 0.5em;
} }
/* Distinguish images from the background in case their color is /* Distinguish images from the background in case their color is
* too similar to the page background color. Also put a border around * 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 * <pre> and <code> to distinguish them in ways besides font-family. The
* borders in place of background colors for distinguishing elements * use of borders in place of background colors for distinguishing
* is an officially documented WCAG technique. */ * elements is an officially documented WCAG technique. */
img, img,
pre, pre,
:not(pre) > code { :not(pre) > code {