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

editor: move VARASYS logo into the device top-left (out of the site header)

Browse source 
Add the brand lockup to the device .appheader (before the PM_E-1 title) and hide it in
.site-head, leaving the header with just nav (pushed right). Device logo sized to 30px.
Applies to editor.html + editor-beta.html.
This commit is contained in:
Me Here 2026-06-02 08:25:59 -05:00
parent 8049ab8d61
commit 390c974a5f
2 changed files with 18 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
editor-beta.html
View file

@ -76,6 +76,11 @@
up with the editor's left edge. */
#app { display:flex; gap:18px; max-width:none; margin:0 auto; align-items:flex-start; justify-content:center; }
.site-head, .site-foot { max-width:none; }
/* Logo lives in the device's top-left corner (not the header) on the editor; header keeps just nav. */
.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));
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; }
@ -261,6 +266,10 @@
<div id="app">
<div class="device">
<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‑1 <span style="font-weight:400; opacity:.75">PolyMeter Editor</span> <span style="font-size:11px; font-weight:600; letter-spacing:.5px; color:#fff; background:#7b3fb8; border-radius:6px; padding:2px 7px; vertical-align:middle">LIVE SYNC β</span></h1>
<div class="appheader-ctrls" style="display:flex; align-items:center; gap:10px">
<button id="helpBtn" title="keyboard shortcuts (?)">?</button>

9
editor.html
View file

@ -76,6 +76,11 @@
up with the editor's left edge. */
#app { display:flex; gap:18px; max-width:none; margin:0 auto; align-items:flex-start; justify-content:center; }
.site-head, .site-foot { max-width:none; }
/* Logo lives in the device's top-left corner (not the header) on the editor; header keeps just nav. */
.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));
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; }
@ -261,6 +266,10 @@
<div id="app">
<div class="device">
<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‑1 <span style="font-weight:400; opacity:.75">PolyMeter Editor</span></h1>
<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>