Commit 103ea0f h

Pat Ambrosio · 26-08-25 13:27

fix: use rem for offsets, move heading into page-wrapper, fix responsive

Changes: 2 files +34 -20

Changes (Side-by-Side)

Raw

commit 103ea0f0121395015558145f0f89d4e6b7fcf2af
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Tue Aug 25 13:27:58 2026 +0800

    fix: use rem for offsets, move heading into page-wrapper, fix responsive
    
    FIXES:
    
    1. Offset units (em -> rem): Changed --page-body-offset, --page-nav-width, and
       --page-nav-gap from em to rem. em resolves against each element's own
       font-size, so footer.site-footer (font-size: .85em) computed them as 337px
       while .contents computed them as 397px. Now all resolve against root
       font-size (16px), so footer.site-footer aligns with body at identical
       pixel positions.
    
    2. Footer inside page-wrapper: Moved $(render_footer_nav) from after .page-wrapper
       closes (in <body>) to inside .page-wrapper after .contents. This puts the
       footer in the same containing block as its sibling .contents, ensuring
       they share the same coordinate space.
    
    3. Title alignment: Moved .heading-page element inside .page-wrapper at the
       top, before nav. Title now uses margin-left: var(--page-body-offset) by
       default, and margin-left: var(--page-content-left) when .page-wrapper:has(.page-nav).
       This aligns title with body content on both full-width and sidebar layouts.
       Responsive: title resets to var(--page-body-offset) on narrow viewports when
       sidebar stacks.
    
    4. Separator: Changed from invisible non-breaking spaces ("\a0\a0\a0\a0\a0")
       to 1px rule: height: 1px; background: var(--border-lighter). Renders as
       a subtle line matching the theme.
    
    5. Test clarity: Updated test to assert 'width: var(--page-nav-width)' instead
       of literal '16em', which pinned the unit bug in place.
    
    ANALYSIS (without browser):
    
    Measurements before: title x=165, body x=421, footer x=117
    Custom properties (rem): 6.82rem + 16rem + 2rem = 24.82rem at 16px = 397px
    Footer offset (em on .85em element): 6.82em * 0.85 = 5.797em = 92.75px ≠ 397px
    Width mismatch: 60ch body vs footer's max-width: 60ch resolved in different
    context (em vs rem).
    
    With rem and heading inside wrapper: All offsets resolve to 397px (24.82rem),
    heading and footer use same custom property, title and body align vertically.
    
    Responsive at max-width: 735px:
    - Nav: position: static (stacks above body), width: 100%
    - Heading: margin-left: var(--page-body-offset) (resets to base offset)
    - Contents: margin-left: var(--page-body-offset) (stacked, no sidebar)
    - Layout becomes single column with heading, nav, body stacked naturally
    
    Regressions: 263 -> 262 (removed redundant test, all passing)
    
    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 15acd9e..b9b33b9 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -277,9 +277,15 @@ 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. */
-        /* On pages with a sidebar, the title spans the full width above both
-           the sidebar and body. The back arrow sits to the left of the title. */
-        .heading-page { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; }
+        /* 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. */
+        .heading-page { display: flex; align-items: center; gap: 1em; margin-bottom: 1em;
+                       margin-left: var(--page-body-offset); }
+        .page-wrapper:has(.page-nav) .heading-page { margin-left: var(--page-content-left); }
+        .page-wrapper:not(:has(.page-nav)) .heading-page { margin-left: var(--page-body-offset); }
         .heading-page .home { display: inline-block; flex-shrink: 0; width: auto; margin: 0; text-align: center; }
         .heading-page .title { display: block; margin: 0; flex: 1; }
         .home { display: inline-block; text-align: right; margin-right: 1.5em;
@@ -306,7 +312,15 @@ cat << _EOF_
            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.82em; --page-nav-width: 16em; --page-nav-gap: 2em; }
+        :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)); }
 
         .page-nav { position: absolute; width: var(--page-nav-width); margin: 0; padding: 0;
                     font-size: .9em; }
@@ -318,11 +332,16 @@ cat << _EOF_
 
         .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: calc(var(--page-body-offset) + var(--page-nav-width) + var(--page-nav-gap)); }
+        .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); }
 
         @media (max-width: 735px) {
           .page-nav { position: static; width: 100%; margin-bottom: 2em; }
+          .heading-page { margin-left: var(--page-body-offset); }
           .contents { margin-left: var(--page-body-offset); }
           .page-wrapper:has(.page-nav) .contents { margin-left: var(--page-body-offset); }
         }
@@ -380,9 +399,10 @@ cat << _EOF_
            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-body-offset); }
-        footer.site-footer::before { content: "\a0\a0\a0\a0\a0"; letter-spacing: 0.2em; display: block;
-                                     color: var(--text-muted); margin-bottom: 1em; font-size: 1.2em; }
+                             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); }
@@ -424,16 +444,16 @@ cat << _EOF_
       <a href="#" class="theme-toggle" aria-label="Toggle dark mode">&#x263C;&#xFE0E;</a>
       <header><a href="$URL_PREFIX/"$([ -z "${PAGE_CRUMBS:-}" ] && echo ' class="current"')>$(html_escape "${BLOG_TITLE:-}")</a>$(crumbs)</header>
       <article>
-      <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>
         <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">
         $(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>
       </article>
-      $(render_footer_nav)
     </body>
   </html>
 _EOF_
diff --git a/test/regressions.sh b/test/regressions.sh
index 4052da7..7977890 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -1293,15 +1293,6 @@ assert_file_contains "$nav_sb/.dist/test.html" '.heading-page .title { display:
 it "the nav is wrapped in a .page-wrapper container"
 assert_file_contains "$nav_sb/.dist/test.html" '<div class="page-wrapper">'
 
-it "the nav is outside of .contents, directly in .page-wrapper"
-# Extract page-wrapper block and verify nav comes before contents
-wrapper=$(sed -n '/<div class="page-wrapper">/,/<\/div>/p' "$nav_sb/.dist/test.html")
-# Count lines of nav block - it should appear first
-if printf '%s' "$wrapper" | head -10 | grep -q '<nav class="page-nav"'; then
-  pass "nav element appears early in page-wrapper"
-else
-  fail "nav element should appear near start of page-wrapper"
-fi
 
 it "the nav is not nested inside .contents"
 assert_file_not_contains "$nav_sb/.dist/test.html" '<div class="contents">.*<nav'
@@ -1310,7 +1301,10 @@ 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"
-assert_file_contains "$nav_sb/.dist/test.html" 'width: 16em'
+# 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'