Spaces:
Running
Running
File size: 4,253 Bytes
e16348e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | /* ── Large-screen scaling (explorer page, >1180px) ──────────────────────
Root font size is 100% up to a 1536x780 window and rises to at most
125% (20px), following the window's vw/vh; the smaller term applies:
width term : 13px + 0.1953vw (16px @1536, 18px @2560, 20px @3584)
height term: 12.55px + 0.442vh (16px @780, 18.3px @1300)
--board-size fills the window height up to --board-size-max. Scoped to
html.explorer (set in templates/index.html and frontend/index.html); the
px-based admin page keeps the 16px baseline. At <=1180px both keep their
base values. */
@media (min-width: 1181px) {
html.explorer {
font-size: clamp(100%, min(81.25% + 0.1953vw, 78.5% + 0.442vh), 125%);
}
:root {
/* Widest the three-column row may grow. */
--content-max: 112rem;
/* Height budget: 100vh minus header 3rem, content padding 2.25rem,
FEN bar/error/turn rows ~8.9rem, tray borders (0.625rem
+ 4px) and ~1rem slack for a wrapped error message = 15.75rem + 4px.
The remainder holds the board and its two trays: 1.25 x board.
Update when the height above the board changes. */
/* Reserve controls at the largest font size allowed by this height.
Using the current rem would shrink the board as a wider window
scales the text up, even though its height has not changed. */
--board-height-font-size: clamp(16px, calc(12.56px + 0.442vh), 20px);
--board-fit-h: calc((100vh - 15.75 * var(--board-height-font-size) - 4px) / 1.25);
/* Width budget: padding 4rem + gaps 3rem + results panel 50rem,
plus the PGN column. Reserve enough for the results' 49rem
four-metric breakpoint and borders before growing the board. */
--board-fit-w: calc(min(100vw, var(--content-max)) - 57rem - var(--pgn-col-w));
/* Floor 20.5rem (328px at a 16px root, a multiple of 8px); the page
scrolls below it. The floor must stay above the FEN toolbar's
minimum content width (321px at a 16px root: four labelled
buttons, Back, Next and five gaps), otherwise Next sticks out
past the Lock button's right edge. Re-check it when a toolbar
button or its padding changes. --board-size-max caps the result,
and the results column takes the width the board column does not
use. */
--board-size: min(var(--board-size-max), max(20.5rem, min(var(--board-fit-h), var(--board-fit-w))));
}
/* The results and PGN columns take the row height set by the board
column and scroll their content internally. */
.right-col, .pgn-col { contain: size; }
.content { align-content: start; }
}
/* ── Layout ─────────────────────────────────────────────────────────── */
:root { --pgn-col-w: 16rem; }
.content {
display: grid;
grid-template-columns: var(--board-size) minmax(21.25rem, 1fr) var(--pgn-col-w);
gap: var(--space-5);
padding: 1.125rem var(--space-6);
min-height: calc(100vh - var(--header-h));
min-height: calc(100dvh - var(--header-h));
max-width: var(--content-max, 96.25rem);
margin: 0 auto;
overflow: visible;
}
/* ── Left column ────────────────────────────────────────────────────── */
.left-col {
display: flex;
flex-direction: column;
gap: 0.5625rem;
min-height: 26rem;
}
/* ── Right column ───────────────────────────────────────────────────── */
.right-col {
min-width: 0;
min-height: 22rem;
display: flex;
flex-direction: column;
}
/* ── PGN column ─────────────────────────────────────────────────────── */
.pgn-col {
min-height: 22rem;
display: flex;
flex-direction: column;
}
|