), and no flex
arrangement puts two of them in a column beside the third. Logo in column
one across both rows; name and slogan stacked in column two.
The tagline's flex-basis:100% goes with it: that declaration is exactly
what used to force it onto a line of its own BELOW everything, which is
the row the user is asking to reclaim. */
.v4-game-page .hd-top {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: center;
column-gap: 10px;
row-gap: 0;
padding: 6px 10px;
}
/* The mark is artwork now, not a font size (TASK-1137[Q]), so the box is
sized and then the drawing is sized inside it. Grown ~11% (34 -> 38px,
the drawing with it) on the user's own offer, which is what buys the two
lines beside it the room to be tight rather than cramped. */
.v4-game-page .hd-top .logo {
grid-column: 1;
grid-row: 1 / span 2;
min-width: 48px;
height: 38px;
}
.v4-game-page .hd-top .logo svg { width: 31px; height: 20.5px; }
/* Set tight, so the two lines together come to about the mark's own 38px and
the pair reads as one block beside it rather than a list under it. 13px
on the tagline is the readability floor and not a pixel under it. */
.v4-game-page .hd-top strong {
grid-column: 2;
grid-row: 1;
font-size: 20px;
line-height: 1.1;
}
.v4-game-page.grey .hd-top strong { font-size: 21px; }
.v4-game-page .hd-top .tag {
grid-column: 2;
grid-row: 2;
flex-basis: auto;
font-size: 13px;
line-height: 1.15;
}
/* THE SIX LINKS, AND SINCE TASK-1186[Q] THEY ARE ONE ROW. Two shapes,
because the themes give .bbtn two: the three bevel themes draw a raised
button (24px Bebas, 24px of side padding), grey draws a row of underlined
text links. This paragraph used to end "so the row lands on two lines
instead of three", which was the right trade when three was the
alternative and is not a place to stop: the user counted those two rows as
the first of several rows of chrome between the top of the page and the
game, 58px of an 812px screen, and asked for one.
TWO THINGS GET IT THERE, and the sizes alone could not have. The markup
now carries a short form for the two long words (v4-game.html; `docs` and
`g-book`), swapped in just below -- 30 characters of label where there
were 40. And the numbers here come down again: 15px in the bevel themes
with 6px of side padding, 14px in grey. MEASURED at 360, the narrower of
the two phones this was checked at, in all four themes; 375 has 15px more
to play with and the same rules leave it slack. Everything here is above
the 12px floor, and the row is a link list rather than a hit-target grid
(the two controls that must be finger-sized are further down and are). */
.v4-game-page .tabs { gap: 6px 6px; padding: 6px 4px; }
.v4-game-page .tabs .bbtn { font-size: 15px; padding: 5px 5px; letter-spacing: 0.5px; }
.v4-game-page.grey .tabs .bbtn { font-size: 14px; padding: 3px 2px; }
/* THE SHORT FORM IS THE ONE THAT PAINTS HERE. Its twin is hidden by
metaeden-v4-game.css, which is this surface's always-sheet and so declares
the desktop answer; this is the only file that undoes it, and no desktop
fetches this file. display, not visibility, both ways, so exactly one
name per link reaches the accessibility tree. */
.v4-game-page .tabwide { display: none; }
.v4-game-page .tabnarrow { display: inline; }
/* GREY'S DRAWN "|" SEPARATORS ARE DROPPED, NOT RESIZED, and this is the one
rule here that came out of looking rather than measuring. Each is a
::before on the link that FOLLOWS the gap, positioned absolutely at
left:-13px so it lands in the space between two links. That holds on one
line and breaks on two: the first link of a wrapped row carries its
separator with it, so the row opens with a pipe hanging in the left
margin. At 390 and 360 the long labels ALWAYS wrapped, so this was not an edge
case, it was the normal view. A column gap says the same thing and cannot
dangle. The [ and ] that frame the row are attached to the first and last
links rather than to the gaps between them, so they cannot land in the
wrong place and they stay. */
.v4-game-page.grey .tabs .bbtn + .bbtn { margin-left: 0; }
.v4-game-page.grey .tabs .bbtn + .bbtn::before { content: none; }
/* THE GAME'S OWN HEADING -- and the blurb is no longer under it
(TASK-1186[Q]). The user: "the description of the game can maybe move
under the game." At 375x812 the title line plus a two-line blurb was 63px
of the 288px above the game; the blurb costs nothing down there and the
title alone is 35px.
HOW IT MOVES, given that CSS cannot reparent anything. The two are
siblings inside .ghead (see v4-game.html), which on a desk is a centred
flex row and here is `display: contents`: the wrapper's box goes away and
the and the
become items of #page-play's own column, where
`order` is free to put one of them after the frame. #page-play is the
.gplay section itself and is display:block from metaeden-v4.css's
`.page.on`; the id in the selector below is what outranks that.
THE ORDER, and everything not named keeps 0 and its document position:
the heading, then the frame, then the blurb, then whichever of the note
and the not-here panel is showing, then the way out last. A cartridge the
phone gate turns away (word-fret) has no frame, so its blurb simply
follows its title, which is where a blurb goes when there is no game
between them.
WHAT IS LOST HERE, said plainly: with .ghead's box gone so is the 1px
divider it carries, so the three bevel themes draw no rule under the
heading on a phone. It was a line under a title and a sentence; there is
no sentence there now, and 7px of the ask was in it. grey -- the theme a
guest arrives in -- never drew one. */
.v4-game-page #page-play { display: flex; flex-direction: column; }
.v4-game-page .ghead { display: contents; }
.v4-game-page #page-play h2 { font-size: 26px; margin: 12px 0 4px; }
.v4-game-page #gsubwrap { order: 1; margin: 14px 0 0; }
.v4-game-page .gnote { order: 2; }
.v4-game-page #gmiss { order: 2; }
.v4-game-page .gback { order: 3; }
.v4-game-page .gsub { font-size: 14px; }
/* The "-" joined a title to a sentence on one line. Under the game there is
nothing on its left to join to. */
.v4-game-page .gsubdot { display: none; }
/* THE MODE CONTROL (one button since TASK-1143[Q] merged widescreen and
fullscreen), and the way out. A finger is not a mouse pointer, so these
get room to be hit; 44px is the smallest target that is comfortable on
glass. min-height rather than padding, because .bbtn is already
display:flex with align-items:center, so the label stays centred and grey's
border-less text link grows a target without growing a box.
NOT INSIDE THE MODE, which is the exception that matters. In the mode
the control sits on its own bezel with the game right under it, which is
a much easier thing to hit than a link in a page, and on a phone the
frame now fills the glass (metaeden-v4-game-fit.css), where every row of
chrome is taken out of the game's own budget -- so it keeps the compact
size the desktop uses. */
.v4-game-page .gfsbar { margin: 10px 0 0; }
.v4-game-page:not(.gfs) .gfsbar .bbtn,
.v4-game-page .gback .bbtn { min-height: 44px; }
.v4-game-page .gback { margin: 18px 0 0; }
/* WIDE CARTRIDGE INTERNALS ARE STILL NOT THIS FILE'S BUSINESS, but they are
no longer left alone either (TASK-1172[Q]). This paragraph used to say
golf's 18-hole strip scrolls sideways inside #gstage and that making it
wrap would mean naming a cartridge here. Both halves were true and the
second one still is: the per-game phone re-cuts (golf's 9x2 scorecard,
minesweeper's width-derived cells, solitaire's seven-visible piles) live
in metaeden-v4-game-fit.css, whose charter is exactly that -- and since
that ticket they apply to THIS default view too, not only inside the
fullscreen mode. So a cartridge here is sized for the glass before the
visitor ever presses fullscreen, and this file remains what it always
was: the page's chrome, no cartridge names in it. The containment
guarantee stands regardless -- anything still wider than the column
scrolls inside #gstage and never reaches the document. */
/* THE CONTROLS RIDE THE FRAME THEY OPERATE (TASK-1189[Q]). The user: "have
fullscreen and share have almost no bottom padding so it's riding the top
border of the box it's referencing." The gap was never padding on the bar
-- measured, the bar's own bottom margin is 0 -- it was the stage's 16px
top margin, and the border being referenced is the stage's own 1px top
edge. A hairline is left rather than zero so the two are legibly separate
things touching, not one merged box. */
.v4-game-page #gframe .gstage { margin-top: 2px; }
}