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

CSS overhaul: non-overlapping outlines

I increased a bunch of tap targets to fit the recommended 48x48 sizes
and 56x56 non-overlapping regions, but unfortunately this caused
outlines to overlap with each other. This commit turns these elements
into inline-block elements and makes the necessary fixes to accomodate
this change.
This commit is contained in:
Rohan Kumar 2022-06-03 15:47:14 -07:00
parent 062c348d4e
commit 811c887755
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 61 additions and 39 deletions

View file

@ -1,4 +1,5 @@
/* CSS that adds the bare minimum for a simple layout. /* CSS that adds the bare minimum for a simple, accessible,
* touch-friendly layout.
* Nothing here exists purely for aesthetics; everything addresses a * Nothing here exists purely for aesthetics; everything addresses a
* specific a11y, compatibility, or critical * specific a11y, compatibility, or critical
* usability need. * usability need.
@ -13,7 +14,7 @@
* don't actually use those for styling. * don't actually use those for styling.
* *
* To keep myself from caring about minute details, I limited myself to * To keep myself from caring about minute details, I limited myself to
* only defining spacing in increments of .125em. Pixels are 1px or * only defining spacing in increments of .25em. Pixels are 1px or
* multiples of 3px. This also improves compression. No more "finding * multiples of 3px. This also improves compression. No more "finding
* the perfect value". * the perfect value".
* *
@ -81,18 +82,6 @@ html {
max-width: 35em; max-width: 35em;
} }
/* Compensate for misalignment and wasted space caused by padding
* and margin adjustments in nav children made to meet SC 2.5.5 */
footer > nav,
header > nav,
dt > a,
h2 + a {
margin-left: -.25em;
}
header > nav {
margin-bottom: -.75em;
}
summary { summary {
/* The tappable region of a <summary> extends across the page. /* The tappable region of a <summary> extends across the page.
* we need to tell users that the full space is interactive. * we need to tell users that the full space is interactive.
@ -111,47 +100,79 @@ html {
margin: .5em 0; margin: .5em 0;
} }
/* Make superscripts a bit easier to tap. */
sup > a {
margin-left: .25em;
padding-bottom: .25em;
}
/* SC 2.5.5, Google a11y: Increase tap target size a bit /* SC 2.5.5, Google a11y: Increase tap target size a bit
* - Summary is a tappable button * - Summary is a tappable button
* - standalone links in lists are usually parts of collections of * - standalone links in lists are usually parts of collections of
* links that should be easy to fat-finger * links that should be easy to fat-finger
* - links that directly follow h2 without being contained in a * - links that directly follow h2 without being contained in a
* paragraph are section permalinks. */ * paragraph are section permalinks. */
dt,
input,
dt > a, dt > a,
summary, summary,
h2 + a, h2 + a,
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 */
/* We've increased the padding for dt > a, but dt without a link
* should take up as much space. */
dt {
margin: .75em 0;
}
dt > a {
margin: -.75em 0 -.75em -.25em;
display: inline-block;
}
header > nav {
margin-bottom: -1em;
}
h2 + a {
margin: -.75em -.25em;
}
footer > nav,
header > nav,
/* List items with direct hyperlink children should only have one hyperlink. */
li > a, li > a,
h2 + a,
nav ol a {
margin-left: -.25em;
display: inline-block;
}
nav li, nav li,
li details li, ol li > a {
input { margin: .25em;
padding: .875em .25em;
} }
/* Make superscripts and backlinks a bit easier to tap. */ div[itemprop="comment"] dd > a {
sup > a { display: inline-block;
padding-bottom: .25em; margin-left: -.25em;
margin-left: .25em; padding: .75em .25em;
} }
/* Increase backlink tap target size */
a[role="doc-backlink"] { a[role="doc-backlink"] {
/* This doesn't take us all the way to WCAG AAA 44px targets, but it's close.*/ padding: 0 1.75em 1.5em .25em;
padding: 0 1.75em 1.625em .25em;
} }
/* Make room for those big backlink buttons so they don't overlap /* Make room for those big backlink buttons so they don't overlap
* with links on the following endnote */ * with links on the following endnote */
section[role="doc-endnotes"] li { section[role="doc-endnotes"] li {
margin-bottom: 2em; margin-bottom: 1.75em;
}
nav li ol {
/* Don't duplicate bottom space: the last list item in the nested
* list and the list item that is the entire nested list will both
* have bottom padding */
margin-bottom: -1em;
/* Prevent nested lists from overlapping */
padding-top: 1em;
} }
} }
@ -163,7 +184,7 @@ dd,
ol, ol,
ul { ul {
margin: 0; margin: 0;
padding-left: 1.625em; padding-left: 1.5em;
} }
ol ol, ol ol,
@ -188,7 +209,7 @@ nav ul {
* pixels between tap targets. */ * pixels between tap targets. */
nav ul li { nav ul li {
display: inline-block; display: inline-block;
margin-right: .375em; margin-right: .5em;
} }
/* narrow screens: reduce margin for blockquotes a lot, using /* narrow screens: reduce margin for blockquotes a lot, using
@ -232,8 +253,8 @@ kbd {
/* <ins> should not be mistaken for hyperlinks. */ /* <ins> should not be mistaken for hyperlinks. */
ins { ins {
text-decoration: none;
font-style: italic; font-style: italic;
text-decoration: none;
} }
/* narrow screens: remove unused figure margins /* narrow screens: remove unused figure margins
@ -304,7 +325,7 @@ pre {
border: 1px solid #999; border: 1px solid #999;
/* borders shouldn't touch text */ /* borders shouldn't touch text */
padding: 0 0.125em; padding: 0 .25em;
} }
/* center standalone images; same justification as /* center standalone images; same justification as

View file

@ -22,7 +22,7 @@
(btw this is all made of <span> cuz it is supposed to be inline) (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"> --><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"> <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" -}} {{ partial "indieweb-icon.html" }}
<span itemprop="name" class="p-name fn n"> <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 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> </span>

View file

@ -32,6 +32,7 @@ sed 7d "$html_file" | xmllint --format --encode UTF-8 --noent - -o "$tmp_file"
| sd '<pre(?: tabindex="0")?>\n\t*<code ' '<pre tabindex="0"><code ' \ | sd '<pre(?: tabindex="0")?>\n\t*<code ' '<pre tabindex="0"><code ' \
| sd '(?:\n)?</code>\n(?:[\t\s]*)?</pre>' '</code></pre>' \ | sd '(?:\n)?</code>\n(?:[\t\s]*)?</pre>' '</code></pre>' \
| sd '</span>.span itemprop="familyName"' '</span> <span itemprop="familyName"' \ | sd '</span>.span itemprop="familyName"' '</span> <span itemprop="familyName"' \
| sd '(<img itemprop="image" class="u-photo photo"[^>]*/>)<span' '$1 <span' \
| sd '([a-z])<(data|time)' '$1 <$2' | sd '([a-z])<(data|time)' '$1 <$2'
} >>"$xhtml_file" } >>"$xhtml_file"