Stylesheet: better print theme, simpler dark theme

- Better print stylesheet, now with a file dedicated just for print
  style improvements.
- Hide extra stuff in print.
- Bring back navbar for print because it also tells users the current
  section and the site name.
- Dark theme: make superscripts bold instead of using a higher-contrast
  color.

assets/css/dark.css

@@ -1,13 +1,17 @@
+/* The dark stylesheet is the only place we set custom colors besides
+ * border colors for inline text. Make sure the perceptual contrast
+ * stays within the ideal APCA ranges, not lower and preferably not
+ * higher either. */
 @media (prefers-color-scheme: dark) {
-	/* I've been told that pure white on black is a bit harsh */
 	html {
-		color: #e9e9e9;
+		/* Pure white on black causes halation.
-	}
+		 * "background" is short for a bunch of unnecessary CSS rules
-
-	html {
-		/* "background" is short for a bunch of unnecessary CSS rules
 		 * background-color is all I need */
 		background-color: #111;
+		/* 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;
 	}
 
 	/* Only color <a> if it's a link; if href is empty, let it be. */
@@ -20,20 +24,7 @@
 	}
 
 	a:visited {
-		color: #ffd6ff;
+		color: #fdf;
-	}
-
-	sup a:link {
-		color: #f3f0cb;
-	}
-
-	sup a:visited {
-		color: #ffdfff;
-	}
-
-	:not(pre) > code,
-	:not(pre) > samp {
-		border-color: #555;
 	}
 
 	/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */

assets/css/main.css

@@ -2,9 +2,9 @@
  * Nothing here exists purely for aesthetics except the unstyled-list;
  * everything else addresses a specific a11y, compatibility, or critical
  * usability need.
- * I also don't use any classes besides unstyled-list and pixelated. My
+ * I also don't use any classes besides "unstyled-list" and "pix". My
  * HTML contains microformats2 classnames for IndieWeb parsers, but I
- * don't actually use those. */
+ * don't actually use those for styling. */
 
 html {
 	/* Mobile screens benefit from greater line-spacing so links are
@@ -12,18 +12,11 @@ html {
 	 * <100dpi screens: sans-serif is better. Why did browsers settle
 	 * on serif being the default?? */
 	font: 100%/1.5 sans-serif;
-
-	/* Aligning to the center with space on both sides prevents accidental
-	* link activation on mobile devices. */
-	margin: auto;
 }
 
-/* WCAG recommends a max line width. Not everyone can resize the
+/* This should not take effect on printouts, to save paper. */
- * viewport.
- * This should not take effect on printouts, to save paper. */
 @media screen {
-	/* 45em is the lowest reasonable width for titles, nav, footers, etc */
+	body {
-	html {
 		/* Default font sizes are one-size-fits-all; they're optimized for a
 		 * wide variety of complex pages. For single-column websites like
 		 * mine, it's ideal to bump it up ever so slightly. This also makes
@@ -33,6 +26,13 @@ html {
 		 * and cost paper + ink. */
 		font-size: 105%;
 
+		/* Aligning to the center with space on both sides prevents accidental
+		* link activation on tablets. */
+		margin: auto;
+
+		/* WCAG recommends a max line width. Not everyone can resize the
+		 * viewport.
+		 * 45em is the lowest reasonable width for titles, nav, footers, etc */
 		max-width: 45em;
 		padding: 0 2%;
 	}
@@ -44,6 +44,15 @@ html {
 	}
 }
 
+/* Small text is easier to read when slightly bolder.
+ * This is important in the dark theme where I set my own colors and
+ * try to maintain good perceptual contrast even for small text, but
+ * I don't want toggling the theme to impact anything besides color so
+ * I set the weight here. */
+sup {
+	font-weight: 600;
+}
+
 /* narrow screens: reduce margin for blockquotes a lot, using
  * a thick left-side border instead. */
 blockquote {
@@ -68,8 +77,8 @@ dd {
 
 ol ol,
 ul ul {
-	padding-left: 1em;
 	hyphens: auto;
+	padding-left: 1em;
 }
 
 /* Narrow screens: allow hyphenating titles
@@ -100,15 +109,6 @@ h1 {
 	}
 }
 
-/* Print: anchor links and nav are useless in printouts. Hide them. */
-@media print {
-	a[aria-hidden],
-	header nav,
-	footer nav {
-		display: none;
-	}
-}
-
 /* <kbd> should be distinguished from <code> and surrounding text
  * in a way beyond font-face; at least two visual distinctions needed */
 kbd {
@@ -121,7 +121,6 @@ kbd {
  * be some extra space. */
 figure {
 	margin: 1.5em 0;
-	page-break-inside: avoid;
 }
 
 /* figcaptions should be distinct from surrounding paragraphs tho */
@@ -188,14 +187,15 @@ pre,
 	border: 1px solid;
 }
 
-.pix {
-	image-rendering: pixelated;
-}
-
 /* A black border is too harsh. */
 :not(pre) > code,
 :not(pre) > samp {
-	border-color: #aaa;
+	border-color: #999;
+}
+
+/* Some images look blurry when scaled */
+.pix {
+	image-rendering: pixelated;
 }
 
 /* center images that aren't my indieweb icon; same justification as
@@ -227,14 +227,16 @@ div[role="doc-endnotes"] {
 
 /* For browsers that don't support :focus-visible */
 a:focus,
-[tabindex]:focus {
+summary:focus,
+pre[tabindex]:focus {
 	outline: 3px solid;
 }
 
 /* Remove :focus styling for browsers that do support :focus-visible */
 @supports selector(:focus-visible) {
 	a:focus:not(:focus-visible),
-	[tabindex]:focus:not(:focus-visible) {
+	summary:focus:not(:focus-visible),
+	pre[tabindex]:focus:not(:focus-visible) {
 		outline: none;
 	}
 }

assets/css/print.css

@@ -0,0 +1,24 @@
+/* Print stylesheet: hide stuff that we don't need. */
+@media print {
+	/* Currently only used for transcripts */
+	details,
+	/* Currently only used for anchors */
+	span[aria-hidden],
+  /* You can't navigate in a printout. */
+	footer nav {
+		display: none;
+	}
+}
+
+/* Print: don't orphan headings */
+h2,
+h3,
+h4 {
+	break-after: avoid;
+}
+
+figure,
+article article,
+div[role="doc-endnotes"] ol li {
+	break-inside: avoid;
+}

layouts/partials/head.html

@@ -41,6 +41,7 @@
 {{- if not (eq $dark "off") -}}
 {{ $resources = $resources | append (resources.Get "css/dark.css" | resources.ExecuteAsTemplate "dark.css" .) -}}
 {{- end -}}
+{{ $resources = $resources | append (resources.Get "css/print.css" | resources.ExecuteAsTemplate "print.css" .) -}}
 {{- $css := $resources | resources.Concat "css/style.css" | minify -}}
 <style>{{ $css.Content | safeCSS }}</style>
 <meta property="og:title" content="{{ .Title }}">