dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

responsive desktop: shrink icons on cramped viewports so they never collide; clamp windows to the viewport

Browse source
This commit is contained in:
Martin Dvořák 2026-09-24 12:48:01 +00:00
commit 194501e467
4 changed files with 136 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/app/skeuo.css
View file

@ -163,6 +163,75 @@ a.win-icon {
opacity: 0.92;
}
/* Cramped desktops: shrink the icons so the grid always has a cell for every
icon (so they can never collide) and the launcher stacks stay on screen. The
grid is measured from the rendered icons, so it adapts automatically. */
@media (max-width: 900px), (max-height: 600px) {
.win-icon {
width: 80px;
padding: 5px 4px 7px;
gap: 6px;
}
.win-icon-glyph {
width: 40px;
height: 40px;
font-size: 32px;
}
.win-icon-label {
font-size: 0.68rem;
}
.win-icon-img {
width: 32px;
height: 32px;
}
}
@media (max-width: 720px), (max-height: 440px) {
.win-icon {
width: 66px;
padding: 4px 3px 5px;
gap: 4px;
}
.win-icon-glyph {
width: 32px;
height: 32px;
font-size: 26px;
}
.win-icon-label {
font-size: 0.6rem;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.win-icon-img {
width: 26px;
height: 26px;
}
}
@media (max-height: 380px) {
.win-icon {
width: 56px;
padding: 3px 3px 4px;
gap: 3px;
}
.win-icon-glyph {
width: 28px;
height: 28px;
font-size: 22px;
}
.win-icon-label {
font-size: 0.54rem;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.win-icon-img {
width: 22px;
height: 22px;
}
}
/* The three default stacks are laid out once so the grid columns can be read
off them. They stay in the DOM (keeping the same metrics) but must never be
seen or clicked - the visible icons all come from .win-icon-layer. */
@ -246,6 +315,16 @@ a.win-icon {
top: 0;
bottom: 54px;
margin: auto;
/* Never let a centred window (e.g. Welcome) overflow a small viewport. */
max-width: calc(100vw - 20px);
max-height: calc(100vh - 74px);
}
/* On very short viewports the default min-height would win over max-height and
push the window off-screen; let it shrink further so it still fits. */
@media (max-height: 320px) {
.win-window {
min-height: 110px;
}
}
.win-window.closing {
animation: winClose 0.14s ease-in forwards;