Commit 9eebc20 h

Pat Ambrosio · 26-08-28 14:05

Shorten the section mark to a tick above the heading

Changes: 3 files +41 -15

Changes (Side-by-Side)

Raw

commit 9eebc2045ad3536eab94799381d123f6acc8103d
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Fri Aug 28 14:05:35 2026 +0800

    Shorten the section mark to a tick above the heading
    
    A full-measure line reads as a divider between two halves of the page
    rather than as a mark belonging to the heading beneath it. Three
    characters wide, close enough above to sit with the heading rather than
    float between it and the paragraph before.
    
    border-top cannot do this -- it always spans the whole box -- so the mark
    is a ::before, and the title-repeat exemption suppresses its content
    rather than a border. The space that a 1.5em gap used to provide now
    comes from margin-top, which goes to 3em: with the mark tight against the
    heading, the separation between sections has to live above the mark
    instead of below it.
    
    --border-medium rather than --border-light: at 27px the lighter value
    almost disappears. Measured in both themes -- #999 on the dark ground,
    #ddd on the light one.

diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index ceabb79..1b5b78e 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -861,18 +861,29 @@ cat << _EOF_
            rest. Scoped to .contents because the title itself lives in
            .heading, outside it. */
         .contents :is(h1, h2) {
-          border-top: 1px solid var(--border-light);
-          padding-top: 1.5em;
+          position: relative;
+          margin-top: 3em;
+        }
+        /* A short mark rather than a border. border-top spans the whole box,
+           which drew a full-measure line and read as a divider between two
+           halves of the page instead of as a mark belonging to the heading
+           under it. 3ch sits at the width of two or three characters, so it
+           reads as a tick, and 0.6em above keeps it close enough to belong to
+           the heading rather than to float between the two. */
+        .contents :is(h1, h2)::before {
+          content: "";
+          position: absolute;
+          top: -0.6em;
+          left: 0;
+          width: 3ch;
+          border-top: 1px solid var(--border-medium);
         }
         /* The one exception: a page repeats its title as the body's first
            heading, and an h1 with no heading before it is exactly that repeat.
            A rule there draws a line immediately under the title in the header.
            A post has no repeat -- its title is lifted into the header -- so its
            opening h2 is a real section and keeps its rule. */
-        .contents h1:not(:is(h1, h2) ~ *) {
-          border-top: 0;
-          padding-top: 0;
-        }
+        .contents h1:not(:is(h1, h2) ~ *)::before { content: none; }
         ol, ul { padding-left: 1em; }
         /* Notes and references are two different lists, so each is labelled.
            The wording lives here rather than in the parser: md2html.awk marks
diff --git a/share/jenny/layout/post.sh b/share/jenny/layout/post.sh
index 6d258b3..ebbda04 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -682,18 +682,29 @@ cat << _EOF_
            rest. Scoped to .contents because the title itself lives in
            .heading, outside it. */
         .contents :is(h1, h2) {
-          border-top: 1px solid var(--border-light);
-          padding-top: 1.5em;
+          position: relative;
+          margin-top: 3em;
+        }
+        /* A short mark rather than a border. border-top spans the whole box,
+           which drew a full-measure line and read as a divider between two
+           halves of the page instead of as a mark belonging to the heading
+           under it. 3ch sits at the width of two or three characters, so it
+           reads as a tick, and 0.6em above keeps it close enough to belong to
+           the heading rather than to float between the two. */
+        .contents :is(h1, h2)::before {
+          content: "";
+          position: absolute;
+          top: -0.6em;
+          left: 0;
+          width: 3ch;
+          border-top: 1px solid var(--border-medium);
         }
         /* The one exception: a page repeats its title as the body's first
            heading, and an h1 with no heading before it is exactly that repeat.
            A rule there draws a line immediately under the title in the header.
            A post has no repeat -- its title is lifted into the header -- so its
            opening h2 is a real section and keeps its rule. */
-        .contents h1:not(:is(h1, h2) ~ *) {
-          border-top: 0;
-          padding-top: 0;
-        }
+        .contents h1:not(:is(h1, h2) ~ *)::before { content: none; }
         ol, ul { padding-left: 1em; }
         /* Notes and references are two different lists, so each is labelled.
            The wording lives here rather than in the parser: md2html.awk marks
diff --git a/test/regressions.sh b/test/regressions.sh
index f90ead3..d929380 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -1376,7 +1376,11 @@ it "a section heading is marked by a rule above it"
 # green -- the mutation looked survivable when it was simply unobserved.
 assert_file_contains "$dg/.dist/chart.html" '.contents :is(h1, h2) {'
 assert_file_contains "$dg/.dist/post/charted.html" '.contents :is(h1, h2) {'
-assert_file_contains "$dg/.dist/chart.html" 'border-top: 1px solid var(--border-light);'
+# A short mark, not a border. border-top spans the whole box, which drew a
+# full-measure line reading as a divider between two halves of the page rather
+# than as a mark belonging to the heading beneath it.
+assert_file_contains "$dg/.dist/chart.html" 'width: 3ch;'
+assert_file_contains "$dg/.dist/chart.html" '.contents :is(h1, h2)::before {'
 
 it "the body's repeat of the page title carries no rule"
 # A page repeats its title as the body's opening h1, and a rule there draws a
@@ -1386,8 +1390,8 @@ it "the body's repeat of the page title carries no rule"
 # another heading" fixed pages while breaking posts -- a post's title is lifted
 # into the header, so its opening h2 lost its rule and the first section read
 # as preamble. Verified in Chrome on both layouts.
-assert_file_contains "$dg/.dist/chart.html" '.contents h1:not(:is(h1, h2) ~ *) {'
-assert_file_contains "$dg/.dist/post/charted.html" '.contents h1:not(:is(h1, h2) ~ *) {'
+assert_file_contains "$dg/.dist/chart.html" '.contents h1:not(:is(h1, h2) ~ *)::before { content: none; }'
+assert_file_contains "$dg/.dist/post/charted.html" '.contents h1:not(:is(h1, h2) ~ *)::before { content: none; }'
 
 it "an unrendered diagram degrades to readable source"
 # If the script is absent or blocked, the element still holds what the author