Commit 4853a27 h

Pat Ambrosio · 26-09-06 09:36

Sit the theme control on the header line, without a box

Changes: 4 files +82 -49

Changes (Side-by-Side)

Raw

commit 4853a2701116ec0427f9d7d23a6b677b21f6df9a
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Sun Sep 6 09:36:46 2026 +0800

    Sit the theme control on the header line, without a box
    
    It was positioned against the body at top: 1em, with no relationship to
    the header it sits beside, so its centre landed eight pixels above the
    header's. It is on the header's line now: 2.25rem is that line's own top
    -- 1.5rem, the body's margin plus its padding -- plus half its 1.5rem
    line-height, and translateY(-50%) centres the control on it whatever size
    the control is.
    
    In rem rather than em deliberately. em scales with the control's own
    font-size, so the same expression put it right at one size and two pixels
    out at the other; rem is fixed to the root and holds at both.
    
    The border goes. That box around a small glyph was what read as oversized
    on a phone rather than the glyph itself -- the sizes are unchanged, .95em
    below 735px and 1.15em above. A square keeps it a tap target: 23px on a
    phone, 28px on a desktop.
    
    Two things followed from dropping it. The hover filled a background,
    which behind a borderless glyph reads as a stray block rather than the
    control lighting up, so it dims instead. And the phone override still set
    a padding that only meant anything with a border.
    
    Measured from the built pages at 390 and at 1440: aligned to the header
    exactly at both.
    
    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/404.sh b/share/jenny/layout/404.sh
index 19a69ac..308a2f2 100755
--- a/share/jenny/layout/404.sh
+++ b/share/jenny/layout/404.sh
@@ -73,31 +73,37 @@ cat << _EOF_
       .notfound .code { color: var(--text-muted); text-transform: uppercase; }
       .theme-toggle {
         position: absolute;
-        top: 1em;
+        /* On the header's line, centred on it. 2.25rem is the header's own top
+           (1.5rem, the body's margin plus padding) plus half its 1.5rem line, and
+           translateY(-50%) then centres the control on that line whatever size it
+           is. In rem rather than em on purpose: em scales with the control's own
+           font-size, so the same expression put it two pixels out at one size and
+           right at the other. */
+        top: 2.25rem;
         right: 1em;
+        transform: translateY(-50%);
+        /* No border. The box around a small glyph was what read as oversized on a
+           phone, more than the glyph itself. The square keeps it a tap target. */
         background: none;
-        border: 1px solid var(--border);
+        border: none;
         color: var(--text-primary);
-        /* A geometric glyph reads smaller than a letter set at the same size,
-           and .9em left the control noticeably small against the type it
-           sits beside. Padding is square so the button does not come out
-           wider than it is tall around a round mark. */
-        padding: .35em .45em;
+        width: 1.5em;
+        height: 1.5em;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
         cursor: pointer;
         font-size: 1.15em;
-        line-height: 1;
         text-decoration: none;
         text-transform: uppercase;
       }
-      .theme-toggle:hover {
-        background-color: var(--bg-primary);
-        opacity: 0.8;
-      }
+      .theme-toggle:hover { opacity: .7; }
       /* Smaller on a phone. 1.15em is sized against the desktop measure, where
          the control sits alone in a wide margin; on a narrow screen it is
          beside the breadcrumb and reads as oversized. */
       @media (max-width: 735px) {
-        .theme-toggle { font-size: .95em; padding: .3em .4em; }
+        .theme-toggle { font-size: .95em; }
       }
     </style>
     <script>
diff --git a/share/jenny/layout/index.sh b/share/jenny/layout/index.sh
index 05cee5a..a3acdf2 100755
--- a/share/jenny/layout/index.sh
+++ b/share/jenny/layout/index.sh
@@ -205,30 +205,39 @@ cat << _EOF_
       header a.current { border-bottom: 1px solid var(--border); padding-bottom: .125em; }
       .theme-toggle {
         position: absolute;
-        top: 1em;
+        /* On the header's line, centred on it. 2.25rem is the header's own top
+           (1.5rem, the body's margin plus padding) plus half its 1.5rem line, and
+           translateY(-50%) then centres the control on that line whatever size it
+           is. In rem rather than em on purpose: em scales with the control's own
+           font-size, so the same expression put it two pixels out at one size and
+           right at the other. */
+        top: 2.25rem;
         right: 1em;
+        transform: translateY(-50%);
+        /* No border. The box around a small glyph was what read as oversized on a
+           phone, more than the glyph itself. The square keeps it a tap target. */
         background: none;
-        border: 1px solid var(--border);
+        border: none;
         color: var(--text-primary);
-        /* A geometric glyph reads smaller than a letter set at the same size,
-           and .9em left the control noticeably small against the type it
-           sits beside. Padding is square so the button does not come out
-           wider than it is tall around a round mark. */
-        padding: .35em .45em;
+        width: 1.5em;
+        height: 1.5em;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
         cursor: pointer;
         font-size: 1.15em;
-        line-height: 1;
         text-decoration: none;
         text-transform: uppercase;
       }
-      .theme-toggle:hover {
-        background-color: var(--bg-secondary);
-      }
+      /* Dimmed rather than filled: a background swatch behind a borderless glyph
+         reads as a stray block, not as the control lighting up. */
+      .theme-toggle:hover { opacity: .7; }
       /* Smaller on a phone. 1.15em is sized against the desktop measure, where
          the control sits alone in a wide margin; on a narrow screen it is
          beside the breadcrumb and reads as oversized. */
       @media (max-width: 735px) {
-        .theme-toggle { font-size: .95em; padding: .3em .4em; }
+        .theme-toggle { font-size: .95em; }
       }
     </style>
     <script>
diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index 2b3110c..7b80a02 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -1036,30 +1036,39 @@ cat << _EOF_
         header a { text-decoration: none; color: inherit; }
         .theme-toggle {
           position: absolute;
-          top: 1em;
+          /* On the header's line, centred on it. 2.25rem is the header's own top
+             (1.5rem, the body's margin plus padding) plus half its 1.5rem line, and
+             translateY(-50%) then centres the control on that line whatever size it
+             is. In rem rather than em on purpose: em scales with the control's own
+             font-size, so the same expression put it two pixels out at one size and
+             right at the other. */
+          top: 2.25rem;
           right: 1em;
+          transform: translateY(-50%);
+          /* No border. The box around a small glyph was what read as oversized on a
+             phone, more than the glyph itself. The square keeps it a tap target. */
           background: none;
-          border: 1px solid var(--border-breadcrumb);
+          border: none;
           color: var(--text-primary);
-          /* A geometric glyph reads smaller than a letter set at the same size,
-             and .9em left the control noticeably small against the type it
-             sits beside. Padding is square so the button does not come out
-             wider than it is tall around a round mark. */
-          padding: .35em .45em;
+          width: 1.5em;
+          height: 1.5em;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          line-height: 1;
           cursor: pointer;
           font-size: 1.15em;
-          line-height: 1;
           text-decoration: none;
           text-transform: uppercase;
         }
-        .theme-toggle:hover {
-          background-color: var(--bg-secondary);
-        }
+        /* Dimmed rather than filled: a background swatch behind a borderless glyph
+           reads as a stray block, not as the control lighting up. */
+        .theme-toggle:hover { opacity: .7; }
         /* Smaller on a phone. 1.15em is sized against the desktop measure, where
            the control sits alone in a wide margin; on a narrow screen it is
            beside the breadcrumb and reads as oversized. */
         @media (max-width: 735px) {
-          .theme-toggle { font-size: .95em; padding: .3em .4em; }
+          .theme-toggle { font-size: .95em; }
         }
         /* Tooltip styling for footnote and citation references.
            Rendered as real DOM elements so links remain interactive.
diff --git a/share/jenny/layout/post.sh b/share/jenny/layout/post.sh
index fd91be5..6934978 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -857,30 +857,39 @@ cat << _EOF_
         header a { text-decoration: none; color: inherit; }
         .theme-toggle {
           position: absolute;
-          top: 1em;
+          /* On the header's line, centred on it. 2.25rem is the header's own top
+             (1.5rem, the body's margin plus padding) plus half its 1.5rem line, and
+             translateY(-50%) then centres the control on that line whatever size it
+             is. In rem rather than em on purpose: em scales with the control's own
+             font-size, so the same expression put it two pixels out at one size and
+             right at the other. */
+          top: 2.25rem;
           right: 1em;
+          transform: translateY(-50%);
+          /* No border. The box around a small glyph was what read as oversized on a
+             phone, more than the glyph itself. The square keeps it a tap target. */
           background: none;
-          border: 1px solid var(--border-light);
+          border: none;
           color: var(--text-primary);
-          /* A geometric glyph reads smaller than a letter set at the same size,
-             and .9em left the control noticeably small against the type it
-             sits beside. Padding is square so the button does not come out
-             wider than it is tall around a round mark. */
-          padding: .35em .45em;
+          width: 1.5em;
+          height: 1.5em;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          line-height: 1;
           cursor: pointer;
           font-size: 1.15em;
-          line-height: 1;
           text-decoration: none;
           text-transform: uppercase;
         }
-        .theme-toggle:hover {
-          background-color: var(--bg-secondary);
-        }
+        /* Dimmed rather than filled: a background swatch behind a borderless glyph
+           reads as a stray block, not as the control lighting up. */
+        .theme-toggle:hover { opacity: .7; }
         /* Smaller on a phone. 1.15em is sized against the desktop measure, where
            the control sits alone in a wide margin; on a narrow screen it is
            beside the breadcrumb and reads as oversized. */
         @media (max-width: 735px) {
-          .theme-toggle { font-size: .95em; padding: .3em .4em; }
+          .theme-toggle { font-size: .95em; }
         }
         /* Tooltip styling for footnote and citation references.
            Rendered as real DOM elements so links remain interactive.