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:
parent
062c348d4e
commit
811c887755
3 changed files with 61 additions and 39 deletions
|
@ -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
|
||||||
|
|
|
@ -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> <span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a>
|
<span itemprop="givenName" class="p-given-name given-name">Rohan</span> <span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue