3ab60c67b6
- html { font-size: clamp(14px, 2.4vmin, 22px) } — single sliding scale; everything in rem (sidebar widths, h2 font-size, paddings) scales together. Phone rotation swaps width/height but vmin stays the same → 1rem stays the same → navbar/footer/h2 hold their size between portrait + landscape.
- :root --sidebar-w: 5rem (replaces the locally-scoped $sidebar-w SCSS var that lived inside @media blocks); --h2-col-w: 3rem for the rotated wordmark column in landscape. var(--sidebar-w) + var(--h2-col-w) are the only knobs that move the layout.
- Landscape container: margin-left = calc(var(--sidebar-w) + var(--h2-col-w)); margin-right = var(--sidebar-w). Applets are now clipped INSIDE the h2 column, so the rotated "BILLPOST" / "DASHBOARD" wordmark never has content bleeding behind it (the original complaint).
- h2 markup refactor across 13 templates: <span>BILL</span><span>POST</span> instead of <span>BILL</span>POST. Portrait styling: display: flex; first span flex 0 0 45% + --quaUser colour; second span flex 0 0 55% + --secUser inherited. Per-span text-align: justify + text-justify: inter-character keeps the inter-letter spacing within each span. Landscape resets the flex (single rotated wordmark, not split).
- Drop the four h2 font-size jumps (min-height: 400/500/800px) — single font-size: 3rem now scales fluidly via root rem. Drop the @media (orientation: landscape) and (max-width: 1100px) h1 override (rem-fluid handles cramped widths). Drop the entire @media (orientation: landscape) and (min-width: 1800px) sidebar-doubling block in _base.scss / _applets.scss / _bud.scss — the rem clamp ceiling already caps the size.
- _bud.scss + _applets.scss: bud-btn / bud-panel / bud-suggestions / gear-btn / applet menus all switch to var(--sidebar-w)-based positioning; landscape rules are single (no per-breakpoint duplication).
- Per-spec tradeoff: non-.btn-primary buttons (BYE / NVM / OK / kit-btn / etc.) inherit rem-fluid like everything else and will scale slightly w. viewport. User explicitly OK'd this — they don't need to stay px-fixed.
- 852 ITs + 24 layout/navbar/bud FTs green; existing geometry assertions are relative or categorical (not exact-px) so the rem clamp doesn't surface failures at the 800x1200 FT viewport.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.7 (1M context) <noreply@anthropic.com>
259 lines
7.0 KiB
SCSS
259 lines
7.0 KiB
SCSS
// ── Gear button ────────────────────────────────────────────
|
|
.gear-btn {
|
|
position: absolute;
|
|
bottom: 0.5rem;
|
|
right: 0.5rem;
|
|
z-index: 1;
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
color: rgba(var(--secUser), 1);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 50%;
|
|
background-color: rgba(var(--priUser), 1);
|
|
border: 0.15rem solid rgba(var(--secUser), 1);
|
|
|
|
&.active {
|
|
color: rgba(var(--quaUser), 1);
|
|
border-color: rgba(var(--quaUser), 1);
|
|
}
|
|
}
|
|
|
|
// ── Applet menu (shared structure) ─────────────────────────
|
|
%applet-menu {
|
|
position: absolute;
|
|
bottom: 3rem;
|
|
right: 0.5rem;
|
|
z-index: 100;
|
|
background-color: rgba(var(--priUser), 0.95);
|
|
border: 0.15rem solid rgba(var(--secUser), 1);
|
|
box-shadow:
|
|
0 0 0.5rem rgba(var(--secUser), 0.75),
|
|
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
|
;
|
|
border-radius: 0.75rem;
|
|
padding: 1rem;
|
|
|
|
.menu-btns {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 0.9em;
|
|
height: 0.9em;
|
|
border: 0.1rem solid rgba(var(--secUser), 0.4);
|
|
border-radius: 0.25rem;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
top: 0.1em;
|
|
|
|
&:checked::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0.2em;
|
|
bottom: 0.2em;
|
|
width: 0.55em;
|
|
height: 1em;
|
|
border: 0.12em solid rgba(var(--ninUser), 1);
|
|
border-top: none;
|
|
border-left: none;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
#id_dash_applet_menu { @extend %applet-menu; }
|
|
#id_game_applet_menu { @extend %applet-menu; }
|
|
#id_game_kit_menu { @extend %applet-menu; }
|
|
#id_wallet_applet_menu { @extend %applet-menu; }
|
|
#id_room_menu { @extend %applet-menu; }
|
|
#id_billboard_applet_menu { @extend %applet-menu; }
|
|
#id_billscroll_menu { @extend %applet-menu; }
|
|
|
|
// Page-level gear buttons — fixed to viewport bottom-right
|
|
.gameboard-page,
|
|
.dashboard-page,
|
|
.wallet-page,
|
|
.room-page,
|
|
.billboard-page,
|
|
.billscroll-page {
|
|
> .gear-btn {
|
|
position: fixed;
|
|
bottom: 4.2rem;
|
|
right: 0.5rem;
|
|
z-index: 314;
|
|
}
|
|
}
|
|
|
|
#id_dash_applet_menu,
|
|
#id_game_applet_menu,
|
|
#id_game_kit_menu,
|
|
#id_wallet_applet_menu,
|
|
#id_billboard_applet_menu,
|
|
#id_billscroll_menu {
|
|
position: fixed;
|
|
bottom: 6.6rem;
|
|
right: 1rem;
|
|
z-index: 312;
|
|
}
|
|
|
|
// In landscape: shift gear btn and applet menus into the footer-sidebar
|
|
// column. Both gear-btn (3rem wide) and the menus are centred in the
|
|
// `var(--sidebar-w)` slot via `right: calc((var(--sidebar-w) - 3rem) / 2)`,
|
|
// which scales with the rem-fluid root — no per-breakpoint override.
|
|
@media (orientation: landscape) {
|
|
.gameboard-page,
|
|
.dashboard-page,
|
|
.wallet-page,
|
|
.room-page,
|
|
.billboard-page,
|
|
.billscroll-page {
|
|
> .gear-btn {
|
|
right: calc((var(--sidebar-w) - 3rem) / 2);
|
|
bottom: 3.95rem;
|
|
top: auto;
|
|
}
|
|
}
|
|
|
|
#id_dash_applet_menu,
|
|
#id_game_applet_menu,
|
|
#id_game_kit_menu,
|
|
#id_wallet_applet_menu,
|
|
#id_room_menu,
|
|
#id_billboard_applet_menu,
|
|
#id_billscroll_menu {
|
|
right: calc((var(--sidebar-w) - 3rem) / 2);
|
|
bottom: 6.6rem;
|
|
top: auto;
|
|
}
|
|
}
|
|
|
|
// ── Applet box visual shell (reusable outside the grid) ────
|
|
%applet-box {
|
|
border:
|
|
0.2rem solid rgba(var(--secUser), 0.5),
|
|
;
|
|
box-shadow:
|
|
inset -0.125rem -0.125rem 0 rgba(var(--ninUser), 0.125),
|
|
inset 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.8)
|
|
;
|
|
background-color: rgba(0, 0, 0, 0.125);
|
|
border-radius: 0.75rem;
|
|
position: relative;
|
|
padding: 0.75rem 0.75rem 0.75rem 2.5rem;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
|
|
// Hide any inner scrollbars (e.g. My Sky applet's #id_applet_sky_form_wrap)
|
|
// so they obey the same scrollbar-less treatment as the page apertures
|
|
// (gameboard / billboard / dashboard apertures already use this same pair
|
|
// — keeps the dark theme consistent w.o. the OS-default white track bleeding
|
|
// through inside an applet).
|
|
*::-webkit-scrollbar { display: none; }
|
|
* { scrollbar-width: none; }
|
|
|
|
> h2 {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
writing-mode: vertical-rl;
|
|
transform: rotate(180deg);
|
|
font-size: 1rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
padding-right: 0.2rem;
|
|
color: rgba(var(--secUser), 1);
|
|
text-shadow:
|
|
1px 1px 0 rgba(255, 255, 255, 0.06),
|
|
-0.06rem -0.06rem 0 rgba(0, 0, 0, 0.25)
|
|
;
|
|
background-color: rgba(0, 0, 0, 0.125);
|
|
box-shadow:
|
|
0 0 0.5rem rgba(var(--priUser), 0.5),
|
|
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.5),
|
|
;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
|
|
a {
|
|
color: rgba(var(--terUser), 1);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: rgba(var(--ninUser), 1);
|
|
text-shadow: 0 0 0.5rem rgba(var(--terUser), 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Applets grid (shared across all boards) ────────────────
|
|
%applets-grid {
|
|
container-type: inline-size;
|
|
--grid-gap: 0.5rem;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-auto-rows: 3rem;
|
|
gap: var(--grid-gap);
|
|
padding: 0.75rem;
|
|
-webkit-overflow-scrolling: touch;
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
black 2%,
|
|
black 99%,
|
|
transparent 100%
|
|
);
|
|
margin-left: 1rem;
|
|
margin-top: 1rem;
|
|
@media (orientation: landscape) and (min-width: 900px) {
|
|
margin-left: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
@media (orientation: landscape) and (min-width: 1800px) {
|
|
margin-left: 4rem;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
section {
|
|
@extend %applet-box;
|
|
grid-column: span var(--applet-cols, 12);
|
|
grid-row: span var(--applet-rows, 3);
|
|
|
|
@container (max-width: 550px) {
|
|
grid-column: span 12;
|
|
}
|
|
}
|
|
}
|
|
|
|
#id_applets_container { @extend %applets-grid; }
|
|
#id_game_applets_container { @extend %applets-grid; }
|
|
#id_wallet_applets_container { @extend %applets-grid; }
|
|
#id_billboard_applets_container { @extend %applets-grid; }
|
|
#id_gk_sections_container { @extend %applets-grid; }
|