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:
@@ -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%);
|
||||
|
||||
Reference in New Issue
Block a user