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:
@@ -61,11 +61,13 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Landscape: right clears gear/kit buttons (~4rem); bottom is fixed 60px for
|
// Landscape: right clears gear/kit buttons; bottom is fixed 60px for the
|
||||||
// the kit-bag handle strip — tray is ignored so the stage has room to breathe.
|
// 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) {
|
if (isLandscape) {
|
||||||
rightInset = Math.max(rightInset, 64); // 4rem
|
var xlBreak = vw >= 1800;
|
||||||
bottomInset = 60; // kit-bag handle
|
rightInset = Math.max(rightInset, xlBreak ? 128 : 64);
|
||||||
|
bottomInset = 60;
|
||||||
}
|
}
|
||||||
|
|
||||||
overlay.style.paddingRight = rightInset + 'px';
|
overlay.style.paddingRight = rightInset + 'px';
|
||||||
|
|||||||
@@ -110,6 +110,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// In landscape: shift gear btn and applet menus left of the footer right sidebar
|
// 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) {
|
@media (orientation: landscape) {
|
||||||
$sidebar-w: 4rem;
|
$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 visual shell (reusable outside the grid) ────
|
||||||
%applet-box {
|
%applet-box {
|
||||||
border:
|
border:
|
||||||
|
|||||||
@@ -35,6 +35,7 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -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) {
|
@media (orientation: portrait) and (max-width: 500px) {
|
||||||
body .container {
|
body .container {
|
||||||
.navbar {
|
.navbar {
|
||||||
|
|||||||
@@ -9,6 +9,10 @@
|
|||||||
top: auto;
|
top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (orientation: landscape) and (min-width: 1800px) {
|
||||||
|
right: 2.5rem; // centre in doubled 8rem sidebar
|
||||||
|
}
|
||||||
|
|
||||||
z-index: 318;
|
z-index: 318;
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@@ -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 ─────────────────────────────────────────────
|
// ─── Seat tray — see _tray.scss ─────────────────────────────────────────────
|
||||||
|
|||||||
@@ -328,3 +328,11 @@ $handle-r: 1rem;
|
|||||||
80% { transform: translateY(-3px); }
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user