diff options
| -rw-r--r-- | aero.js | 31 | ||||
| -rwxr-xr-x | index.html | 9 |
2 files changed, 28 insertions, 12 deletions
@@ -69,16 +69,18 @@ function makeDraggable(el, handle) { if (e.target.closest('.no-drag')) return; dragging = true; sx = e.clientX; sy = e.clientY; + const z = window.__uiScale || 1; const r = el.getBoundingClientRect(); const p = el.offsetParent.getBoundingClientRect(); - ox = r.left - p.left; oy = r.top - p.top; + ox = (r.left - p.left) / z; oy = (r.top - p.top) / z; el.style.zIndex = (++window.__zTop || (window.__zTop = 100)); e.preventDefault(); }); window.addEventListener('mousemove', (e) => { if (!dragging) return; - el.style.left = (ox + e.clientX - sx) + 'px'; - el.style.top = (oy + e.clientY - sy) + 'px'; + const z = window.__uiScale || 1; + el.style.left = (ox + (e.clientX - sx) / z) + 'px'; + el.style.top = (oy + (e.clientY - sy) / z) + 'px'; }); window.addEventListener('mouseup', () => { dragging = false; }); } @@ -98,8 +100,12 @@ function makeResizable(el, options = {}) { e.preventDefault(); e.stopPropagation(); mode = m; sx = e.clientX; sy = e.clientY; + const z = window.__uiScale || 1; const r = el.getBoundingClientRect(); - sw = r.width; sh = r.height; + sw = r.width / z; sh = r.height / z; + // Lock the baseline the first time this window is resized — content + // scale is measured against this so text grows/shrinks with the window. + if (el.__baseW == null) { el.__baseW = sw; el.__baseH = sh; } // pin current size as inline so first move doesn't snap el.style.width = sw + 'px'; el.style.height = sh + 'px'; @@ -109,12 +115,21 @@ function makeResizable(el, options = {}) { window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); } + function applyContentScale(w, h) { + const cs = Math.min(w / el.__baseW, h / el.__baseH); + el.querySelectorAll(':scope > .body, :scope > .browser, :scope > .titlebar') + .forEach(n => { n.style.zoom = cs; }); + } function onMove(e) { if (!mode) return; - const dx = e.clientX - sx; - const dy = e.clientY - sy; - if (mode.includes('e')) el.style.width = Math.max(minW, sw + dx) + 'px'; - if (mode.includes('s')) el.style.height = Math.max(minH, sh + dy) + 'px'; + const z = window.__uiScale || 1; + const dx = (e.clientX - sx) / z; + const dy = (e.clientY - sy) / z; + const w = mode.includes('e') ? Math.max(minW, sw + dx) : parseFloat(el.style.width) || sw; + const h = mode.includes('s') ? Math.max(minH, sh + dy) : parseFloat(el.style.height) || sh; + if (mode.includes('e')) el.style.width = w + 'px'; + if (mode.includes('s')) el.style.height = h + 'px'; + applyContentScale(w, h); } function onUp() { mode = null; @@ -293,6 +293,7 @@ var s = Math.min(window.innerWidth / BASE_W, window.innerHeight / BASE_H); s = Math.min(1, Math.max(MIN, s)); document.documentElement.style.zoom = s; + window.__uiScale = s; } fit(); window.addEventListener('resize', fit); @@ -545,7 +546,7 @@ <div class="win glass" id="w-neighbors" style="left: 880px; top: 220px; width: 340px; display: none;"> <div class="titlebar" style="background: var(--title-bar);"><div class="dots"><div class="dot r no-drag" onclick="this.closest('.win').style.display='none'"></div><div class="dot y"></div><div class="dot g"></div></div>Neighbors — the indie web</div> <div class="body"> - <div style="font-size: 11px; opacity: 0.7; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1.5px;">friends & favorite homepages · 6 of 19</div> + <div style="font-size: 11px; opacity: 0.7; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1.5px;">friends & favorite homepages · </div> <div class="bud-list"> <div class="bud-row"><div class="bud-led on"></div><div><div class="bud-name">trinh's garden 🌿</div><div class="bud-host">trinh.computer</div></div><div class="bud-mood">repotting a monstera</div></div> <div class="bud-row"><div class="bud-led on"></div><div><div class="bud-name">jay's mixtapes</div><div class="bud-host">jaylim.fm</div></div><div class="bud-mood">new bossa nova set</div></div> @@ -576,9 +577,9 @@ <!-- STICKY NOTE pinned to desktop --> <div class="sticky-note" id="sticky" style="right: 32px; top: 96px;"> <div class="sn-head">remember</div> - water the basil · ☕<br/> - call mom on sunday<br/> - finish thesis ch. <span class="sn-underline">3</span> by friday<br/> + be mindful<br/> + love my wife.<br/> + study for cfa !!!<br/> <span style="opacity:0.7">— and stop checking</span><br/> <span style="opacity:0.7">the news so much</span> <span class="sn-sig">— t.</span> |