game-views: footer billboard icon fa-scroll → fa-receipt; pin the views strip to the aperture bottom

Two follow-ups to the carousel sprint:

- The footer's billboard nav icon was fa-scroll, which now collides semantically with the carousel's SCROLL view; FA's billboard glyph is paywalled, so the billboard nav uses fa-receipt (ledger/scroll) instead. The footer FT selects by href, so navigation is unaffected.
- #id_room_views_strip was position:fixed (viewport bottom) and rendered down in the fixed footer/burger zone. Switched to position:absolute so it anchors to .room-page's bottom — and since the aperture fills .room-page via inset:0, that IS the bottom of the views pane, clear of the fixed footer. Still a sibling of the aperture (escapes the scroll-card fade mask + scroll clip); .room-page's overflow:hidden doesn't clip it (stays in bounds). Strip-visibility + landscape-within-viewport FTs still green.

[[project-room-game-views-carousel]]
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-02 13:25:04 -04:00
parent f036c8f461
commit 28d1d126bb
2 changed files with 13 additions and 8 deletions

View File

@@ -264,15 +264,17 @@ html.sea-open #id_aperture_fill {
}
// ── Game-views icon strip ─────────────────────────────────────────────────
// Root-level (sibling of the aperture) + position:fixed so it escapes the
// aperture scroll clip and the scroll card's fade mask — the same root-
// stacking trick as the tooltip portals. Hidden at the hex; room-views.js
// adds `.is-visible` while the views pane is on screen. Sits centred at the
// viewport bottom in BOTH orientations, so it always clears the mask + stays
// within the viewport (landscape gutters are 5rem each → ample room).
// Sibling of the aperture inside .room-page (NOT a child of the aperture) so
// it escapes the aperture's scroll clip + the scroll card's fade mask — the
// same root-stacking trick as the tooltip portals. position:absolute anchors
// it to the BOTTOM OF THE APERTURE (.room-page is position:relative and the
// aperture fills it via inset:0), NOT the viewport bottom — so it sits at the
// foot of the views pane, clear of the fixed burger/gear/footer below. Hidden
// at the hex; room-views.js adds `.is-visible` while the views pane is on
// screen. .room-page's overflow:hidden doesn't clip it (it stays in bounds).
.room-views-strip {
display: none;
position: fixed;
position: absolute;
bottom: 0.85rem;
left: 50%;
transform: translateX(-50%);