From 136fa9fa84721c259241ca50030e5d4b60d3b222 Mon Sep 17 00:00:00 2001 From: Zach Dunn Date: Thu, 15 Oct 2026 22:38:10 -0400 Subject: [PATCH] fix(template): hang a sidenote up from its paragraph's end when a wide element follows A sidenote sits in the right margin from its paragraph's last line down, so before a wide figure it ran into the figure's margin, where anatomy figures now draw their margin notes. When the paragraph is followed by a .wide element, anchor the note's bottom to the paragraph's bottom instead. Copied into the example posts and the components page. --- examples/releases-weekly-digests/post-field-notes.html | 2 ++ examples/releases-weekly-digests/post.html | 2 ++ examples/sunny-walkthrough-videos/post.html | 2 ++ examples/uploads-before-after/post.html | 2 ++ skills/buildnotes/assets/components.html | 2 ++ skills/buildnotes/assets/template.html | 2 ++ 6 files changed, 12 insertions(+) diff --git a/examples/releases-weekly-digests/post-field-notes.html b/examples/releases-weekly-digests/post-field-notes.html index 059c9c6..6c56b41 100644 --- a/examples/releases-weekly-digests/post-field-notes.html +++ b/examples/releases-weekly-digests/post-field-notes.html @@ -445,6 +445,8 @@ :has(> .sidenote) { position: relative; } /* inline, so its top sits on the line it ends (an absolute box keeps an inline box's static position) */ .sidenote { display: inline; position: absolute; right: -15rem; width: 12rem; margin: 0; padding: 0; border: 0; } + /* before a wide element, the margin is the element's: hang the note up from the paragraph's last line instead */ + :has(> .sidenote):has(+ .wide) > .sidenote { top: auto; bottom: 0; } } /* finding: what the chapter found, in one sentence a reader would repeat. At most one per chapter. */ diff --git a/examples/releases-weekly-digests/post.html b/examples/releases-weekly-digests/post.html index 3d66e41..11d260a 100644 --- a/examples/releases-weekly-digests/post.html +++ b/examples/releases-weekly-digests/post.html @@ -445,6 +445,8 @@ :has(> .sidenote) { position: relative; } /* inline, so its top sits on the line it ends (an absolute box keeps an inline box's static position) */ .sidenote { display: inline; position: absolute; right: -15rem; width: 12rem; margin: 0; padding: 0; border: 0; } + /* before a wide element, the margin is the element's: hang the note up from the paragraph's last line instead */ + :has(> .sidenote):has(+ .wide) > .sidenote { top: auto; bottom: 0; } } /* finding: what the chapter found, in one sentence a reader would repeat. At most one per chapter. */ diff --git a/examples/sunny-walkthrough-videos/post.html b/examples/sunny-walkthrough-videos/post.html index b50a586..612d1c5 100644 --- a/examples/sunny-walkthrough-videos/post.html +++ b/examples/sunny-walkthrough-videos/post.html @@ -446,6 +446,8 @@ :has(> .sidenote) { position: relative; } /* inline, so its top sits on the line it ends (an absolute box keeps an inline box's static position) */ .sidenote { display: inline; position: absolute; right: -15rem; width: 12rem; margin: 0; padding: 0; border: 0; } + /* before a wide element, the margin is the element's: hang the note up from the paragraph's last line instead */ + :has(> .sidenote):has(+ .wide) > .sidenote { top: auto; bottom: 0; } } /* finding: what the chapter found, in one sentence a reader would repeat. At most one per chapter. */ diff --git a/examples/uploads-before-after/post.html b/examples/uploads-before-after/post.html index c9e7b16..203c132 100644 --- a/examples/uploads-before-after/post.html +++ b/examples/uploads-before-after/post.html @@ -445,6 +445,8 @@ :has(> .sidenote) { position: relative; } /* inline, so its top sits on the line it ends (an absolute box keeps an inline box's static position) */ .sidenote { display: inline; position: absolute; right: -15rem; width: 12rem; margin: 0; padding: 0; border: 0; } + /* before a wide element, the margin is the element's: hang the note up from the paragraph's last line instead */ + :has(> .sidenote):has(+ .wide) > .sidenote { top: auto; bottom: 0; } } /* finding: what the chapter found, in one sentence a reader would repeat. At most one per chapter. */ diff --git a/skills/buildnotes/assets/components.html b/skills/buildnotes/assets/components.html index ccd8a7f..958edcc 100644 --- a/skills/buildnotes/assets/components.html +++ b/skills/buildnotes/assets/components.html @@ -447,6 +447,8 @@ :has(> .sidenote) { position: relative; } /* inline, so its top sits on the line it ends (an absolute box keeps an inline box's static position) */ .sidenote { display: inline; position: absolute; right: -15rem; width: 12rem; margin: 0; padding: 0; border: 0; } + /* before a wide element, the margin is the element's: hang the note up from the paragraph's last line instead */ + :has(> .sidenote):has(+ .wide) > .sidenote { top: auto; bottom: 0; } } /* finding: what the chapter found, in one sentence a reader would repeat. At most one per chapter. */ diff --git a/skills/buildnotes/assets/template.html b/skills/buildnotes/assets/template.html index a95954a..301f3d3 100644 --- a/skills/buildnotes/assets/template.html +++ b/skills/buildnotes/assets/template.html @@ -462,6 +462,8 @@ :has(> .sidenote) { position: relative; } /* inline, so its top sits on the line it ends (an absolute box keeps an inline box's static position) */ .sidenote { display: inline; position: absolute; right: -15rem; width: 12rem; margin: 0; padding: 0; border: 0; } + /* before a wide element, the margin is the element's: hang the note up from the paragraph's last line instead */ + :has(> .sidenote):has(+ .wide) > .sidenote { top: auto; bottom: 0; } } /* finding: what the chapter found, in one sentence a reader would repeat. At most one per chapter. */