mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-12-24 01:42:10 +00:00
Prevent breadcrumbs from overflowing containment
CSS containmnet crops breadcrumb focus indicators when they overflow their containers. Instead of adding a new rule for this, refactor some old rules so padding-increases also apply to the breadcrumb containers.
This commit is contained in:
parent
757ded026c
commit
a471edcdf0
2 changed files with 6 additions and 5 deletions
|
@ -119,7 +119,7 @@ html {
|
|||
/* Make superscripts a bit easier to tap. */
|
||||
sup > a {
|
||||
margin-left: .25em;
|
||||
padding-bottom: .25em;
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
|
||||
/* SC 2.5.5, Google a11y: Increase tap target size a bit
|
||||
|
@ -161,6 +161,7 @@ html {
|
|||
margin: -.75em -.25em;
|
||||
}
|
||||
|
||||
header > nav,
|
||||
a[href="#h1"], /* skip link */
|
||||
div[itemprop="comment"] dd > a ,
|
||||
footer > nav,
|
||||
|
@ -174,10 +175,10 @@ html {
|
|||
}
|
||||
|
||||
/* The nav has to be distant-enough from the top to make room for a
|
||||
* skip-link. */
|
||||
* skip-link. The breadcrumbs also can't have their focus-outlines
|
||||
* overflow while CSS containment is enabled. */
|
||||
header > nav {
|
||||
margin: .75em 0 0 -.25em;
|
||||
display: block;
|
||||
padding: .75em 0 .25em;
|
||||
}
|
||||
|
||||
/* Multiple consecutive <dt> that share a <dd> shouldn't have tap targets overlap */
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
/* Hide screen-only content */
|
||||
header a[href="#main"], /* Skip link */
|
||||
a[href="#h1"], /* Skip link */
|
||||
aside:not([role="note"]),
|
||||
/* An un-opened summary inside an article has no use in print.
|
||||
* Outside an article it's used in my webring list where it has some
|
||||
|
|
Loading…
Reference in a new issue