/* ============================================================================ split.css — EXPERIMENT (branch design/board-timeline-split) The home page as one screen instead of two: the ranking is the main column and the timeline runs beside it as a thin rail — the board is what you came for, the feed is what's happening while you look. The page does NOT grow to make room. The two columns divide the same 1080px the board has always had to itself, so the page keeps its measure and the split is a re-cut of it rather than a wider site. It starts just above tablet width (900px), so the split is what you see on anything from a small laptop up — not a reward for a very wide window. That range is most of its life, and .pagecol is below its 1080 cap for nearly all of it, so both columns and the board's own row are sized fluidly rather than in fixed pixels. See the two track blocks below. It is ONE page, not two panes: a single scroll carries both columns, nothing is pinned and nothing has an inner scrollbar. And because the timeline is on screen, TIMELINE leaves the menu while the rail is up. Below the breakpoint the rail is not stacked, shrunk or hidden — it is not built at all, and the timeline goes back to being its own page, with its menu link back. app.js owns that decision (RAIL_MQ / syncRail), because a rail that CSS merely hides would still be swallowing live posts and clearing the nav's unread dot for a reader who cannot see it. Everything here keys off body.on-split, which app.js sets only when the rail is genuinely up. One block near the bottom is deliberately NOT scoped to .on-split: the board's own row metrics. See the note there. ========================================================================== */ /* --- the two columns ------------------------------------------------------- .pagecol is a flex item of that normally shrinks to the board's own width (see the .pagecol comment in style.css). On the split it takes the full line and becomes the grid itself, so the season strip and the board stay in column 1 — the strip heads the BOARD, never the rail — and the rail sits in the board's own row, starting level with the ladder rather than with the strip. max-width is inherited untouched from .pagecol: 1080, same as always. But the split now starts at 900px (see RAIL_MQ), well below that cap, so for most of its range .pagecol is the window rather than 1080 and the tracks have to give. The rail is therefore a percentage between two hard stops instead of a fixed width: it holds 330px wherever there is room, never falls under 286, and takes the squeeze in between so the board keeps the larger share of every width. The percentage resolves against .pagecol, not the viewport — which is what we actually care about, since above 1080 the window keeps growing and this column does not. */ body.on-split .pagecol { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(286px, 31%, 330px); /* Three rows: the season name, the sponsors' banner, then the board. They used to be two, with the name and the banner sharing one — but the rail has to be able to begin BETWEEN them, and a grid item cannot start half way inside another one. */ grid-template-rows: auto auto minmax(0, 1fr); column-gap: 14px; align-items: start; } /* #seasonhost is a plain wrapper the page chrome owns; on the split it steps out of the way so its two children — the name and the banner — become grid items in their own right and can be put on different rows. Its own padding is re-paid on them below (20px host + 3px child = the 23px inset they have off the split). */ body.on-split .seasonhost { display: contents; } body.on-split .seasonhost > .seasonbar { grid-column: 1; grid-row: 1; padding: 0 23px 10px; margin-top: 12px; } body.on-split .seasonhost > .sponsorstrip { grid-column: 1; grid-row: 2; margin: 0 23px; } body.on-split .app { grid-column: 1; grid-row: 3; min-width: 0; } /* The rail runs from the BANNER's row to the bottom. The season name is still the one thing allowed to sit above it — that names the board, not the feed — but the sponsors are the house's, not the board's, so the rail begins level with their banner and the two columns square off along its top edge. With no sponsors the banner's row has nothing in it, collapses to zero, and the rail starts exactly where the ladder starts, which is what it did before. No conditional rule needed: the empty row IS the condition. */ body.on-split .homerail { grid-column: 2; grid-row: 2 / -1; min-width: 0; } /* --- the rail --------------------------------------------------------------- It exists on home and nowhere else — every other view keeps the page it had. ONE page, one scroll. The rail is a plain column that scrolls with the board rather than a pane pinned beside it: nothing here is sticky, nothing here has its own scrollport. Two frames sliding independently read as two documents sharing a window; a single scroll reads as one page that happens to have a second column. Separated from the board by a hairline rather than a box — the dojo does rules, not cards. */ .homerail { display: none; } body.on-split .homerail { display: block; /* .app's own 12px, paid again here so the two columns' CONTENT starts on the same line: the first post and the board's first element (the challenge panel, or the DIOSES band when there is none) open level with each other. */ padding-top: 12px; padding-left: 16px; /* Matches .app's own 20px, so both columns sit the same distance inside the page. It only shows below 1080, where .pagecol is the window and there is no centring margin to do it for us — but paying it always keeps the two columns symmetrical instead of the rail running flush while the board is inset. */ padding-right: 20px; border-left: 1px solid rgba(246, 194, 67, .14); } /* .board carries a 12px top margin to stand off whatever precedes it — the challenge panel, the rejoin banner. With nothing above it that margin is just a dent in the alignment: the ladder would start 12px below the rail's first post on exactly the pages where there is no challenge running. Only on the split, where there is a second column for it to line up with. */ body.on-split .app > .board:first-child { margin-top: 0; } /* With the timeline on screen, TIMELINE in the menu points at the thing you are already looking at. It stays in the DOM (and reappears the moment the rail is gone, below the breakpoint, where it is the only way to the feed) — it is just not offered while it would be a link to here. */ body.on-split .nav-feed { display: none; } /* --- the feed, narrowed ---------------------------------------------------- Same posts, same markup, same handlers — feed.js renders its usual shell in here (see mountRail()). Only the frame changes: the 620px reading column becomes the rail's width, and the card chrome comes off so the posts sit directly on the page the way they do on #/feed. */ .homerail .card.wide.feedwrap { --gut: 0px; max-width: none; margin: 0; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; } .homerail .feedlist { margin-top: 0; gap: 16px; } .homerail .fpost { padding-top: 12px; } /* feed.css already flattens the first post, but the line above is later and more specific, so it has to be said again here — otherwise the rail opens 12px lower than the board it is meant to start level with. */ .homerail .fpost:first-child { padding-top: 0; } /* The plate is the one thing that must give. At 344px a 21:9 strip is 147px of which the fight uses 80 — a lot of black for a sidebar. Here it drops the fixed ratio and sizes to the fight itself, with room at the top for the label; the result is a denser column that still reads at a glance. */ .homerail .fm { aspect-ratio: auto; min-height: 0; padding: 26px 12px 14px; } .homerail .fm-ava { width: clamp(40px, 4.2vw, 46px); height: clamp(40px, 4.2vw, 46px); } .homerail .fm-score { font-size: clamp(16px, 1.75vw, 19px); padding: 4px 8px 5px; } /* the fighters' names sit in a third of the plate each, so at the narrow end of the rail they have to come down or a full tag won't survive the truncation */ .homerail .fm-tag { font-size: clamp(8px, .83vw, 9px); } .homerail .fm-swords { width: 40px; height: 40px; } .homerail .fm-duel { gap: 6px; margin-top: 6px; } /* the arte row: a 96px-tall tile is a poster, and a sidebar has no room to hang posters — it keeps the strip as a row of thumbnails you can still click through to the full painting. Fewer of them fit here than in the timeline proper, which is why fitArtStrip() measures instead of counting to a number. */ .homerail .fp-art { padding: 9px 10px; gap: 7px; } .homerail .art-tile { width: 46px; height: 82px; } .homerail .art-tile-tag { font-size: 6.5px; padding: 2px 3px; } .homerail .art-more .am-n { font-size: 13px; } .homerail .art-more .am-label { font-size: 6px; letter-spacing: .04em; } /* the stack's leaves shrink with it, or a 46px tile is more edge than painting */ .homerail .art-stack .as-face { right: 5px; top: 5px; } .homerail .as-leaf.l1 { left: 2px; bottom: 2px; right: 3px; top: 3px; } .homerail .as-leaf.l2 { left: 5px; bottom: 5px; } .homerail .as-n { font-size: 7px; min-width: 11px; top: 2px; left: 2px; } /* the composer keeps its gutter back — it IS a box, unlike the posts */ .homerail .composer { margin: 0 0 16px; padding: 13px 13px 10px; } .homerail .cmp-preview { margin-bottom: 12px; } /* the header line is a full sentence — "GUDBOI se papeó a DR KIRBY" — squeezed into a rail that runs as narrow as 286px. Small enough that it, and the two faces beside it, hold one line at every width the rail has rather than wrapping to two the way the base 30px faces / 11.5px sentence did at the floor. */ .homerail .fp-head { gap: 6px; padding-bottom: 6px; } .homerail .fp-faces .fp-ava { width: 20px; height: 20px; } .homerail .fp-faces.two .fp-ava + .fp-ava { margin-left: -7px; } .homerail .fp-who, .homerail .fline { font-size: 10px; line-height: 1.3; } .homerail .fp-who a, .homerail .fp-who b, .homerail .fline-text a, .homerail .fline-text b { font-size: 9.5px; } .homerail .fline { padding: 0; gap: 6px; } .homerail .fline-time { font-size: 8.5px; } .homerail .fp-caption, .homerail .fp-line { font-size: 11px; } .homerail .fp-bar { gap: 8px; padding-top: 8px; } .homerail .feed-foot { margin-top: 16px; padding: 0 0 4px; } /* --- the board's plates, tightened ------------------------------------------ NOT scoped to .on-split, on purpose: this is a change to the ranking itself, not to the two-column arrangement, and a row that changed shape depending on whether the timeline happened to fit would be a worse thing than either version. It travels with this experiment only because the experiment is one droppable file. Shorter and squarer. The plate keeps its milled hardware — the bevels, the travelling sheen, the struck numerals are all unchanged — it just stops being a pillow: ~70px of row becomes ~48, and an 18px corner becomes 8, so the ladder reads as a stack of machined bars and more of it fits on a screen. Each number below is the same drop applied to whatever sits inside the row, so the proportions inside the plate are the ones it already had — and dense enough now to sit comfortably next to the rail's own smaller type. */ /* Through the variable, so .rowart's own corner follows the plate down to 8px instead of staying on the global 18 and showing a seam where they meet. */ .rankrow { --row-radius: 8px; } /* the row's controls ride its top edge — they follow the corner in */ .rowactions { right: 10px; top: -7px; } /* The phone already has its own, tighter row (style.css @640: 32px avatars, a different column set, its own padding) and it does not need shortening — so the trim stops exactly where that block starts, and the two never argue. Only the corner above is shared, because a squarer plate is squarer at every size. */ @media (min-width: 641px) { .rankrow { --row-pad-y: 7px; --row-pad-x: 12px; gap: 8px; } .board { gap: 7px; } .rankrow .ava { width: 32px; height: 32px; flex: 0 0 32px; font-size: 16px; } .rankrow .ava-dot { width: 9px; height: 9px; } .medal { width: 30px; height: 34px; } .rankrow .pos { font-size: 19px; } .rankrow .tag { font-size: clamp(12px, 2vw, 15.5px); } .rankrow .crewtag { font-size: 8px; } .rankrow .who { gap: 8px; } .rankrow .mains .m { width: 24px; height: 24px; } .rankrow .mains .m .micon { width: 24px; height: 24px; } .rankrow .paps { font-size: clamp(8px, 1.3vw, 10px); } .movebadge { width: 19px; height: 19px; flex: 0 0 19px; font-size: 10px; } .movebadge.new { font-size: 8px; } /* the zone captions close up with the rows they head */ .tierband { margin: 7px 3px -2px; font-size: 8px; } .tierband:first-child { margin-top: 0; } } /* --- the row's own tracks, on the split ------------------------------------- The board's five columns are fixed pixels (style.css) because the board used to own the full 1080. Sharing that width with a rail — and starting the split at 900 — leaves as little as ~520px of row, at which point 406px of fixed art-and-stat columns would strangle the name down to nothing. So on the split each one becomes a percentage of the row between a floor and its original value. The percentages are set so that at the wide end they land back on 64 / 118 / 150 / 74 to the pixel: the clamps are dormant where there is room and only bite as the row narrows, which is why there is no step at any width — the row is the same row, slowly conceding. Off the split the board has the whole page again and style.css's fixed set stands untouched. */ /* Six tracks now, in the board's own order: the movement arrow moved to the front (it is what you scan down the ladder for) and the last column became the sliver of painting. The arrow needs far less room leading than it did trailing — it is one 19px badge here — so most of what the picture costs comes back out of that swap rather than off the name. */ body.on-split .rankrow { /* The arrow no longer needs to SCALE with width: at every width ≥641px the badge itself is a fixed 19px (see the bare rule above), so a clamp here just reintroduces the same slack the flush-alignment fix (style.css) was meant to remove — at 900px this clamp's 3.4% already resolves near its 26px ceiling, 7px wider than the badge it holds. Fixed to the badge's own size plus a 1px buffer instead. */ grid-template-columns: 15px clamp(34px, 6.4%, 44px) minmax(0, 1fr) clamp(92px, 17.6%, 118px) clamp(100px, 22.4%, 150px); } /* the painting's track, only once this board actually has one to hang */ body.on-split .board.has-art .rankrow { grid-template-columns: 15px clamp(34px, 6.4%, 44px) minmax(0, 1fr) clamp(92px, 17.6%, 118px) clamp(100px, 22.4%, 150px) clamp(56px, 14%, 116px); } /* The name's own size was tuned against the full-width board (2.2vw), which at 900 still asks for the full 17px in a column less than half as wide — every tag longer than six letters would ellipsise. On the split it tracks the window more gently: ~15px at the floor, back to the same 17 by the time the page has its 1080. */ body.on-split .rankrow .tag { font-size: clamp(12.5px, 1.65vw, 17px); } /* --- narrow ------------------------------------------------------------------ There is no narrow case to style for the rail. Below RAIL_MQ app.js never sets .on-split and never mounts it, so .pagecol is the plain 1080 column it is on main and #homerail is an empty, display:none element — the timeline is simply its own page again, one tap away under TIMELINE in the menu, which reappears with it. Nothing to stack, nothing to unwind, and no second copy of the feed's styling to keep in sync. */