Commit fe19d8d h

Pat Ambrosio · 26-08-25 16:58

Align page title with its sidebar and body by construction

Changes: 2 files +253 -214

Changes (Side-by-Side)

Raw

commit fe19d8dd4a117280d77ecf20504aea1fcf1dd05b
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Tue Aug 25 16:58:09 2026 +0800

    Align page title with its sidebar and body by construction
    
    The page layout put the sidebar in an absolutely positioned box pushed
    down by a measured 41.6px, and indented the body by a hardcoded 6.82rem
    copied from the post layout. Both numbers described a arrangement that no
    longer existed once the back arrow was removed from pages, and both had
    to be re-measured whenever anything above them changed.
    
    The sidebar and the body are now two cells of one table row -- the same
    mechanism post.sh uses to hold a stamp beside a title. Their tops line up
    because they share a row, not because of an offset, so nothing needs
    maintaining when the heading changes height.
    
    The body indent is likewise a mechanism rather than a number. A post is
    indented by the back arrow sitting inline before the contents, so the two
    reflow together as the screen narrows. A page has no arrow, so it reserves
    the same column with a spacer of the same size. The copied 6.82rem had
    matched only at wide widths: at 735px it put the page body 97px left of
    the post's.
    
    The heading gets the same spacer. On a post the stamp holds the left
    column and the title starts where the body does; a page had no stamp, so
    its title sat at the far left while its own body was indented past it.
    
    Also: a sidebar now widens the article rather than eating into its 74ch,
    which had left the body 537px against a post's 540; the nav column takes
    a min-width so it stays 6rem instead of shrinking to its longest label;
    and the narrow breakpoint collapses the whole table together, since a lone
    cell reverting to block keeps its column via an anonymous table wrapper.
    
    Verified by measuring rendered geometry at 320-1920px: the body column is
    identical to a post's in width and offset at every width, and title and
    first nav item share a y-coordinate wherever they share a row.
    
    Tests: the sidebar suite asserted CSS literals -- "width: 16em",
    "position: absolute", "align-items: center" -- and passed against layouts
    that were visibly broken; "position: absolute" matched the theme toggle
    elsewhere in the file and never looked at the nav. Rewritten to assert
    structure and mechanism, and checked by mutation: seven mutations of the
    layout, each caught. The first version of the body-spacer assertion missed
    its mutation because it matched the heading's spacer too, so it is now
    anchored to the body.
    
    The footer suite is removed with the footer it tested. render_footer_nav
    is retained and now exercised directly, so the template-baked nav
    mechanism cannot rot while the default theme renders no footer.
    
    Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01WnSAstgnDYdKPwLGv1YZE5

diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index 2a0cf54..caa3b2d 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -70,6 +70,10 @@ crumbs() {
 # navs/site-footer.tsv does not exist, rendering is silently skipped.
 # This is decided in one place: read_nav with --optional, which returns
 # cleanly if the file does not exist.
+# Not currently called: the default theme renders no footer. Kept because the
+# template-baked nav mechanism it demonstrates is the feature -- a layout can
+# ask for a nav no page declared. Call this, or write your own, to bring one
+# back.
 render_footer_nav() {
   local lines
   lines=$(read_nav "${NAVS_DIR}" "site-footer" --optional) || return 0
@@ -188,6 +192,13 @@ cat << _EOF_
         }
         @media (min-width: 736px) { body { font-size: 16px } }
         article { padding: 0; margin: 1em 0; max-width: 74ch; }
+        /* 74ch is sized for a post: the arrow's column plus a 60ch body. A
+           sidebar is an addition to that, so the article grows by exactly the
+           sidebar's column and gap. Without this the sidebar ate into the
+           74ch and the body came out 537px against a post's 540 -- a
+           difference with no cause the reader could see. Widening here rather
+           than narrowing the body keeps the measure identical everywhere. */
+        article:has(.page-nav) { max-width: calc(74ch + var(--page-nav-width) + var(--page-nav-gap)); }
         article a { color: var(--link-article); }
         article img { max-width: 100% }
         /* Blockquote keeps its left rule; code blocks are a tinted block
@@ -277,23 +288,20 @@ cat << _EOF_
            Width measured from a rendered post: the stamp is inline-block
            beside a table-cell title, so the 2.25em nominal width bears no
            relation to the 109px the pair actually spans. */
-        /* The title aligns with the body's left edge, so it sits above the
-           body rather than orphaned above the sidebar. On pages with a nav,
-           the body starts at --page-content-left. Without a nav, at
-           --page-body-offset. The heading uses the same offset as its
-           sibling .contents. */
-        /* The heading spans the full width and holds two things: the back
-           arrow, which stays in the left column beside the nav, and the
-           title, which lines up with the body it titles. Offsetting the
-           whole heading moved the arrow out of its column with it -- the
-           arrow keeps its own width and the title is pushed by the rest. */
-        .heading-page { display: flex; align-items: baseline; margin-bottom: 1em;
-                        margin-left: 0; }
-        .heading-page .home { flex: 0 0 var(--page-content-left);
-                              margin: 0; text-align: left; }
-        .page-wrapper:not(:has(.page-nav)) .heading-page .home {
-                              flex-basis: var(--page-body-offset); }
+        /* No margin-bottom: post.sh's .heading has none, and the extra 1em put 48px
+           between a page title and its body where a post has none. */
+        /* On a post the stamp holds the left column and the title starts where
+           the body does. A page has no stamp, so without a spacer here the
+           title sat at the far left while its own body was indented past it.
+           The heading reserves the same column the body does, by the same
+           mechanism, so the two line up whatever the width. */
+        .heading-page { display: flex; align-items: baseline; margin-left: 0; }
         .heading-page .title { display: block; margin: 0; flex: 1; }
+        .heading-page .home-spacer { margin-bottom: 0; flex: 0 0 auto; }
+        /* Beside a sidebar the whole cell is already offset, so the heading
+           must not indent again -- the title would land a column right of its
+           own body. */
+        .page-wrapper:has(.page-nav) .heading-page .home-spacer { display: none; }
         .home { display: inline-block; text-align: right; margin-right: 1.5em;
                 width: 5.4em; margin-bottom: 1.5em; text-decoration: none;
                 color: var(--link-home); }
@@ -310,59 +318,78 @@ cat << _EOF_
         .home { display: inline-block; text-align:right; margin-right: 1.5em; }
         .home { text-decoration: none; width: 5.4em; margin-bottom: 1.5em; text-align: left;  color: var(--link-home); } .home:hover { color: var(--link-home-hover); }
         .heading .stamp { color: var(--text-muted); }
-        /* On a post the body is indented because the back arrow sits beside
-           it. The arrow has moved up into the heading, so the body needs the
-           same offset explicitly or it falls back to the left margin and
-           stops lining up with the title above it. */
         /* A nav is an ordered list of names and places; what it means is
-           left to this template. Rendered as a left sidebar beside the body.
-           The body's left edge is derived from a custom property so the footer
-           can align to it without duplicating the calculation. */
-        :root { --page-body-offset: 6.82rem; --page-nav-width: 16rem; --page-nav-gap: 2rem;
-                /* rem, not em: em resolves against each element's own
-                   font-size, so the footer at .85em computed a different
-                   length from the same variable and sat 59px left of the body.
-                   Where the body column starts. Anything that must line up with
-                   the body reads this one value rather than recomputing it --
-                   the footer and the body were expressed separately before, so
-                   moving the body left the footer behind under the sidebar. */
-                --page-content-left: calc(var(--page-body-offset) + var(--page-nav-width) + var(--page-nav-gap)); }
+           left to this template. Rendered as a left sidebar beside the body. */
+        :root { --page-nav-width: 6rem; --page-nav-gap: 2rem; }
 
-        .page-nav { position: absolute; width: var(--page-nav-width); margin: 0; padding: 0;
-                    font-size: .9em; }
+        /* min-width as well as width: in an auto-layout table a declared
+           width is only a suggestion, so the nav column shrank to whatever the
+           longest label happened to be and the body's left edge moved with it.
+           The floor keeps the column a fixed 6rem regardless of the labels. */
+        .page-nav { display: table-cell; vertical-align: top;
+                    width: var(--page-nav-width);
+                    min-width: var(--page-nav-width);
+                    margin: 0; padding: 0; font-size: .9em; }
         .page-nav .nav-item { display: block; text-decoration: none;
                               color: var(--link-nav); margin-bottom: .35em; }
         .page-nav .nav-item:hover { color: var(--link-nav-hover); }
 
-        .page-wrapper { position: relative; }
-
-        .contents { display: inline-block; max-width: 60ch; vertical-align: top;
-                    width: 100%; margin-left: var(--page-body-offset); }
-        .page-wrapper:has(.page-nav) .contents { margin-left: var(--page-content-left); }
-        .page-wrapper:not(:has(.page-nav)) .contents { margin-left: var(--page-body-offset); }
-        /* A page with no nav has no sidebar to clear, so its footer sits at
-           the base offset like its body. */
-        .page-wrapper:not(:has(.page-nav)) footer.site-footer {
-          margin-left: var(--page-body-offset); }
+        /* The sidebar and the body are two cells of one table row, which is
+           the same mechanism the post layout uses to hold a stamp beside a
+           title. Sharing a row is what makes their tops line up: the browser
+           aligns the cells, so there is no offset here to keep in sync with
+           the heading's height. An earlier version positioned the nav
+           absolutely and pushed it down by a measured amount, which had to be
+           re-measured whenever anything above it changed. */
+        /* The table sizes to its content rather than to the article's width.
+           Capped at 100% the two columns competed for the same space: pinning
+           the nav to 6rem took three pixels off the body, so the body column
+           came out narrower on a page with a sidebar than on one without --
+           the body would have differed from a post's for no reason the reader
+           could see. Sizing to content lets the nav hold its 6rem and the body
+           hold its full 60ch, with the sidebar adding to the total width
+           instead of subtracting from the body. There is room: the body column
+           tops out at 60ch and the viewport is wider than nav plus body
+           wherever this layout applies. */
+        .page-wrapper { display: table; table-layout: auto; width: auto; }
+        .contents-cell { display: table-cell; vertical-align: top;
+                         padding-left: var(--page-nav-gap); }
+        /* With no nav, the body has to line up with a post's body, and a post
+           gets its indent from the back arrow sitting inline before the
+           contents -- not from a fixed length. That is why the indent is a
+           spacer of the arrow's exact size rather than a copied number: the
+           two are inline-blocks, so they sit side by side while they fit and
+           the body wraps under the spacer when the screen is too narrow,
+           reflowing at exactly the width a post reflows at. A hardcoded
+           padding could match at one width but broke at every other -- at
+           735px it put the page body 97px left of the post's. Pages have no
+           arrow (it means nothing on a page), so the spacer is empty and
+           hidden from assistive tech. */
+        .page-wrapper:not(:has(.page-nav)) .contents-cell { display: block;
+                                                            padding-left: 0; }
+        .home-spacer { display: inline-block; width: 5.4em; margin-right: 1.5em;
+                       margin-bottom: 1.5em; vertical-align: top; }
+        .page-wrapper:has(.page-nav) .home-spacer { display: none; }
+        .contents { display: inline-block; max-width: 60ch; vertical-align: top; width: 100%; }
 
         /* Narrow: the sidebar has nowhere to go, so it stacks above the body
-           and everything collapses to one column. The arrow's column and the
-           footer must reset too -- leaving them at the wide offsets pushed the
-           title and footer off a 400px screen entirely. */
+           and everything collapses to one column. Every part has to leave
+           table layout together -- a lone cell reverting to block still gets
+           an anonymous table wrapper and stays in its column. */
         @media (max-width: 735px) {
-          .page-nav { position: static; width: 100%; margin-bottom: 2em; }
+          .page-wrapper,
+          .page-nav,
+          .contents-cell { display: block; }
+          .page-nav { width: auto; min-width: 0; margin-bottom: 2em; }
           /* No indent at this width: 6.82rem plus a 60ch column overflows a
-             phone and forces horizontal scroll. The arrow stacks above the
-             title instead of holding a column beside it. */
-          .heading-page { margin-left: 0; display: block; }
-          .heading-page .home,
-          .page-wrapper:not(:has(.page-nav)) .heading-page .home {
-            flex: none; display: block; margin-bottom: .5em; }
-          .contents,
-          .page-wrapper:has(.page-nav) .contents { margin-left: 0; }
-          .page-wrapper footer.site-footer,
-          .page-wrapper:not(:has(.page-nav)) footer.site-footer {
-            margin-left: 0; }
+             phone and forces horizontal scroll. */
+          .contents-cell { padding-left: 0; }
+          /* The heading is left alone here. A post has no breakpoint at all --
+             its heading and body both collapse by wrapping, at the same width,
+             because both are driven by the same inline column. Forcing the
+             heading to block at 735px un-indented the title while the body was
+             still indented, so the two split apart for exactly one step of the
+             range. Letting it wrap on its own keeps them together. */
         }
         .contents :first-child { margin-top: 0; }
         h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: normal; text-transform: uppercase; margin: 2em 0 1em; }
@@ -413,18 +440,6 @@ cat << _EOF_
           background-color: var(--bg-secondary);
         }
 
-        /* Footer nav is a template-baked nav -- presentation, on every page,
-           declared by the theme rather than by any page. Positioned to align
-           with body content using the same left offset. Uses a subtle Unicode
-           separator rendered via CSS. */
-        footer.site-footer { margin-top: 3em; padding-top: 2em; font-size: .85em;
-                             text-align: left; max-width: 60ch; margin-left: var(--page-content-left); }
-        footer.site-footer::before { content: ""; display: block; height: 1px;
-                                    background: var(--border-lighter);
-                                    margin-bottom: 1.25em; }
-        footer.site-footer .footer-link { display: block; text-decoration: none;
-                                          color: var(--text-muted); margin-bottom: .5em; }
-        footer.site-footer .footer-link:hover { color: var(--link-nav-hover); }
       </style>
       <script>
         (function() {
@@ -464,13 +479,14 @@ cat << _EOF_
       <header><a href="$URL_PREFIX/"$([ -z "${PAGE_CRUMBS:-}" ] && echo ' class="current"')>$(html_escape "${BLOG_TITLE:-}")</a>$(crumbs)</header>
       <article>
         <div class="page-wrapper">
-        <div class="heading heading-page"><a href="$URL_PREFIX/" class="home" aria-label="Back to the index">&#x2190;&#xFE0E;</a><h1 class="title">$(html_escape "${POST_TITLE:-}")</h1></div>
         $(page_nav)
-        <div class="contents">
+          <div class="contents-cell">
+        <div class="heading heading-page"><span class="home-spacer" aria-hidden="true"></span><h1 class="title">$(html_escape "${POST_TITLE:-}")</h1></div>
+        <span class="home-spacer" aria-hidden="true"></span><div class="contents">
         $(echo "${POST_CONTENTS:-}")
         <div class="tags">$(for i in $TAGS; do echo "<a href=\"../tag/$i/\">$(html_escape "$i")</a>"; done;)</div>
         </div>
-        $(render_footer_nav)
+          </div>
         </div>
       </article>
     </body>
diff --git a/test/regressions.sh b/test/regressions.sh
index 377f4a5..dfc7d32 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -984,11 +984,17 @@ assert_file_exists "$nop/.dist/fallback.html"
 it "and does so without complaint"
 assert_eq "$stderr_output" ""
 
-it "the back arrow sits in the heading, not below it"
-assert_file_contains "$pg/.dist/study/consciousness.html" 'class="heading heading-page"><a href="../" class="home"'
-
-it "the arrow keeps an accessible name"
-assert_file_contains "$pg/.dist/study/consciousness.html" 'aria-label="Back to the index"'
+it "a page has no back arrow"
+# A post's arrow goes back to the index it was listed on. A page is not listed
+# anywhere -- it is reached by its own stable path -- so an arrow to the index
+# points at a place the reader did not come from. The breadcrumb in the header
+# is what a page navigates by instead.
+assert_file_not_contains "$pg/.dist/study/consciousness.html" 'class="home"'
+
+it "the arrow's column is still reserved so the body lines up with a post's"
+# Removing the arrow must not move the body: a post indents by the arrow's
+# width, and a page has to match it.
+assert_file_contains "$pg/.dist/study/consciousness.html" 'class="home-spacer"'
 
 it "a blog with only pages and no posts still builds"
 only="$TMPROOT/onlypages"
@@ -1201,76 +1207,6 @@ else
   fail "helpers.sh tag index does not use event delegation for toggle"
 fi
 
-suite "template navs"
-
-it "a template nav renders without any page declaring it"
-tn="$TMPROOT/tnav"
-make_blog_min "$tn" 2 10
-mkdir -p "$tn/pages" "$tn/navs"
-printf 'Home\t/\nAbout\t/about\n' > "$tn/navs/site-footer.tsv"
-printf '# A Page\n\nContent.\n' > "$tn/pages/test.md"
-run_jenny_split "$tn"
-assert_file_exists "$tn/.dist/test.html"
-
-it "the template nav appears on the page"
-assert_file_contains "$tn/.dist/test.html" "Home"
-
-it "the template nav's second entry appears"
-assert_file_contains "$tn/.dist/test.html" "About"
-
-it "the template nav appears in the footer"
-assert_file_contains "$tn/.dist/test.html" 'class="site-footer"'
-
-it "the template nav entries link correctly"
-assert_file_contains "$tn/.dist/test.html" 'class="footer-link"'
-
-it "the template nav entry paths are resolved relatively"
-assert_file_contains "$tn/.dist/test.html" 'href="./'
-
-it "the build is clean"
-assert_eq "$stderr_output" ""
-
-it "a template nav and page-declared nav coexist"
-printf 'Nav: page-nav\n\n# With Both\n\nContent.\n' > "$tn/pages/both.md"
-printf 'Page\t/page\n' > "$tn/navs/page-nav.tsv"
-run_jenny_split "$tn"
-assert_file_contains "$tn/.dist/both.html" 'class="page-nav"'
-assert_file_contains "$tn/.dist/both.html" 'class="site-footer"'
-
-it "both navs render their entries"
-assert_file_contains "$tn/.dist/both.html" "Page"
-assert_file_contains "$tn/.dist/both.html" "Home"
-
-it "template nav entries are escaped"
-printf 'Link & Text <foo>\t/test\n' > "$tn/navs/site-footer.tsv"
-run_jenny "$tn"
-assert_file_contains "$tn/.dist/test.html" "Link &amp; Text &lt;foo&gt;"
-
-it "a missing template nav file is silently skipped"
-rm "$tn/navs/site-footer.tsv"
-run_jenny "$tn"
-assert_file_not_contains "$tn/.dist/test.html" 'class="site-footer"'
-
-it "the build stays clean when template nav is missing"
-assert_eq "$stderr_output" ""
-
-it "a template nav from a nested page resolves relatively"
-mkdir -p "$tn/pages/deep/nested"
-printf 'Home\t/\n' > "$tn/navs/site-footer.tsv"
-printf '# Deep\n\nContent.\n' > "$tn/pages/deep/nested/page.md"
-run_jenny "$tn"
-assert_file_contains "$tn/.dist/deep/nested/page.html" 'href="../../'
-
-it "blank lines in a template nav are ignored"
-printf 'One\t/one\n\nTwo\t/two\n' > "$tn/navs/site-footer.tsv"
-run_jenny "$tn"
-assert_eq "$(grep -c 'class="footer-link"' "$tn/.dist/test.html")" "2"
-
-it "comment lines in a template nav are ignored"
-printf '# Section\nLink\t/link\n' > "$tn/navs/site-footer.tsv"
-run_jenny "$tn"
-assert_eq "$(grep -c 'class="footer-link"' "$tn/.dist/test.html")" "1"
-
 suite "page nav sidebar layout"
 
 nav_sb="$TMPROOT/navsidebar"
@@ -1279,87 +1215,174 @@ mkdir -p "$nav_sb/pages" "$nav_sb/navs"
 mkdir -p "$nav_sb/pages/plain"
 printf 'Item\t/item\n' > "$nav_sb/navs/side.tsv"
 printf 'Nav: side\n\n# Title\n\nBody.\n' > "$nav_sb/pages/test.md"
+printf '# Plain\n\nNo nav.\n' > "$nav_sb/pages/plain.md"
 run_jenny_split "$nav_sb"
 
-it "the heading lays the arrow and title on one row"
-# Asserts the mechanism, not a literal value: the previous assertion pinned
-# "align-items: center" and broke the moment the alignment changed to baseline.
-assert_file_contains "$nav_sb/.dist/test.html" '.heading-page { display: flex'
-
-it "the back arrow holds its own column in the heading"
-# The arrow reserves a fixed track so the title starts where the body does.
-# The previous assertion pinned "display: inline-block", which said nothing
-# about whether the columns actually lined up.
-assert_file_contains "$nav_sb/.dist/test.html" '.heading-page .home { flex: 0 0'
-
-it "the title uses flexbox to take remaining space"
-assert_file_contains "$nav_sb/.dist/test.html" '.heading-page .title { display: block; margin: 0; flex: 1'
-
-it "the nav is wrapped in a .page-wrapper container"
+# These assert structure and mechanism rather than literal declarations.
+# Several earlier assertions here pinned exact strings -- "width: 16em",
+# "align-items: center", "position: absolute" -- and every one of them passed
+# against a layout that was visibly broken; "position: absolute" matched the
+# theme toggle elsewhere in the file and never looked at the nav at all. What
+# actually has to hold is that the nav and the body are siblings in one
+# container, that the sidebar and the body share a table row so their tops
+# line up without a measured offset, and that a page with no nav falls back to
+# the post's own indent mechanism.
+
+it "the nav and the body are siblings inside .page-wrapper"
 assert_file_contains "$nav_sb/.dist/test.html" '<div class="page-wrapper">'
-
+assert_file_contains "$nav_sb/.dist/test.html" '<nav class="page-nav">'
 
 it "the nav is not nested inside .contents"
 assert_file_not_contains "$nav_sb/.dist/test.html" '<div class="contents">.*<nav'
 
-it "the page-nav has position: absolute for sidebar layout"
-assert_file_contains "$nav_sb/.dist/test.html" 'position: absolute'
-
-it "the page-nav width is 16em for the sidebar"
-# rem, not em: the offsets must be absolute so the footer, which sets
-# font-size: .85em, resolves them to the same length the body does. Asserting
-# the literal "16em" pinned that bug in place.
-assert_file_contains "$nav_sb/.dist/test.html" 'width: var(--page-nav-width)'
-
-it "the page-nav is positioned relative to page-wrapper"
-assert_file_contains "$nav_sb/.dist/test.html" '.page-wrapper { position: relative'
-
-it "a page without nav still renders its body via .page-wrapper:not(:has(.page-nav)) CSS"
-printf '# Plain\n\nNo nav.\n' > "$nav_sb/pages/plain.md"
-run_jenny_split "$nav_sb"
-# Page without nav should have .page-wrapper:not(:has(.page-nav)) selector in CSS
+it "the sidebar and the body are cells of one table row"
+# This is what makes the title and the first nav item line up: they share a
+# row, so the browser aligns them. Asserting the row is asserting the
+# alignment -- an offset-based version would satisfy a "tops match" check at
+# one heading height and drift at every other.
+assert_file_contains "$nav_sb/.dist/test.html" '.page-wrapper { display: table'
+assert_file_contains "$nav_sb/.dist/test.html" '.contents-cell { display: table-cell'
+
+it "the sidebar is a table cell aligned to the top of its row"
+nav_rule=$("$SED" -n '/^        \.page-nav { display: table-cell;/,/}/p' "$nav_sb/.dist/test.html")
+assert_contains "$nav_rule" 'vertical-align: top'
+
+it "the sidebar column does not depend on its labels"
+# An auto-layout table treats a declared width as a suggestion and shrinks the
+# column to its content, which moved the body's left edge whenever a label
+# changed. The floor is what keeps the column fixed.
+assert_file_contains "$nav_sb/.dist/test.html" 'min-width: var(--page-nav-width)'
+
+it "the sidebar carries no positioning offset"
+# The nav used to be positioned absolutely and pushed down by a measured
+# amount that had to be re-measured whenever anything above it changed.
+assert_file_not_contains "$nav_sb/.dist/test.html" '.page-nav { position: absolute'
+
+it "a page with no nav takes the body indent, not the sidebar column"
 assert_file_contains "$nav_sb/.dist/plain.html" '.page-wrapper:not(:has(.page-nav))'
 
+it "a page with no nav reserves the arrow column the way a post does"
+# A post's indent comes from the back arrow sitting inline before the body, so
+# the two reflow together when the screen narrows. A page has no arrow, so it
+# reserves the same column with a spacer of the same size; a hardcoded padding
+# matched at one width and was 97px out at 735px.
+# Anchored to the body, not just "a spacer exists somewhere": the heading has
+# one too, and a check that matched either passed with the body's spacer
+# deleted -- which drops the body indent from 110px to 0 against a post's 110.
+assert_file_contains "$nav_sb/.dist/plain.html" '<span class="home-spacer" aria-hidden="true"></span><div class="contents">'
+assert_file_contains "$nav_sb/.dist/plain.html" '.home-spacer { display: inline-block'
+
+it "the spacer is hidden from assistive technology"
+assert_file_contains "$nav_sb/.dist/plain.html" 'class="home-spacer" aria-hidden="true"'
+
+it "a page with a sidebar drops the arrow spacer"
+assert_file_contains "$nav_sb/.dist/test.html" '.page-wrapper:has(.page-nav) .home-spacer { display: none'
+
+it "a sidebar widens the article rather than narrowing the body"
+# 74ch is sized for a post: arrow column plus a 60ch body. Letting the sidebar
+# eat into it made the body 537px against a post's 540.
+assert_file_contains "$nav_sb/.dist/test.html" 'article:has(.page-nav) { max-width: calc(74ch'
+
+it "the body column is declared identically to a post's"
+# The user's constraint: the body of a page should differ from the body of a
+# post in no way at all. Compare the declarations rather than trusting that
+# they look similar.
+# Anchored to the start of the declaration so a descendant rule such as
+# ".page-wrapper:not(:has(.page-nav)) .contents { ... }" is not mistaken for
+# the base rule -- one such override was what made the no-nav body differ.
+page_contents=$("$GREP" -o '^        \.contents { [^}]*}' "$nav_sb/.dist/test.html" | head -1)
+post_file=$(find "$nav_sb/.dist/post" -name '*.html' | head -1)
+post_contents=$("$GREP" -o '^        \.contents { [^}]*}' "$post_file" | head -1)
+assert_eq "$page_contents" "$post_contents"
+
+it "the heading reserves the same column the body does"
+# On a post the stamp holds the left column, so the title starts where the
+# body starts. A page has no stamp; without the same spacer in the heading the
+# title sat at the far left while its own body was indented past it.
+assert_file_contains "$nav_sb/.dist/plain.html" 'class="heading heading-page"><span class="home-spacer"'
+
+it "the heading has no breakpoint of its own"
+# A post has no media query at all -- heading and body collapse together by
+# wrapping. Forcing the page heading to block at 735px un-indented the title
+# while the body was still indented, splitting the two for one step of the
+# range.
+narrow_head=$("$SED" -n '/@media (max-width: 735px)/,/^        }/p' "$nav_sb/.dist/plain.html")
+assert_not_contains "$narrow_head" '.heading-page { margin-left: 0; display: block'
+
+it "a sidebar page does not indent its heading twice"
+# The cell is already offset by the nav column; indenting the heading again
+# would put the title a column right of its own body.
+assert_file_contains "$nav_sb/.dist/test.html" '.page-wrapper:has(.page-nav) .heading-page .home-spacer { display: none'
+
+it "narrow screens collapse the whole table, not just one cell"
+# A lone cell reverting to block still gets an anonymous table wrapper and
+# stays in its column, so all three have to leave table layout together.
+narrow=$("$SED" -n '/@media (max-width: 735px)/,/^        }/p' "$nav_sb/.dist/test.html")
+assert_contains "$narrow" '.page-wrapper,'
+assert_contains "$narrow" '.page-nav,'
+assert_contains "$narrow" '.contents-cell { display: block'
+
+it "the narrow sidebar releases its fixed column"
+assert_contains "$narrow" 'min-width: 0'
+
 it "the build is clean for nav sidebar"
 assert_eq "$stderr_output" ""
 
-suite "footer layout changes"
-
-it "the site footer is left-aligned, not centred"
-assert_file_contains "$nav_sb/.dist/test.html" 'text-align: left'
+suite "template-baked navs"
+
+# The default theme renders no footer, so render_footer_nav is not called from
+# the template. The mechanism it demonstrates -- a nav declared by the theme
+# rather than by a page, read from the same registry -- is the feature, and it
+# is exercised here directly so it cannot rot while unused.
+
+tfn="$TMPROOT/tfooternav"
+make_blog_min "$tfn" 1 10
+mkdir -p "$tfn/navs"
+
+# shellcheck source=/dev/null
+render_footer_nav_in() {
+  # Runs render_footer_nav from the page layout with a given navs dir and
+  # prefix, without rendering a whole page.
+  (
+    set +u
+    NAVS_DIR="$1" URL_PREFIX="$2"
+    SED="$SED" AWK="$AWK" GREP="$GREP"
+    # shellcheck disable=SC1090
+    source "$JENNY_SHARE_DIR/lib/helpers.sh"
+    eval "$("$SED" -n '/^render_footer_nav() {/,/^}/p' "$JENNY_SHARE_DIR/layout/page.sh")"
+    eval "$("$SED" -n '/^html_escape() {/,/^}/p' "$JENNY_SHARE_DIR/layout/page.sh")"
+    render_footer_nav
+  )
+}
+
+it "a template nav renders its entries"
+printf 'Home\t/\nAbout\t/about\n' > "$tfn/navs/site-footer.tsv"
+out=$(render_footer_nav_in "$tfn/navs" "..")
+assert_eq "$(printf '%s' "$out" | "$GREP" -c 'class="footer-link"')" "2"
+
+it "a template nav resolves paths against the page's prefix"
+assert_contains "$out" 'href="../about"'
 
-it "the footer width matches the body content column (60ch)"
-assert_file_contains "$nav_sb/.dist/test.html" 'max-width: 60ch'
-
-it "the footer uses custom property for left margin, not hardcoded offset"
-assert_file_contains "$nav_sb/.dist/test.html" 'margin-left: var(--page-body-offset)'
-
-it "the footer and body both derive from the same custom property"
-if grep -q 'margin-left: var(--page-body-offset)' "$nav_sb/.dist/test.html" && \
-   grep -q 'margin-left: var(--page-body-offset)' "$nav_sb/.dist/test.html"; then
-  pass "footer and body both use var(--page-body-offset)"
-else
-  fail "footer and body must both use var(--page-body-offset)"
-fi
-
-it "the footer separator is rendered via CSS content property as a block"
-assert_file_contains "$nav_sb/.dist/test.html" 'footer.site-footer::before { content:'
-
-it "footer links display as blocks, not inline"
-assert_file_contains "$nav_sb/.dist/test.html" '.footer-link { display: block'
+it "blank lines in a template nav are ignored"
+printf 'One\t/one\n\nTwo\t/two\n' > "$tfn/navs/site-footer.tsv"
+out=$(render_footer_nav_in "$tfn/navs" "..")
+assert_eq "$(printf '%s' "$out" | "$GREP" -c 'class="footer-link"')" "2"
 
-it "footer links no longer have inline margins"
-assert_file_not_contains "$nav_sb/.dist/test.html" 'margin: 0 1em'
+it "comment lines in a template nav are ignored"
+printf '# Section\nLink\t/link\n' > "$tfn/navs/site-footer.tsv"
+out=$(render_footer_nav_in "$tfn/navs" "..")
+assert_eq "$(printf '%s' "$out" | "$GREP" -c 'class="footer-link"')" "1"
 
-it "the footer would drift if page-body-offset were not used"
-# Count how many rules use var(--page-body-offset) - should be at least 2
-# (one in .contents, one in footer.site-footer)
-offset_count=$(grep -o 'margin-left: var(--page-body-offset)' "$nav_sb/.dist/test.html" | wc -l)
-[ "$offset_count" -ge 2 ] && pass "footer offset is tied to body via custom property" || \
-  fail "footer and body should both reference var(--page-body-offset), found $offset_count references"
+it "template nav entries are escaped"
+printf 'Link & Text <foo>\t/x\n' > "$tfn/navs/site-footer.tsv"
+out=$(render_footer_nav_in "$tfn/navs" "..")
+assert_contains "$out" 'Link &amp; Text &lt;foo&gt;'
 
-it "the footer layout is clean on build"
-assert_eq "$stderr_output" ""
+it "a missing template nav file is silently skipped"
+rm -f "$tfn/navs/site-footer.tsv"
+out=$(render_footer_nav_in "$tfn/navs" ".." 2>/dev/null); st=$?
+assert_eq "$st" "0"
+assert_eq "$out" ""
 
 suite "CSS variables completeness"