mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Styles: more containment, fix spacing
This commit is contained in:
parent
9ae1c8636e
commit
5df229bfc8
5 changed files with 114 additions and 22 deletions
|
@ -101,7 +101,7 @@ html {
|
|||
/* We increase the target size of h2/h3 links in a way that would cause
|
||||
* issues with content containment */
|
||||
article > :not(h2):not(h3) {
|
||||
contain: content;
|
||||
contain: inline-size layout paint style;
|
||||
/* Add padding on both sides so that focus outlines don't escape their
|
||||
* containers. This will let us enable CSS containment without
|
||||
* clipping overflowing elements. */
|
||||
|
@ -115,8 +115,18 @@ html {
|
|||
|
||||
/* Archive pages can get long. Allow them to get long without slowing
|
||||
* down the browser by using content-visibility. */
|
||||
aside > a,
|
||||
footer,
|
||||
dt,
|
||||
a[role="doc-backlink"],
|
||||
section[role="doc-endnotes"],
|
||||
li article {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 3em;
|
||||
}
|
||||
|
||||
footer,
|
||||
li article {
|
||||
contain-intrinsic-size: auto 16em;
|
||||
}
|
||||
|
||||
|
@ -125,7 +135,8 @@ html {
|
|||
contain-intrinsic-size: auto 36em;
|
||||
}
|
||||
|
||||
.tall {
|
||||
.tall,
|
||||
section[role="doc-endnotes"] {
|
||||
contain-intrinsic-size: auto 50em;
|
||||
}
|
||||
|
||||
|
@ -136,6 +147,22 @@ html {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Full-width elements (e.g. display: block) have known widths, so
|
||||
* contain their widths. */
|
||||
article,
|
||||
h1,
|
||||
pre,
|
||||
dt,
|
||||
summary {
|
||||
contain: inline-size layout paint style;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
contain: inline-size layout style;
|
||||
}
|
||||
|
||||
/* If we have a list of disclosure widgets, we need some
|
||||
* non-interactive space on the screen that's safe to tap. */
|
||||
form,
|
||||
|
@ -143,12 +170,6 @@ html {
|
|||
margin: .5em 0;
|
||||
}
|
||||
|
||||
/* Make superscripts a bit easier to tap. */
|
||||
sup > a {
|
||||
margin-left: .25em;
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
|
||||
/* SC 2.5.5, Google a11y: Increase tap target size a bit
|
||||
* - Summary is a tappable button
|
||||
* - standalone links in lists are usually parts of collections of
|
||||
|
@ -172,9 +193,12 @@ html {
|
|||
* 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. */
|
||||
* should take up as much space. Also: since it got
|
||||
* content-visibility: auto previously, give it an intrinsic size. */
|
||||
dt {
|
||||
margin: .75em 0;
|
||||
padding: 1em .5em;
|
||||
margin: -.25em 0 -.25em -.5em;
|
||||
contain-intrinsic-size: auto 1.5em;
|
||||
}
|
||||
|
||||
/* <dt> should not be closer to the previous <dd> than the following <dd>.
|
||||
|
@ -203,8 +227,10 @@ html {
|
|||
}
|
||||
|
||||
/* Increase tap-target size of title links. */
|
||||
|
||||
h2 > a,
|
||||
h3 > a {
|
||||
contain: content;
|
||||
display: inline-block;
|
||||
padding: .5em .25em;
|
||||
}
|
||||
|
@ -223,6 +249,9 @@ html {
|
|||
}
|
||||
|
||||
/* Multiple consecutive <dt> that share a <dd> shouldn't have tap targets overlap */
|
||||
dt + dt {
|
||||
padding-top: .25em;
|
||||
}
|
||||
dt + dt > a {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
@ -234,6 +263,7 @@ html {
|
|||
|
||||
/* Increase backlink tap target size to at least 48x48 */
|
||||
a[role="doc-backlink"] {
|
||||
contain: content;
|
||||
display: inline-block;
|
||||
margin-left: -.5em;
|
||||
padding: .75em .5em;
|
||||
|
@ -251,6 +281,22 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
/* Make superscripts a bit easier to tap, and prevent consecutive
|
||||
* superscripts from touching. */
|
||||
sup > a {
|
||||
margin-left: .25em;
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
|
||||
/* Make superscript font size a bit larger so they cross some APCA color
|
||||
* contrast thresholds on the dark theme. Also prevent them from messing
|
||||
* with line-height. */
|
||||
sup {
|
||||
font-size: 0.9em;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
|
||||
/* narrow screens: reduce list indentation, hyphenate nested lists
|
||||
* touch screens: lists of links should be easy to tap so give them
|
||||
* some spacing (partial SC 2.5.5). There should be non-interactive
|
||||
|
@ -284,12 +330,13 @@ nav ul {
|
|||
nav[itemprop="breadcrumb"] ol,
|
||||
nav[itemprop="breadcrumb"] li,
|
||||
nav[itemprop="breadcrumb"] > span,
|
||||
nav ul li {
|
||||
nav ul li,
|
||||
dt > a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav[itemprop="breadcrumb"] ol {
|
||||
margin: -.25em 0;
|
||||
margin: -.25em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
@ -321,6 +368,16 @@ h1 {
|
|||
hyphens: auto;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
li > a,
|
||||
nav[itemprop="breadcrumb"] a,
|
||||
nav[itemprop="breadcrumb"] > span {
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: .25em 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* <kbd> should be distinguished from <code> and surrounding text
|
||||
|
@ -396,7 +453,6 @@ span[itemtype="https://schema.org/Person"] {
|
|||
|
||||
/* Narrow screens: allow horizontal scroll in a pre block. */
|
||||
pre {
|
||||
contain: content;
|
||||
overflow: auto;
|
||||
padding: .5em;
|
||||
}
|
||||
|
|
|
@ -8,19 +8,19 @@
|
|||
|
||||
/* Hide screen-only content */
|
||||
a[href="#h1"], /* Skip link */
|
||||
a[role="doc-backlink"], /* can't navigate back on print. */
|
||||
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
|
||||
* use, see below. */
|
||||
article summary,
|
||||
section[aria-labelledby="webmentions"],
|
||||
/* You can't navigate in a printout. */
|
||||
/* You can't navigate across the site in a printout. */
|
||||
footer,
|
||||
/* splitting up sections with <hr> is unnecesary if those
|
||||
* sections are removed */
|
||||
body > hr,
|
||||
nav a:not([rel="home"]) span,
|
||||
nav[itemprop="breadcrumb"] {
|
||||
nav:not([itemprop="breadcrumb"]) a:not([rel="home"]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@ -28,6 +28,7 @@
|
|||
/* Print: don't break up self-contained items. */
|
||||
figure,
|
||||
section[itemprop="mentions"],
|
||||
blockquote,
|
||||
li {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<hr />
|
||||
<nav aria-labelledby="bc-label"
|
||||
itemscope="" itemprop="breadcrumb" itemtype="https://schema.org/BreadcrumbList">
|
||||
<span id="bc-label">You are here:</span>
|
||||
<span id="bc-label">You are here: </span>
|
||||
<ol>
|
||||
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
|
||||
</ol>
|
||||
|
|
|
@ -15,16 +15,26 @@
|
|||
"hints": {
|
||||
"apple-touch-icons": "off",
|
||||
"axe/aria": "off",
|
||||
"axe/color": "off",
|
||||
"axe/forms": "off",
|
||||
"axe/keyboard": "off",
|
||||
"axe/language": "off",
|
||||
"axe/name-role-value": "off",
|
||||
"axe/semantics": "off",
|
||||
"axe/sensory-and-visual-cues": "off",
|
||||
"axe/structure": "off",
|
||||
"axe/tables": "off",
|
||||
"axe/text-alternatives": "off",
|
||||
"axe/time-and-media": "off",
|
||||
"compat-api/css": [
|
||||
"error",
|
||||
{
|
||||
"ignore": [
|
||||
"filter",
|
||||
"contain",
|
||||
"image-rendering: pixelated",
|
||||
"contain-intrinsic-size",
|
||||
"content-visibility",
|
||||
"text-size-adjust"
|
||||
"content-visibility: auto",
|
||||
"image-rendering: pixelated",
|
||||
"text-size-adjust: none"
|
||||
]
|
||||
}
|
||||
],
|
||||
|
@ -54,16 +64,27 @@
|
|||
],
|
||||
"http-compression": "off",
|
||||
"https-only": "error",
|
||||
"sri": "error",
|
||||
"manifest-exists": "error",
|
||||
"manifest-file-extension": "error",
|
||||
"manifest-is-valid": "error",
|
||||
"manifest-app-name": "error",
|
||||
"minified-js": "off",
|
||||
"meta-viewport": "error",
|
||||
"no-bom": "error",
|
||||
"no-p3p": "error",
|
||||
"no-protocol-relative-urls": "error",
|
||||
"no-friendly-error-pages": "error",
|
||||
"no-vulnerable-javascript-libraries": "off",
|
||||
"html-checker": "off",
|
||||
"image-optimization-cloudinary": "off",
|
||||
"no-disallowed-headers": "error",
|
||||
"meta-charset-utf-8": "error",
|
||||
"disown-opener": "error",
|
||||
"content-type": ["error", {
|
||||
".*\\.svg": "image/svg+xml"
|
||||
}],
|
||||
"no-html-only-headers": [ "warning",
|
||||
"no-html-only-headers": [ "error",
|
||||
{
|
||||
"ignore": ["content-security-policy"]
|
||||
}],
|
||||
|
@ -74,6 +95,16 @@
|
|||
"loadTime": 10
|
||||
}
|
||||
],
|
||||
"css-prefix-order": "error",
|
||||
"scoped-svg-styles": "error",
|
||||
"button-type": "error",
|
||||
"strict-transport-security": "error",
|
||||
"x-content-type-options": "error",
|
||||
"typescript-config/is-valid": "off",
|
||||
"typescript-config/no-comment": "off",
|
||||
"typescript-config/target": "off",
|
||||
"typescript-config/strict": "off",
|
||||
"typescript-config/import-helpers": "off",
|
||||
"stylesheet-limits": [
|
||||
"error",
|
||||
{
|
||||
|
|
|
@ -18,6 +18,10 @@
|
|||
.message == "CSS: “contain-intrinsic-size”: Property “contain-intrinsic-size” doesn't exist."
|
||||
)
|
||||
or
|
||||
( # see https://github.com/w3c/css-validator/issues/370
|
||||
.message == "CSS: “contain”: “inline-size” is not a “contain” value."
|
||||
)
|
||||
or
|
||||
( # the search page has raw templates, let those slide. I validate the final dynamic search page manually.
|
||||
.url | test ("/search/index.")
|
||||
)
|
||||
|
|
Loading…
Reference in a new issue