1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-24 01:42:10 +00:00

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.
This commit is contained in:
Rohan Kumar 2022-06-06 21:42:32 -07:00
parent 430adb99a9
commit 3c914b4dd1
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 16 additions and 2 deletions

View file

@ -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;
}

View file

@ -1408,7 +1408,7 @@ These are the tools I use regularly. I've deliberately excluded tools that would
[Chrom&shy;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/)

View file

@ -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 -}}