VARASYS/metronome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Header: keyboard legend left under title; responsive wrap

Browse source 
- 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) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-05-25 14:20:58 -05:00
parent 1dd83065ea
commit 7e3f36c543
1 changed files with 6 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -61,7 +61,8 @@
} }
h1 { font-size:18px; font-weight:600; letter-spacing:.5px; margin:0 0 2px; } h1 { font-size:18px; font-weight:600; letter-spacing:.5px; margin:0 0 2px; }
.sub { color:var(--muted); font-size:12px; margin-bottom:18px; } .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; } #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)); .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); } 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; } .practice-col { border-left:none; padding-left:0; border-top:1px solid var(--edge); padding-top:12px; margin-top:4px; }
} }
@media (max-width: 620px) { @media (max-width: 620px) {
.kbd-legend { display:none; } /* the ? overlay covers discovery on small screens */
#routineTray { width:100%; } #routineTray { width:100%; }
.meter-card .led { width:24px; height:24px; } .meter-card .led { width:24px; height:24px; }
} }
@ -210,11 +210,9 @@
<body> <body>
<div id="app"> <div id="app">
<div class="device"> <div class="device">
<div class="row" style="align-items:center; justify-content:space-between; gap:14px; margin-bottom:6px"> <div class="row" style="align-items:center; flex-wrap:wrap; gap:6px 14px; margin-bottom:8px">
<div style="display:flex; align-items:center; gap:14px; min-width:0"> <h1 style="margin:0">Stackable Metronome <span class="lane-meta" id="appVersion" title="build version">v0.0.1-dev</span></h1>
<h1 style="margin:0">Stackable Metronome <span class="lane-meta" id="appVersion" title="build version">v0.0.1-dev</span></h1> <div style="display:flex; align-items:center; gap:10px; margin-left:auto">
</div>
<div style="display:flex; align-items:center; gap:10px">
<button id="themeBtn" title="toggle light / dark theme">☀</button> <button id="themeBtn" title="toggle light / dark theme">☀</button>
<button id="helpBtn" title="keyboard shortcuts (?)">?</button> <button id="helpBtn" title="keyboard shortcuts (?)">?</button>
<a class="brand" href="https://varasys.io" target="_blank" rel="noopener" <a class="brand" href="https://varasys.io" target="_blank" rel="noopener"
@ -224,7 +222,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="kbd-legend" style="margin-bottom:12px">Space play · T tap · ←→ tempo · ↑↓ cue · ⏎ commit · N/P step · A add · ? help</div> <div class="kbd-legend" style="margin-bottom:12px"><span>Space play</span> <span>· T tap</span> <span>· ←→ tempo</span> <span>· ↑↓ cue</span> <span>· ⏎ commit</span> <span>· N/P step</span> <span>· A add</span> <span>· ? help</span></div>
<!-- Transport: display + preset/tempo/volume + practice, in three columns --> <!-- Transport: display + preset/tempo/volume + practice, in three columns -->
<div class="row"> <div class="row">