1
0
Fork 0
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:
Rohan Kumar 2022-07-24 11:28:23 -07:00
parent 9ae1c8636e
commit 5df229bfc8
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
5 changed files with 114 additions and 22 deletions

View file

@ -101,7 +101,7 @@ html {
/* We increase the target size of h2/h3 links in a way that would cause /* We increase the target size of h2/h3 links in a way that would cause
* issues with content containment */ * issues with content containment */
article > :not(h2):not(h3) { 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 /* Add padding on both sides so that focus outlines don't escape their
* containers. This will let us enable CSS containment without * containers. This will let us enable CSS containment without
* clipping overflowing elements. */ * clipping overflowing elements. */
@ -115,8 +115,18 @@ html {
/* Archive pages can get long. Allow them to get long without slowing /* Archive pages can get long. Allow them to get long without slowing
* down the browser by using content-visibility. */ * down the browser by using content-visibility. */
aside > a,
footer,
dt,
a[role="doc-backlink"],
section[role="doc-endnotes"],
li article { li article {
content-visibility: auto; content-visibility: auto;
contain-intrinsic-size: auto 3em;
}
footer,
li article {
contain-intrinsic-size: auto 16em; contain-intrinsic-size: auto 16em;
} }
@ -125,7 +135,8 @@ html {
contain-intrinsic-size: auto 36em; contain-intrinsic-size: auto 36em;
} }
.tall { .tall,
section[role="doc-endnotes"] {
contain-intrinsic-size: auto 50em; contain-intrinsic-size: auto 50em;
} }
@ -136,6 +147,22 @@ html {
cursor: pointer; 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 /* If we have a list of disclosure widgets, we need some
* non-interactive space on the screen that's safe to tap. */ * non-interactive space on the screen that's safe to tap. */
form, form,
@ -143,12 +170,6 @@ html {
margin: .5em 0; 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 /* SC 2.5.5, Google a11y: Increase tap target size a bit
* - Summary is a tappable button * - Summary is a tappable button
* - standalone links in lists are usually parts of collections of * - standalone links in lists are usually parts of collections of
@ -172,9 +193,12 @@ html {
* Also prevent overlapping outlines on focus */ * Also prevent overlapping outlines on focus */
/* We've increased the padding for dt > a, but dt without a link /* 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 { 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>. /* <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. */ /* Increase tap-target size of title links. */
h2 > a, h2 > a,
h3 > a { h3 > a {
contain: content;
display: inline-block; display: inline-block;
padding: .5em .25em; padding: .5em .25em;
} }
@ -223,6 +249,9 @@ html {
} }
/* 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 */
dt + dt {
padding-top: .25em;
}
dt + dt > a { dt + dt > a {
padding-top: 0; padding-top: 0;
} }
@ -234,6 +263,7 @@ html {
/* Increase backlink tap target size to at least 48x48 */ /* Increase backlink tap target size to at least 48x48 */
a[role="doc-backlink"] { a[role="doc-backlink"] {
contain: content;
display: inline-block; display: inline-block;
margin-left: -.5em; margin-left: -.5em;
padding: .75em .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 /* narrow screens: reduce list indentation, hyphenate nested lists
* touch screens: lists of links should be easy to tap so give them * 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 * 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"] ol,
nav[itemprop="breadcrumb"] li, nav[itemprop="breadcrumb"] li,
nav[itemprop="breadcrumb"] > span, nav[itemprop="breadcrumb"] > span,
nav ul li { nav ul li,
dt > a {
display: inline-block; display: inline-block;
} }
nav[itemprop="breadcrumb"] ol { nav[itemprop="breadcrumb"] ol {
margin: -.25em 0; margin: -.25em;
padding: 0; padding: 0;
} }
@ -321,6 +368,16 @@ h1 {
hyphens: auto; hyphens: auto;
padding: 0 8px; 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 /* <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. */ /* Narrow screens: allow horizontal scroll in a pre block. */
pre { pre {
contain: content;
overflow: auto; overflow: auto;
padding: .5em; padding: .5em;
} }

View file

@ -8,19 +8,19 @@
/* Hide screen-only content */ /* Hide screen-only content */
a[href="#h1"], /* Skip link */ a[href="#h1"], /* Skip link */
a[role="doc-backlink"], /* can't navigate back on print. */
aside:not([role="note"]), aside:not([role="note"]),
/* An un-opened summary inside an article has no use in print. /* 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 * Outside an article it's used in my webring list where it has some
* use, see below. */ * use, see below. */
article summary, article summary,
section[aria-labelledby="webmentions"], section[aria-labelledby="webmentions"],
/* You can't navigate in a printout. */ /* You can't navigate across the site in a printout. */
footer, footer,
/* splitting up sections with <hr> is unnecesary if those /* splitting up sections with <hr> is unnecesary if those
* sections are removed */ * sections are removed */
body > hr, body > hr,
nav a:not([rel="home"]) span, nav:not([itemprop="breadcrumb"]) a:not([rel="home"]) {
nav[itemprop="breadcrumb"] {
display: none; display: none;
} }
} }
@ -28,6 +28,7 @@
/* Print: don't break up self-contained items. */ /* Print: don't break up self-contained items. */
figure, figure,
section[itemprop="mentions"], section[itemprop="mentions"],
blockquote,
li { li {
break-inside: avoid; break-inside: avoid;
} }

View file

@ -3,7 +3,7 @@
<hr /> <hr />
<nav aria-labelledby="bc-label" <nav aria-labelledby="bc-label"
itemscope="" itemprop="breadcrumb" itemtype="https://schema.org/BreadcrumbList"> itemscope="" itemprop="breadcrumb" itemtype="https://schema.org/BreadcrumbList">
<span id="bc-label">You are here:</span> <span id="bc-label">You are here:&#160;</span>
<ol> <ol>
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }} {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
</ol> </ol>

View file

@ -15,16 +15,26 @@
"hints": { "hints": {
"apple-touch-icons": "off", "apple-touch-icons": "off",
"axe/aria": "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": [ "compat-api/css": [
"error", "error",
{ {
"ignore": [ "ignore": [
"filter",
"contain", "contain",
"image-rendering: pixelated",
"contain-intrinsic-size", "contain-intrinsic-size",
"content-visibility", "content-visibility: auto",
"text-size-adjust" "image-rendering: pixelated",
"text-size-adjust: none"
] ]
} }
], ],
@ -54,16 +64,27 @@
], ],
"http-compression": "off", "http-compression": "off",
"https-only": "error", "https-only": "error",
"sri": "error",
"manifest-exists": "error",
"manifest-file-extension": "error", "manifest-file-extension": "error",
"manifest-is-valid": "error", "manifest-is-valid": "error",
"manifest-app-name": "error",
"minified-js": "off",
"meta-viewport": "error", "meta-viewport": "error",
"no-bom": "error", "no-bom": "error",
"no-p3p": "error", "no-p3p": "error",
"no-protocol-relative-urls": "error",
"no-friendly-error-pages": "error",
"no-vulnerable-javascript-libraries": "off",
"html-checker": "off", "html-checker": "off",
"image-optimization-cloudinary": "off",
"no-disallowed-headers": "error",
"meta-charset-utf-8": "error",
"disown-opener": "error",
"content-type": ["error", { "content-type": ["error", {
".*\\.svg": "image/svg+xml" ".*\\.svg": "image/svg+xml"
}], }],
"no-html-only-headers": [ "warning", "no-html-only-headers": [ "error",
{ {
"ignore": ["content-security-policy"] "ignore": ["content-security-policy"]
}], }],
@ -74,6 +95,16 @@
"loadTime": 10 "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": [ "stylesheet-limits": [
"error", "error",
{ {

View file

@ -18,6 +18,10 @@
.message == "CSS: “contain-intrinsic-size”: Property “contain-intrinsic-size” doesn't exist." .message == "CSS: “contain-intrinsic-size”: Property “contain-intrinsic-size” doesn't exist."
) )
or 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. ( # the search page has raw templates, let those slide. I validate the final dynamic search page manually.
.url | test ("/search/index.") .url | test ("/search/index.")
) )