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

pm_e-2: logo-in-device top-left + header/footer fill (match editor.html)

Browse source
This commit is contained in:
Me Here 2026-06-02 13:45:26 -05:00
parent e9adbc5f02
commit 49a4308c4b
1 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
pm_e-2.html
View file

@ -73,6 +73,12 @@
.kbd-legend span { white-space:nowrap; } /* wrap only between shortcut groups, never mid-token */ .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 */ .appheader-ctrls { margin-left:auto; } /* push controls right on wide; narrow media query resets to left */
#app { display:flex; gap:18px; max-width:none; margin:0 auto; align-items:flex-start; justify-content:center; } #app { display:flex; gap:18px; max-width:none; margin:0 auto; align-items:flex-start; justify-content:center; }
/* Logo lives in the device's top-left corner (not the header); header fills + keeps just nav. */
.site-head, .site-foot { max-width:none; }
.site-head .brand { display:none; }
.site-head { justify-content:flex-end; }
.devbrand { line-height:0; }
.devbrand .brand-logo { height:30px; }
.device { flex:1 1 auto; min-width:0; max-width:none; background:linear-gradient(180deg, var(--panel), var(--bg)); .device { flex:1 1 auto; min-width:0; max-width:none; 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); }
.row { display:flex; gap:18px; flex-wrap:wrap; } .row { display:flex; gap:18px; flex-wrap:wrap; }
@ -277,6 +283,10 @@
<div id="app"> <div id="app">
<div class="device"> <div class="device">
<div class="row appheader" 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">
<a class="brand devbrand" href="/" title="VARASYS — Simplifying Complexity" style="flex:0 0 auto">
<img class="brand-logo brand-dark" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS — Simplifying Complexity" />
<img class="brand-logo brand-light" src="data:image/png;base64,@BUILD:logo-light@" alt="VARASYS — Simplifying Complexity" />
</a>
<h1 style="margin:0">PM_E‑2 <span style="font-weight:400; opacity:.75">PolyMeter Editor</span> <span style="font-weight:400; opacity:.5; font-size:12px">Notation</span></h1> <h1 style="margin:0">PM_E‑2 <span style="font-weight:400; opacity:.75">PolyMeter Editor</span> <span style="font-weight:400; opacity:.5; font-size:12px">Notation</span></h1>
<div class="appheader-ctrls" style="display:flex; align-items:center; gap:10px"> <div class="appheader-ctrls" style="display:flex; align-items:center; gap:10px">
<span id="devBadge" title="USB-MIDI link to a PM_K-1 / PM_X-1 (Chrome/Edge/Firefox). Click to connect." style="cursor:pointer; font-size:12px; padding:3px 9px; border-radius:7px; border:1px solid var(--edge); color:var(--muted); white-space:nowrap">◎ connect device</span> <span id="devBadge" title="USB-MIDI link to a PM_K-1 / PM_X-1 (Chrome/Edge/Firefox). Click to connect." style="cursor:pointer; font-size:12px; padding:3px 9px; border-radius:7px; border:1px solid var(--edge); color:var(--muted); white-space:nowrap">◎ connect device</span>