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
|
/* 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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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: </span>
|
||||||
<ol>
|
<ol>
|
||||||
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
|
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
|
||||||
</ol>
|
</ol>
|
||||||
|
|
|
@ -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",
|
||||||
{
|
{
|
||||||
|
|
|
@ -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.")
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue