Support multiple <dt> that share a <dd>

- Make sure their tap targets do not overlap
- Use a regex to detect them in markup using an "OR" keyword
- Implement them in one article.

assets/css/main.css

@@ -120,6 +120,7 @@ html {
 	li > a {
 		padding: .75em .25em;
 	}
+
 	/* Compensate for misalignment and wasted space caused by padding
 	 * and margin adjustments in nav children made to meet SC 2.5.5 
 	 * Also prevent overlapping outlines on focus */
@@ -153,6 +154,11 @@ html {
 		display: inline-block;
 	}
 
+	/* Multiple consecutive <dt> that share a <dd> shouldn't have tap targets overlap */
+	dt + dt > a {
+		padding-top: 0;
+	}
+
 	nav li,
 	ol li > a {
 		margin: .25em;
@@ -247,6 +253,7 @@ h1 {
  * 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. */
+dt,
 kbd {
 	font-weight: bold;
 }

content/posts/website-best-practices.md

@@ -1408,7 +1408,7 @@ These are the tools I use regularly. I've deliberately excluded tools that would
 [Chrom­ium's CSS Overview](https://developer.chrome.com/docs/devtools/css-overview/)
 : can show some basic accessibility violations, including contrast violations. I recommend enabling the APCA-based contrast algorithm in the DevTools experimental settings first. Note that this uses an earlier version of APCA and does not account for contrast that is too high.
 
-[testssl.sh (cli)](https://testssl.sh/) or [SSL Labs' SSL Server Test (web, proprietary)](https://www.ssllabs.com/ssltest/)
+[testssl.sh (cli)](https://testssl.sh/) OR [SSL Labs' SSL Server Test (web, proprietary)](https://www.ssllabs.com/ssltest/)
 : basically equivalent tools for auditing your TLS setup. I prefer testssl.sh.
 
 [Webbkoll](https://webbkoll.dataskydd.net/)

layouts/partials/processed-content.html

@@ -24,6 +24,13 @@
 </ol>
 </section>` -}}
 
+<!--
+	Sometimes I want multiple described terms for a set of descriptions
+	in a description list
+-->
+{{- $combinedTerm := `<dt>(.*) OR (.*)</dt>` -}}
+{{- $splitTerm := `<dt>$1</dt><dt>$2</dt>` -}}
+
 <!--
 	Descriptive footnote link names, remove unused class, put
 	backlink id in <a> since <a> is focusable, remove unused class.
@@ -56,4 +63,4 @@
 {{- $extraLanguageFigure := `<pre><code class="language-figure">` -}}
 {{- $replacedLanguageFigure := `<pre tabindex="0"><code translate="no" itemprop="text">` -}}
 
-{{- .Content | replaceRE $referencesWithoutHeading $referencesWithHeading | replaceRE $badNoteRef $goodNoteRef | replaceRE $endnotesClosingDiv $endnotesClosingSection | replaceRE $tocHeadingOutside $tocHeadingInside | replaceRE $footnoteBacklinksBad $footnoteBacklinksGood | replaceRE $repeatedFootnoteBacklinksBad $repeatedFootnoteBacklinksGood | replaceRE $endNotesNotFocusable $endNotesFocusable | replaceRE $extraLanguageFigure $replacedLanguageFigure | replaceRE `\&rsquo;` `’` | replaceRE `\&nbsp;` `&#160;` | replaceRE `\&ldquo;` `“` | replaceRE `\&rdquo;` `”` | replaceRE `\&hellip;` `—` | replaceRE `\&mdash;` `—` | replaceRE `\&shy;` `&#173;` | replaceRE `&lsquo;` `‘`| safeHTML -}}
+{{- .Content | replaceRE $referencesWithoutHeading $referencesWithHeading | replaceRE $badNoteRef $goodNoteRef | replaceRE $endnotesClosingDiv $endnotesClosingSection | replaceRE $combinedTerm $splitTerm | replaceRE $tocHeadingOutside $tocHeadingInside | replaceRE $footnoteBacklinksBad $footnoteBacklinksGood | replaceRE $repeatedFootnoteBacklinksBad $repeatedFootnoteBacklinksGood | replaceRE $endNotesNotFocusable $endNotesFocusable | replaceRE $extraLanguageFigure $replacedLanguageFigure | replaceRE `\&rsquo;` `’` | replaceRE `\&nbsp;` `&#160;` | replaceRE `\&ldquo;` `“` | replaceRE `\&rdquo;` `”` | replaceRE `\&hellip;` `—` | replaceRE `\&mdash;` `—` | replaceRE `\&shy;` `&#173;` | replaceRE `&lsquo;` `‘`| safeHTML -}}