From d02b7494254b56442909689edfd0d20c924205a5 Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Fri, 5 Aug 2022 07:24:16 -0700
Subject: [PATCH] More stylesheet tweaks

- Increase list padding so that ordered-list decimal markers have space
  to fit without overflowing.
- Improve style for removing underline between h-card name and photo, so
  it doesn't apply to any unnecessary elements.
- Reduce budget for document size.
---
 assets/css/main.css                     | 21 +++++++++++++++------
 layouts/shortcodes/indieweb-author.html |  3 +--
 layouts/shortcodes/indieweb-icon.html   |  8 ++++----
 linter-configs/budget.json              |  2 +-
 scripts/xhtmlize-single-file.sh         |  2 +-
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 93ae901..9eca4f9 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -367,12 +367,13 @@ sup {
 /* narrow screens: reduce list indentation, hyphenate nested lists
  * touch screens: lists of links should be easy to tap so give them
  * some spacing (partial SC 2.5.5). There should be non-interactive
- * space to the left that's safe to tap. */
+ * space to the left that's safe to tap.
+ * 1.75em is the minimum required for ol numbers to fit. */
 dd,
 ol,
 ul {
 	margin: 0;
-	padding-left: 1.5em;
+	padding-left: 1.75em;
 }
 
 blockquote,
@@ -425,8 +426,12 @@ h1 {
 	hyphens: auto;
 }
 
-/* Very narrow screens: full hyphenation.
- * This is the typical width of a smart feature phone. */
+/* Very narrow screens: full hyphenation, compactness
+ * This is the typical width of a smart feature phone, or a browser
+ * sidebar. At this tiny width, users are either unlikely to be using a
+ * touchscreen (KaiOS-like feature phones, desktop browser sidebars) or
+ * they're just reading non-interactively. being compact probably takes
+ * precedence over being touch-friendly. */
 @media (max-width: 272px) {
 	body {
 		font-size: 100%;
@@ -441,6 +446,10 @@ h1 {
 		padding: .25em;
 	}
 
+	dd {
+		padding-left: 1em;
+	}
+
 	hr {
 		margin: .25em 0;
 	}
@@ -565,11 +574,11 @@ summary {
 	vertical-align: -.1em;
 }
 
-.h-card a.u-uid {
+.p-author a.u-uid {
 	text-decoration: none;
 }
 
-a .p-name {
+a .u-photo + .p-name {
 	text-decoration: underline;
 }
 
diff --git a/layouts/shortcodes/indieweb-author.html b/layouts/shortcodes/indieweb-author.html
index b07a02e..cdd2536 100644
--- a/layouts/shortcodes/indieweb-author.html
+++ b/layouts/shortcodes/indieweb-author.html
@@ -22,7 +22,6 @@
 	(btw this is all made of <span> cuz it is supposed to be inline)
 --><span itemprop="author copyrightHolder" itemscope="" itemtype="https://schema.org/Person" itemid="https://seirdy.one/#seirdy" class="h-card p-author author vcard">
 	<a itemprop="url" href="https://seirdy.one/" rel="author me home cc:attributionURL" class="u-url u-uid url" property="cc:attributionName">
-		{{ partial "indieweb-icon.html" }}
-		<span itemprop="name" class="p-name fn n">
+		{{ partial "indieweb-icon.html" -}} <span itemprop="name" class="p-name fn n">
 			<span itemprop="givenName" class="p-given-name given-name">Rohan</span>&#160;<span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a>
 </span>
diff --git a/layouts/shortcodes/indieweb-icon.html b/layouts/shortcodes/indieweb-icon.html
index b33bcf5..32c92a9 100644
--- a/layouts/shortcodes/indieweb-icon.html
+++ b/layouts/shortcodes/indieweb-icon.html
@@ -2,9 +2,9 @@
 {{- $favicon_base64 := $favicon.Content | base64Encode -}}
 {{- $favicon_svg := resources.Get "/favicon.svg" | resources.Fingerprint "md5" -}}
 {{- if in site.BaseURL ".onion" -}}
-<img itemprop="image" class="u-photo photo" width="16" height="16" alt=""
-	src="data:image/png;base64,{{ $favicon_base64 }}" />
+<img itemprop="image" width="16" height="16" alt=""
+	src="data:image/png;base64,{{ $favicon_base64 }}" class="u-photo photo" />
 {{- else -}}
-<img itemprop="image" class="u-photo photo" width="16" height="16" alt=""
-	src="{{ $favicon_svg.Permalink }}" />
+<img itemprop="image" width="16" height="16" alt=""
+	src="{{ $favicon_svg.Permalink }}" class="u-photo photo" />
 {{- end }}
diff --git a/linter-configs/budget.json b/linter-configs/budget.json
index e352361..afba562 100644
--- a/linter-configs/budget.json
+++ b/linter-configs/budget.json
@@ -31,7 +31,7 @@
 			},
 			{
 				"resourceType": "document",
-				"budget": 75
+				"budget": 70
 			},
 			{
 				"resourceType": "image",
diff --git a/scripts/xhtmlize-single-file.sh b/scripts/xhtmlize-single-file.sh
index c9f7ce3..794e643 100644
--- a/scripts/xhtmlize-single-file.sh
+++ b/scripts/xhtmlize-single-file.sh
@@ -35,7 +35,7 @@ sed 7d "$html_file" | xmllint --format --encode UTF-8 --noent - | sd '^\t(?:\t)?
 		| sd '<pre(?: tabindex="0")?>\n\t*<(code|samp)( |>)' '<pre tabindex="0"><$1$2' \
 		| sd '(?:\n)?</(code|samp)>\n(?:[\t\s]*)?</pre>' '</$1></pre>' \
 		| sd '</span>.span itemprop="familyName"' '</span> <span itemprop="familyName"' \
-		| sd '(</picture>|src="[^"]*" ?/>)<span itemprop="name" class="p-name fn n">' '$1 <span itemprop="name" class="p-name fn n">' \
+		| sd -f m 'class="u-photo photo"[^<]*<' 'class="u-photo photo"/> <' \
 		| sd '([a-z])<(data|time)' '$1 <$2' \
 		| sd '</span>(<a[^>]*rel="(?:nofollow ugc|ugc nofollow)"(?:[^>]*)?>liked</a>)' '</span> $1' \
 		| sd -s '/>' ' />'