fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12: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, h3,
li article, li article,
summary, summary,
aside > a,
[role="doc-backlink"], [role="doc-backlink"],
[role="doc-endnotes"] { [role="doc-endnotes"] {
content-visibility: auto; content-visibility: auto;
@ -192,6 +191,7 @@ html {
article, article,
body, body,
dt, dt,
dd,
h1, h1,
h2, h2,
h3, h3,
@ -199,6 +199,7 @@ html {
main, main,
pre, pre,
summary, summary,
dl > div,
:not(nav) > ol, :not(nav) > ol,
[role="doc-endnotes"], [role="doc-endnotes"],
[role="doc-preface"] { [role="doc-preface"] {
@ -254,9 +255,13 @@ html {
} }
/* <dt> should not be closer to the previous <dd> than the following <dd>. /* <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 { dd {
padding-bottom: .25em; margin: 0;
padding: .25em .25em .5em 1.75em;
contain: inline-size layout paint;
} }
aside > a, aside > a,
@ -265,6 +270,14 @@ html {
margin: -.75em -.25em; margin: -.75em -.25em;
} }
h2 + aside[role="none"] {
contain: strict;
content-visibility: auto;
height: 1.75em;
margin: -1em -.5em;
padding: 1em .5em;
}
header > nav, header > nav,
a[href="#h1"], /* skip link */ a[href="#h1"], /* skip link */
.u-comment dd > a , .u-comment dd > a ,
@ -312,9 +325,12 @@ html {
padding: .75em 0 .25em; 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 { dt + dt {
padding-top: .25em; padding-top: .75em;
margin-top: -.75em;
} }
dt + dt > a { dt + dt > a {
padding-top: 0; padding-top: 0;
@ -335,7 +351,6 @@ html {
display: inline-block; display: inline-block;
padding: .75em .5em; padding: .75em .5em;
margin-top: -1em; margin-top: -1em;
min-width: 25%;
} }
/* skip link: make it invisible until focused, and put it on the top. */ /* 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 * some spacing (partial SC 2.5.5). There should be non-interactive
* space to the left that's safe to tap. * space to the left that's safe to tap.
* 1.75em is the minimum required for ol numbers to fit. */ * 1.75em is the minimum required for ol numbers to fit. */
dd,
ol, ol,
ul { ul {
margin: 0; margin: 0;
@ -456,6 +470,12 @@ h1 {
hr { hr {
margin: .25em 0; 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 /* <kbd> should be distinguished from <code> and surrounding text