2 /* Colors for the two players. */
7 /* We want our board to be the largest square that can
8 * fit. Unfortunately, it requires a bit of CSS magic to make that
9 * happen. We can set a width easily enough, but what we can't easily
10 * do is to set the height to be exactly the same as the width.
12 * So here's the magic to get that to happen. On the board container
13 * we set the height to 0 and the bottom padding to 100% (which just
14 * happens to be defined as relative to the _width_). So, now we have
15 * a square element. Hurrah!
17 * The problem is that this element has a nominal height of 0, so if
18 * any child sas "height: 100%" that will result in a 0-height child
19 * and won't be what we want.
21 * So the last piece of the magic is to use absolute placement of the
22 * board (which requires position:relative on its parent) and set all
23 * of its edges (top, left, bottom, right) to the extents of the
26 * Ta-da! Now our board element is square and does not have any
27 * dimensions of 0 so child elements can compute their sizes
48 grid-template-columns: 1fr 1fr 1fr;
49 grid-template-rows: 1fr 1fr 1fr;
58 grid-template-columns: 1fr 1fr 1fr;
59 grid-template-rows: 1fr 1fr 1fr;
62 border: 3px solid #999;
68 border: 3px solid var(--accent-color-bright);
71 .mini-grid.o-wins .square, .mini-grid.plus-wins .square {
83 justify-content: center;
86 font-size: calc(min(35vw, .35 * var(--page-max-width)));
93 justify-content: center;
95 font-size: calc(min(8vw, .08 * var(--page-max-width)));
98 border-bottom: 1px solid #999;
99 border-right: 1px solid #999;
111 background: var(--o-color);
115 background: var(--plus-color);
119 background-color: var(--accent-color-bright);
123 color: var(--accent-color-bright);
129 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
130 grid-column-gap: 0.5em;
131 grid-row-gap: 0.25em;
136 flex-direction: column;