fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +00:00
Code Issues Projects Releases Wiki Activity

Use content-visiblity for archive pages

Browse source 
The JS-free infinite scroll that doesn't make you lose your place.
This commit is contained in:
Rohan Kumar 2022-07-15 22:04:15 -07:00
parent 54c8394a93
commit ae8eb64a58
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 37 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
assets/css/main.css
View file

@ -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
layouts/_default/list.html
View file

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

4
linter-configs/vnu_filter.jq
View file

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