From 7e3f36c54385f947703d99e28186d9381cc9c40e Mon Sep 17 00:00:00 2001 From: Me Here Date: Mon, 25 May 2026 14:20:58 -0500 Subject: [PATCH] Header: keyboard legend left under title; responsive wrap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move the shortcut legend to the left, directly under the title (was right-aligned), and break it into non-breaking segments so it wraps only between groups (at the · separators), never mid-token. - Header row now wraps: on narrow screens the buttons + logo sit on their own line above the legend (controls use margin-left:auto to stay right). - Drop the rule that hid the legend below 620px — it now shows and wraps. Co-Authored-By: Claude Opus 4.7 (1M context) --- index.html | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 96229d2..99245b2 100644 --- a/index.html +++ b/index.html @@ -61,7 +61,8 @@ } h1 { font-size:18px; font-weight:600; letter-spacing:.5px; margin:0 0 2px; } .sub { color:var(--muted); font-size:12px; margin-bottom:18px; } - .kbd-legend { color:var(--muted); font-size:13px; font-family:"Courier New",monospace; text-align:right; } + .kbd-legend { color:var(--muted); font-size:13px; font-family:"Courier New",monospace; text-align:left; line-height:1.75; } + .kbd-legend span { white-space:nowrap; } /* wrap only between shortcut groups, never mid-token */ #app { display:flex; gap:18px; max-width:1400px; margin:0 auto; align-items:flex-start; justify-content:center; } .device { flex:1 1 auto; min-width:0; max-width:1000px; background:linear-gradient(180deg, var(--panel), var(--bg)); border:1px solid var(--edge); border-radius:16px; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.5); } @@ -180,7 +181,6 @@ .practice-col { border-left:none; padding-left:0; border-top:1px solid var(--edge); padding-top:12px; margin-top:4px; } } @media (max-width: 620px) { - .kbd-legend { display:none; } /* the ? overlay covers discovery on small screens */ #routineTray { width:100%; } .meter-card .led { width:24px; height:24px; } } @@ -210,11 +210,9 @@