From 02b1a8421ef15f3733a2ed253fc655f64a27698f Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Wed, 30 Mar 2022 17:44:39 -0700
Subject: [PATCH] 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.
---
 assets/css/dark.css |  8 ++++++++
 assets/css/main.css | 43 +++++++++++++++++++++----------------------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/assets/css/dark.css b/assets/css/dark.css
index ff79d0c..1be9114 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -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;
+		}
+	}
 }
diff --git a/assets/css/main.css b/assets/css/main.css
index 0ee8853..2f6b232 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -53,12 +53,23 @@ html {
 	}
 }
 
-/* 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;
+@supports (border-inline-start: 6px) {
+	/* narrow screens: reduce margin for blockquotes a lot, using
+	 * a thick left-side border instead. */
+	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 {