diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-28 17:58:40 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-28 17:58:40 -0700 |
| commit | 52e1c3a67a65baea5c98931baf53663a35b001ab (patch) | |
| tree | 743bc3b0192370d494d8771b23d5cdee7aa62bc6 /index.html | |
| parent | 2ed8368a7972eda05fa1d9abb73194cfb31a1baa (diff) | |
aero: scale desktop to fit smaller monitors
Use a JS-driven `zoom` on <html> computed from viewport vs a 1440x900
baseline (clamped at 0.55) so absolutely-positioned windows, icons,
and the taskbar stop overlapping on lower-res displays.
Diffstat (limited to 'index.html')
| -rwxr-xr-x | index.html | 16 |
1 files changed, 16 insertions, 0 deletions
@@ -282,6 +282,22 @@ </head> <body> <script>(function(){var t=localStorage.getItem('tyler.theme')||'aero';document.body.setAttribute('data-theme',t);})();</script> + <script> + // Scale the whole desktop to fit smaller monitors. Layout is designed around + // ~1440x900; below that, windows overlap and icons run off the bottom edge. + // `zoom` scales positions, sizes, fonts, AND pointer coords together, so + // drag/resize math stays consistent. + (function(){ + var BASE_W = 1440, BASE_H = 900, MIN = 0.55; + function fit(){ + 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; + } + fit(); + window.addEventListener('resize', fit); + })(); + </script> <div class="desk" id="desk"> <div class="sun" style="background: var(--sun);"></div> <div class="lens-flare"></div> |