diff --git a/src/apps/epic/static/apps/epic/room.js b/src/apps/epic/static/apps/epic/room.js index ae79943..9f144df 100644 --- a/src/apps/epic/static/apps/epic/room.js +++ b/src/apps/epic/static/apps/epic/room.js @@ -61,11 +61,13 @@ } }); - // Landscape: right clears gear/kit buttons (~4rem); bottom is fixed 60px for - // the kit-bag handle strip — tray is ignored so the stage has room to breathe. + // Landscape: right clears gear/kit buttons; bottom is fixed 60px for the + // kit-bag handle strip — tray is ignored so the stage has room to breathe. + // At ≥1800px the right sidebar doubles to 8rem so clear 128px. if (isLandscape) { - rightInset = Math.max(rightInset, 64); // 4rem - bottomInset = 60; // kit-bag handle + var xlBreak = vw >= 1800; + rightInset = Math.max(rightInset, xlBreak ? 128 : 64); + bottomInset = 60; } overlay.style.paddingRight = rightInset + 'px'; diff --git a/src/static_src/scss/_applets.scss b/src/static_src/scss/_applets.scss index eb56c27..43ffa06 100644 --- a/src/static_src/scss/_applets.scss +++ b/src/static_src/scss/_applets.scss @@ -110,6 +110,7 @@ } // In landscape: shift gear btn and applet menus left of the footer right sidebar +// XL override below doubles sidebar to 8rem — centre items in the wider column. @media (orientation: landscape) { $sidebar-w: 4rem; @@ -137,6 +138,24 @@ } } +@media (orientation: landscape) and (min-width: 1800px) { + // Centre gear btn and menus in the doubled 8rem sidebar (was 0.5rem from right edge) + .gameboard-page, + .dashboard-page, + .wallet-page, + .room-page, + .billboard-page { + > .gear-btn { right: 2.5rem; } + } + + #id_dash_applet_menu, + #id_game_applet_menu, + #id_game_kit_menu, + #id_wallet_applet_menu, + #id_room_menu, + #id_billboard_applet_menu { right: 2rem; } +} + // ── Applet box visual shell (reusable outside the grid) ──── %applet-box { border: diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index 579e310..f746cd3 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -34,6 +34,7 @@ body { font-size: 2rem; } } + .container-fluid { display: flex; @@ -358,6 +359,58 @@ body { } } +// ── XL landscape (≥1800px): double sidebar widths and scale content ──────────── +@media (orientation: landscape) and (min-width: 1800px) { + $sidebar-xl: 8rem; + + body .container .navbar { + width: $sidebar-xl; + + .container-fluid { + gap: 2rem; + padding: 0 0.5rem; + } + + .navbar-brand h1 { font-size: 2.4rem; } + .navbar-text { font-size: 1.3rem; } + + .btn-primary { + width: 5rem; + height: 5rem; + font-size: 1.125rem; + } + + .input-group { + left: $sidebar-xl; + right: $sidebar-xl; + } + } + + body .container { + margin-left: $sidebar-xl; + margin-right: $sidebar-xl; + } + + // h2 page title: portrait-style — centred and full-size on a wide canvas + body .container .row .col-lg-6 h2 { + font-size: 2rem; + letter-spacing: 0.33em; + text-align: center; + text-align-last: center; + } + + body #id_footer { + width: $sidebar-xl; + + #id_footer_nav { + gap: 4rem; + a { font-size: 3rem; } + } + + .footer-container { font-size: 0.85rem; } + } +} + @media (orientation: portrait) and (max-width: 500px) { body .container { .navbar { diff --git a/src/static_src/scss/_game-kit.scss b/src/static_src/scss/_game-kit.scss index 412d53b..a484042 100644 --- a/src/static_src/scss/_game-kit.scss +++ b/src/static_src/scss/_game-kit.scss @@ -9,6 +9,10 @@ top: auto; } + @media (orientation: landscape) and (min-width: 1800px) { + right: 2.5rem; // centre in doubled 8rem sidebar + } + z-index: 318; font-size: 1.75rem; cursor: pointer; diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss index 8a00789..ff54dd2 100644 --- a/src/static_src/scss/_room.scss +++ b/src/static_src/scss/_room.scss @@ -1098,4 +1098,9 @@ html:has(.sig-backdrop) { } } +@media (orientation: landscape) and (min-width: 1800px) { + // Sig overlay: clear doubled navbar sidebar (8rem instead of 4rem) + .sig-overlay { padding-left: 8rem; } +} + // ─── Seat tray — see _tray.scss ───────────────────────────────────────────── diff --git a/src/static_src/scss/_tray.scss b/src/static_src/scss/_tray.scss index ef050c5..0a18971 100644 --- a/src/static_src/scss/_tray.scss +++ b/src/static_src/scss/_tray.scss @@ -328,3 +328,11 @@ $handle-r: 1rem; 80% { transform: translateY(-3px); } } } + +// ── XL landscape: tray spans between doubled 8rem sidebars ───────────────── +@media (orientation: landscape) and (min-width: 1800px) { + #id_tray_wrap { + left: 8rem; + right: 8rem; + } +}