diff options
| author | user <user@clank> | 2026-08-30 15:43:42 +0200 |
|---|---|---|
| committer | user <user@clank> | 2026-08-30 15:43:42 +0200 |
| commit | 37f79de1f52c67fa99af8da8f9f96f5f26604ffb (patch) | |
| tree | e27d1d83ba4d6b6bf48c87fa38fc9a0a71cb9f5a /web/site.css | |
| parent | webdemo: fit with font size, not scale -- a transform misplaces clicks (diff) | |
| download | slosh-37f79de1f52c67fa99af8da8f9f96f5f26604ffb.tar.gz slosh-37f79de1f52c67fa99af8da8f9f96f5f26604ffb.tar.xz slosh-37f79de1f52c67fa99af8da8f9f96f5f26604ffb.zip | |
web: centre the floating logo in the air above the terminal
A fixed top worked at one viewport height and overlapped the pinned
terminal at others: the terminal's top edge is (viewport - the stage's
lift padding) / 2 - half the player, which no constant tracks. Measure
it instead, centre the logo in what remains, and hide it outright when
a short viewport leaves no air -- hiding beats overlapping.
Re-placed on resize and by a ResizeObserver on the player mounts, not
on the pin: the players are zero-height until their casts arrive, and
the pin is a 100vh box that never resizes, so watching it would freeze
the placement at the pre-load height.
Diffstat (limited to 'web/site.css')
| -rw-r--r-- | web/site.css | 3 |
1 files changed, 3 insertions, 0 deletions
diff --git a/web/site.css b/web/site.css index a5b28c4..d9764f9 100644 --- a/web/site.css +++ b/web/site.css @@ -57,6 +57,9 @@ kbd { .logo-float { position: fixed; + /* The resting value only: the script centres it in the air between the + * viewport top and the pinned terminal's top edge, which no fixed number + * tracks across viewport heights. */ top: 13.8rem; /* Centred on the stage column: the tour is layout-centred and the stage * is the 3fr of its 3fr/2fr split, so the terminal's midline sits at |