XL landscape breakpoint (≥1800px): double sidebar widths + scale content

- _base.scss: new @media (orientation:landscape) and (min-width:1800px) block —
  sidebars 4rem→8rem; navbar btn 3rem→5rem; brand h1 1.2rem→2.4rem; navbar-text
  0.65rem→1.3rem; footer icons 1.75rem→3rem; nav gap 3rem→4rem; footer-container
  0.55rem→0.85rem; container margins 4rem→8rem; h2 portrait-style (2rem, centred)
- _applets.scss: gear btn right 0.5rem→2.5rem; menus right 0.5rem→2rem at ≥1800px
- _game-kit.scss: kit btn right 0.5rem→2.5rem at ≥1800px
- _room.scss: sig-overlay padding-left 4rem→8rem at ≥1800px
- _tray.scss: tray wrap left/right 4rem→8rem at ≥1800px
- room.js: sizeSigModal right inset 64px→128px at ≥1800px viewport width

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-04-06 01:41:18 -04:00
parent 99a69202b9
commit 6654785f25
6 changed files with 95 additions and 4 deletions

View File

@@ -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';

View File

@@ -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:

View File

@@ -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 {

View File

@@ -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;

View File

@@ -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 ─────────────────────────────────────────────

View File

@@ -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;
}
}