From 46a0e5127b2fd056368be3ab8f313e698fc01b2d Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Mon, 25 Apr 2022 22:11:18 -0700
Subject: [PATCH] CSS: narrow-screen nested lists, border for <samp>

---
 assets/css/dark.css |  3 ++-
 assets/css/main.css | 38 +++++++++++++++++++++++++-------------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/assets/css/dark.css b/assets/css/dark.css
index 95818cb..0861481 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -33,7 +33,8 @@
 		color: #fae4ff;
 	}
 
-	:not(pre) > code {
+	:not(pre) > code,
+	:not(pre) > samp {
 		border-color: #555;
 	}
 
diff --git a/assets/css/main.css b/assets/css/main.css
index 3024f21..e168e8a 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -34,7 +34,7 @@ html {
 		font-size: 106%;
 
 		max-width: 45em;
-		padding: 0 2%;
+		padding: initial 2%;
 	}
 
 	/* 45em is too wide for long body text. */
@@ -49,7 +49,7 @@ html {
 blockquote {
 	border-left: 4px solid;
 	margin: 0;
-	padding-left: 0.8em;
+	padding-left: .8em;
 }
 
 /* narrow screens: reduce list indentation
@@ -66,6 +66,12 @@ dd {
 	margin: 0;
 }
 
+ol ol,
+ul ul {
+	padding-left: 1em;
+	hyphens: auto;
+}
+
 /* Narrow screens: allow hyphenating titles
  * I can't add soft hyphens to these. */
 h1 {
@@ -90,7 +96,7 @@ h1 {
 
 		/* inline-end doesn't work in netsurf. -right should stil make sense
 		 * in RTL machine translation, it'll just look a bit indented. */
-		padding-right: 0.5em;
+		padding-right: .5em;
 	}
 }
 
@@ -110,21 +116,23 @@ kbd {
 }
 
 /* narrow screens: remove unused figure margins
- * print stylesheet: avoid page breaks that split up figures */
+ * print stylesheet: avoid page breaks that split up figures
+ * figure captions shouldn't look like regular paragraphs; there should
+ * be some extra space. */
 figure {
-	margin: 1em 0;
+	margin: 1.5em 0;
 	page-break-inside: avoid;
 }
 
 /* figcaptions should be distinct from surrounding paragraphs tho */
 figure:not([itemtype]) figcaption {
-	margin: 0 10%;
+	margin: initial 10%;
 }
 
 /* Mobile optimization: nav links are tappable with fat fingers */
 nav li,
 .unstyled-list li {
-	margin-bottom: 0.5em;
+	margin-bottom: .5em;
 }
 
 /* Lists without bullets: navlinks, posts lists, webmentions.
@@ -150,10 +158,12 @@ samp {
 
 /* Narrow screens: long words can cause content to flow out of the
  * viewport, triggering horizontal scrolling. Allow breaking words in
- * content I don't control (comments). For content I do control, I just
- * add soft hyphens to the HTML. */
+ * content I don't control (comments, names). For content I do control,
+ * I just add soft hyphens to the HTML. */
 li[itemprop="comment"],
-:not(pre) > code {
+:not(pre) > code,
+:not(pre) > samp,
+span[itemtype="https://schema.org/Person"] {
 	overflow-wrap: break-word;
 
 	/* borders shouldn't touch text */
@@ -163,7 +173,7 @@ li[itemprop="comment"],
 /* Narrow screens: allow horizontal scroll in a pre block. */
 pre {
 	overflow: auto;
-	padding: 0.5em;
+	padding: .5em;
 }
 
 /* Distinguish images from the background in case their color is
@@ -173,12 +183,14 @@ pre {
  * elements is an officially documented WCAG technique. */
 img,
 pre,
-:not(pre) > code {
+:not(pre) > code,
+:not(pre) > samp {
 	border: 1px solid;
 }
 
 /* A black border is too harsh. */
-:not(pre) > code {
+:not(pre) > code,
+:not(pre) > samp {
 	border-color: #aaa;
 }