From 404d7d85617b7dcb059afaa349bec2c3ffaafbd1 Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Mon, 23 May 2022 08:42:24 -0700
Subject: [PATCH] Improve dark-mode contrast a bit

- Lighten dark background some more
- Replace the black superscript backgrounds with different foreground
  colors.
---
 assets/css/dark.css | 23 +++++++++++------------
 assets/css/main.css | 16 ++++++++++++----
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/assets/css/dark.css b/assets/css/dark.css
index 291e62e..3664490 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -7,18 +7,13 @@
 		/* Pure white on black causes halation.
 		 * "background" is short for a bunch of unnecessary CSS rules
 		 * background-color is all I need */
-		background-color: #111;
+		background-color: #141414;
 		/* Dimming the default text color is not the same as reducing screen
 		 * brightness, since other colors in this stylesheet have brighter
 		 * red and blue channels than the default text. */
 		color: #e9e9e9;
 	}
 
-	/* Small text needs higher contrast */
-	sup {
-		background-color: #000;
-	}
-
 	/* Only color <a> if it's a link; if href is empty, let it be. */
 	a:link {
 		color: #f1e7b2;
@@ -29,17 +24,21 @@
 	}
 
 	a:visited {
-		color: #fdf;
+		color: #ffd9ff;
 	}
 
-	/* Small text needs higher contrast */
-	sup a:visited {
-		color: #ffe3ff;
+	/* Small text needs higher contrast. */
+	@media not (prefers-contrast: less) {
+		sup a:link {
+			color: #feb;
+		}
+
+		sup a:visited {
+			color: #ffe5ff;
+		}
 	}
 
-	/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */
 	@media (prefers-contrast: less) {
-	/* stylelint-enable */
 		html {
 			background-color: #333;
 		}
diff --git a/assets/css/main.css b/assets/css/main.css
index 38b3ede..0ecebb6 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -11,8 +11,8 @@
  *
  * To keep myself from caring about minute details, I limited myself to
  * only defining spacing in increments of .125em. Pixels are 1px or
- * multiples of 3px; percentages are in increments of 2.5%. This also
- * improves compression. No more "finding the perfect value".
+ * multiples of 3px. This also improves compression. No more "finding
+ * the perfect value".
  *
  * I cite WCAG 2.2 success criteria with "SC". I also tried to meet
  * the Google a11y requirement of 48px tap targets separated by atl
@@ -40,8 +40,11 @@ html {
 		 * <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: 107.5%;
+		 * and cost paper + ink.
+		 * 108.75% is the minimum required to get superscripts to reach 14.5
+		 * CSS pixels with most default stylesheets. At that size, my dark
+		 * color palette has sufficient contrast.*/
+		font-size: 108.75%;
 
 		/* Aligning to the center with space on both sides prevents accidental
 		* link activation on tablets, and is a common practice that users are
@@ -127,6 +130,11 @@ html {
 		padding: .875em .25em;
 	}
 
+	/* Make superscripts a bit easier to tap. */
+	sup > a {
+		padding-bottom: .25em;
+	}
+
 	nav li ol {
 		/* Don't duplicate bottom space: the last list item in the nested
 		 * list and the list item that is the entire nested list will both