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

Header: stack logo + buttons above the title on narrow screens

Browse source 
Below 580px the header becomes a column-reverse so the controls (theme,
help, logo) sit above the title, then the legend — all left-aligned.
Uses !important to beat the inline align-items/flex-wrap on the row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-05-25 14:34:42 -05:00
parent 08c9de945f
commit b189fa1fef
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -63,6 +63,7 @@
.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:left; line-height:1.75; }
.kbd-legend span { white-space:nowrap; } /* wrap only between shortcut groups, never mid-token */
.appheader-ctrls { margin-left:auto; } /* push controls right on wide; narrow media query resets to left */
#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,6 +181,10 @@
/* when the practice column wraps under the others, swap its side rule for a top one */
.practice-col { border-left:none; padding-left:0; border-top:1px solid var(--edge); padding-top:12px; margin-top:4px; }
}
@media (max-width: 580px) { /* narrow: stack the header with logo + buttons above the title */
.appheader { flex-direction: column-reverse; align-items: flex-start !important; flex-wrap: nowrap !important; } /* !important beats the inline align-items/flex-wrap */
.appheader .appheader-ctrls { margin-left: 0; }
}
@media (max-width: 620px) {
#routineTray { width:100%; }
.meter-card .led { width:24px; height:24px; }
@ -210,9 +215,9 @@
<body>
<div id="app">
<div class="device">
<div class="row" style="align-items:center; flex-wrap:wrap; gap:6px 14px; margin-bottom:8px">
<div class="row appheader" style="align-items:center; flex-wrap:wrap; gap:6px 14px; margin-bottom:8px">
<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 class="appheader-ctrls" style="display:flex; align-items:center; gap:10px">
<button id="themeBtn" title="toggle light / dark theme">☀</button>
<button id="helpBtn" title="keyboard shortcuts (?)">?</button>
<a class="brand" href="https://varasys.io" target="_blank" rel="noopener"