mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-12-24 01:42:10 +00:00
Use content-visiblity for archive pages
The JS-free infinite scroll that doesn't make you lose your place.
This commit is contained in:
parent
54c8394a93
commit
ae8eb64a58
3 changed files with 37 additions and 8 deletions
|
@ -8,11 +8,14 @@
|
|||
* them pill-shaped, and I tweaked some margins/paddings to make some
|
||||
* things evenly aligned.
|
||||
*
|
||||
* I also don't use any classes except to optimize embedded content.
|
||||
* (e.g. to specify that an image should have pixelated rendering or be
|
||||
* inverted in dark mode). One exception: a class for narrow width body
|
||||
* text. My HTML contains microformats2 classnames for IndieWeb parsers,
|
||||
* but I don't actually use those for styling.
|
||||
* I also don't use any classes except when styling depends on
|
||||
* *content* of an element rather than structure/semantics. Examples
|
||||
* include images that look better with pixelated upscaling, and
|
||||
* posts on the list of entries in the "notes" section that are tall
|
||||
* and need a larger contain-intrinsic-size.
|
||||
* One exception: a class for narrow width body text. My HTML contains
|
||||
* microformats2 classnames for IndieWeb parsers, but I don't actually
|
||||
* use those for styling.
|
||||
*
|
||||
* To keep myself from caring about minute details, I limited myself to
|
||||
* only defining spacing in increments of .25em. Pixels are 1px or
|
||||
|
@ -105,6 +108,22 @@ html {
|
|||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
/* Archive pages can get long. Allow them to get long without slowing
|
||||
* down the browser by using content-visibility. */
|
||||
li article {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 16em;
|
||||
}
|
||||
|
||||
/* Notes can get a bit long. */
|
||||
li article[itemtype="https://schema.org/SocialMediaPosting"] {
|
||||
contain-intrinsic-size: 36em;
|
||||
}
|
||||
|
||||
.tall {
|
||||
contain-intrinsic-size: 50em;
|
||||
}
|
||||
|
||||
summary {
|
||||
/* It's not obvious that a <summary> has button semantics.
|
||||
* "cursor: pointer" is used on MDN, web.dev, GitHub, gov.uk, and
|
||||
|
@ -472,10 +491,9 @@ form :focus {
|
|||
}
|
||||
|
||||
/* Remove :focus styling for browsers that do support :focus-visible.
|
||||
* Leave it on for form stuff. */
|
||||
* Leave it on for elements that are supposed to show focus on click. */
|
||||
@supports selector(:focus-visible) {
|
||||
a:focus:not(:focus-visible),
|
||||
summary:focus:not(:focus-visible),
|
||||
pre[tabindex]:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
@ -9,8 +9,15 @@
|
|||
{{- $pages := (where site.RegularPages "Section" .Section) -}}
|
||||
{{- range $pages -}}
|
||||
{{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" -}}
|
||||
{{- $isTall := and (eq .Section "notes") (gt .WordCount 200) -}}
|
||||
{{- $itemtype := "SocialMediaPosting" -}}
|
||||
{{- if eq .Section "posts" -}}
|
||||
{{- $itemtype = "BlogPosting" -}}
|
||||
{{- end -}}
|
||||
<li itemprop="dataFeedElement" itemscope="" itemtype="https://schema.org/DataFeedItem">
|
||||
<article class="h-entry hentry" itemprop="item" itemscope="" itemtype="https://schema.org/SocialMediaPosting" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
|
||||
<article
|
||||
class="h-entry hentry{{ with $isTall }} tall{{ end }}"
|
||||
itemprop="item" itemscope="" itemtype="https://schema.org/{{ $itemtype }}" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
|
||||
<h2 itemprop="name headline" class="p-name entry-title">
|
||||
<a href="{{ .Permalink }}" itemprop="url" class="u-url url" rel="bookmark">
|
||||
{{ .Title }}
|
||||
|
|
|
@ -14,6 +14,10 @@
|
|||
and (.extract | test(" name=\"theme-color\""))
|
||||
)
|
||||
or
|
||||
( # see https://github.com/w3c/css-validator/issues/369
|
||||
.message == "CSS: “contain-intrinsic-size”: Property “contain-intrinsic-size” doesn't exist."
|
||||
)
|
||||
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