Commit c73a2da h

Pat Ambrosio · 26-09-06 07:25

Size the theme control down on a phone

Changes: 4 files +24 -0

Changes (Side-by-Side)

Raw

commit c73a2da17dc3030530cfad6d8a30a0c548a10888
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Sun Sep 6 07:25:34 2026 +0800

    Size the theme control down on a phone
    
    1.15em was chosen against the desktop measure, where the control sits
    alone in a wide margin and a geometric glyph needs the size to read at
    all. On a narrow screen it sits beside the breadcrumb instead, and the
    same size reads as oversized -- the fault of sizing it in one place and
    not looking at the other.
    
    .95em below 735px, which is the width the layouts already stack their
    sidebar at rather than a breakpoint invented for this.
    
    All four layouts carry the control. 404 needed its own edit: its hover
    rule differs from the other three, so the anchor the others share is not
    in it.

diff --git a/share/jenny/layout/404.sh b/share/jenny/layout/404.sh
index bb98ae7..19a69ac 100755
--- a/share/jenny/layout/404.sh
+++ b/share/jenny/layout/404.sh
@@ -93,6 +93,12 @@ cat << _EOF_
         background-color: var(--bg-primary);
         opacity: 0.8;
       }
+      /* 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; }
+      }
     </style>
     <script>
       (function() {
diff --git a/share/jenny/layout/index.sh b/share/jenny/layout/index.sh
index 68f1faf..05cee5a 100755
--- a/share/jenny/layout/index.sh
+++ b/share/jenny/layout/index.sh
@@ -224,6 +224,12 @@ cat << _EOF_
       .theme-toggle:hover {
         background-color: var(--bg-secondary);
       }
+      /* 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; }
+      }
     </style>
     <script>
       (function() {
diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index 9285d67..2b3110c 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -1055,6 +1055,12 @@ cat << _EOF_
         .theme-toggle:hover {
           background-color: var(--bg-secondary);
         }
+        /* 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; }
+        }
         /* Tooltip styling for footnote and citation references.
            Rendered as real DOM elements so links remain interactive.
            Appears on hover or focus, and survives pointer movement into it. */
diff --git a/share/jenny/layout/post.sh b/share/jenny/layout/post.sh
index 0830c02..fd91be5 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -876,6 +876,12 @@ cat << _EOF_
         .theme-toggle:hover {
           background-color: var(--bg-secondary);
         }
+        /* 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; }
+        }
         /* Tooltip styling for footnote and citation references.
            Rendered as real DOM elements so links remain interactive.
            Appears on hover or focus, and survives pointer movement into it. */