Commit a776b5f h

Pat Ambrosio · 26-08-26 11:56

Stack a post's header on a phone instead of holding the column

Changes: 2 files +33 -0

Changes (Side-by-Side)

Raw

commit a776b5fc95829040ed3cbb2d37c3245bf471116d
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Wed Aug 26 11:56:39 2026 +0800

    Stack a post's header on a phone instead of holding the column
    
    Measured at 440px: the stamp column takes 109px of a 392px article to hold
    a date, and the body gets 283px -- 31 characters a line, where the same
    text on a page gets 44. Typographic guidance for body text starts around
    45. The column is empty for the whole length of the article.
    
    Below 735px, the width where the page layout already stacks its sidebar, a
    post stacks too: stamp, then title, then body, each at the left margin and
    the body across the full article width.
    
    This gives up the pixel match with the index entry a post came from, but
    only on a phone. An index entry is one line with no body to squeeze, so it
    keeps its two columns and loses nothing by them; and an index and a post
    are never on screen together. Above 735px the alignment is exactly as it
    was -- stamp at 24, title at 133 on both.
    
    Verified at 320-1440px: stacked and full-width at and below 735, two
    columns and matching the index at and above 736, no overflow anywhere.
    
    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/post.sh b/share/jenny/layout/post.sh
index 92ffd49..06903f8 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -309,6 +309,23 @@ cat << _EOF_
            text reflowing. */
         .contents { display: block; max-width: 60ch; width: 100%; min-width: 0; }
         .body-row { min-width: 0; }
+
+        /* On a phone the stamp column is a quarter of the screen held open for
+           a date, and the body pays for it: 283px of a 392px article, 31
+           characters a line where the same text on a page gets 44. Below the
+           width where the page layout stacks its sidebar, a post stacks too --
+           stamp, then title, then body, each at the left margin.
+
+           This gives up the pixel alignment with the index entry a post came
+           from, but only here: an index entry is a single line with no body to
+           squeeze, so it keeps its two columns and loses nothing, and nobody
+           sees an index and a post side by side on a phone. Above 735px the
+           alignment is untouched. */
+        @media (max-width: 735px) {
+          .heading > a { display: block; }
+          .heading .stamp { display: block; flex: none; }
+          .body-row { padding-left: 0; }
+        }
         /* The way back sits after the text, where a reader finishes. Held in a
            column before the body it wrapped onto its own line once the body no
            longer fit beside it, leaving a stray arrow between the title and the
diff --git a/test/regressions.sh b/test/regressions.sh
index d9eb9da..c0aa821 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -921,6 +921,22 @@ it "a wide table scrolls inside its own box"
 # min-width the table pushed the document sideways instead of scrolling.
 assert_file_contains "$al_post" 'article .table-scroll { overflow-x: auto; margin: 1em 0; min-width: 0; max-width: 100%; }'
 
+it "a phone stacks the header instead of holding the column"
+# The column is a quarter of a 440px screen held open for a date, and the body
+# pays: 283px of a 392px article, 31 characters a line where the same text on a
+# page gets 44. Below the width where the page layout stacks its sidebar, a
+# post stacks too.
+narrow_post=$("$SED" -n '/@media (max-width: 735px)/,/^        }/p' "$al_post")
+assert_contains "$narrow_post" '.heading > a { display: block; }'
+assert_contains "$narrow_post" '.body-row { padding-left: 0; }'
+
+it "the index alignment survives above that width"
+# Giving up the match on a phone is deliberate -- an index entry is a single
+# line with no body to squeeze, and nobody sees an index and a post side by
+# side there. The declarations outside the media query are untouched.
+assert_file_contains "$al_post" '.body-row { padding-left: var(--stamp-column); }'
+assert_file_contains "$al_post" 'flex: 0 0 var(--stamp-column)'
+
 it "the build is clean"
 assert_eq "$stderr_output" ""