1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-24 01:42:10 +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
* 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;
}

View file

@ -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;
}

View file

@ -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:&#160;</span>
<ol>
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
</ol>

View file

@ -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",
{

View file

@ -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.")
)