1
0
Fork 0
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:
Rohan Kumar 2022-07-15 17:17:59 -07:00
parent 757ded026c
commit a471edcdf0
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 6 additions and 5 deletions

View file

@ -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 */

View file

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