fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 21:02:09 +00:00
Code Issues Projects Releases Wiki Activity

CSS: contain <dl> divs + <dd>, section permalinks

Browse source 
- Apply strict containment to section permalink containers
- Apply strong containment (content + inline-size) to <dl> <div>
  children, <dd>.
- Revert oversized footnote backlinks
This commit is contained in:
Rohan Kumar 2022-08-08 21:37:15 -07:00
parent 21dc952eb2
commit 09ffbc3343
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
1 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
assets/css/main.css
View file

@ -160,7 +160,6 @@ html {
h3,
li article,
summary,
aside > a,
[role="doc-backlink"],
[role="doc-endnotes"] {
content-visibility: auto;
@ -192,6 +191,7 @@ html {
article,
body,
dt,
dd,
h1,
h2,
h3,
@ -199,6 +199,7 @@ html {
main,
pre,
summary,
dl > div,
:not(nav) > ol,
[role="doc-endnotes"],
[role="doc-preface"] {
@ -254,9 +255,13 @@ html {
}
/* <dt> should not be closer to the previous <dd> than the following <dd>.
* That can happen in webmentions. */
* That can happen in webmentions.
* Give <dd> some padding to the right as well, so webmentions
* receiving paint containment don't get clipped. */
dd {
padding-bottom: .25em;
margin: 0;
padding: .25em .25em .5em 1.75em;
contain: inline-size layout paint;
}
aside > a,
@ -265,6 +270,14 @@ html {
margin: -.75em -.25em;
}
h2 + aside[role="none"] {
contain: strict;
content-visibility: auto;
height: 1.75em;
margin: -1em -.5em;
padding: 1em .5em;
}
header > nav,
a[href="#h1"], /* skip link */
.u-comment dd > a ,
@ -312,9 +325,12 @@ html {
padding: .75em 0 .25em;
}
/* Multiple consecutive <dt> that share a <dd> shouldn't have tap targets overlap */
/* Multiple consecutive <dt> that share a <dd> shouldn't have tap targets overlap.
* Due to containment: we need to ensure enough padding to avoid
* overflow but then un-do the padding with a margin. */
dt + dt {
padding-top: .25em;
padding-top: .75em;
margin-top: -.75em;
}
dt + dt > a {
padding-top: 0;
@ -335,7 +351,6 @@ html {
display: inline-block;
padding: .75em .5em;
margin-top: -1em;
min-width: 25%;
}
/* skip link: make it invisible until focused, and put it on the top. */
@ -372,7 +387,6 @@ sup {
* some spacing (partial SC 2.5.5). There should be non-interactive
* space to the left that's safe to tap.
* 1.75em is the minimum required for ol numbers to fit. */
dd,
ol,
ul {
margin: 0;
@ -456,6 +470,12 @@ h1 {
hr {
margin: .25em 0;
}
/* This will line-wrap and take more vertical space; strict containment
* won't work. */
h2 + aside[role="none"] {
contain: inline-size layout paint;
}
}
/* <kbd> should be distinguished from <code> and surrounding text