1 /* We want our board to be the largest square that can
2 * fit. Unfortunately, it requires a bit of CSS magic to make that
3 * happen. We can set a width easily enough, but what we can't easily
4 * do is to set the height to be exactly the same as the width.
6 * So here's the magic to get that to happen. On the board container
7 * we set the height to 0 and the bottom padding to 100% (which just
8 * happens to be defined as relative to the _width_). So, now we have
9 * a square element. Hurrah!
11 * The problem is that this element has a nominal height of 0, so if
12 * any child sas "height: 100%" that will result in a 0-height child
13 * and won't be what we want.
15 * So the last piece of the magic is to use absolute placement of the
16 * board (which requires position:relative on its parent) and set all
17 * of its edges (top, left, bottom, right) to the extents of the
20 * Ta-da! Now our board element is square and does not have any
21 * dimensions of 0 so child elements can compute their sizes
39 grid-template-columns: 1fr 1fr 1fr;
40 grid-template-rows: 1fr 1fr 1fr;
49 grid-template-columns: 1fr 1fr 1fr;
50 grid-template-rows: 1fr 1fr 1fr;
53 border: 3px solid #999;
57 border: 3px solid var(--accent-color-bright);
62 justify-content: center;
64 font-size: calc(min(8vw, .08 * var(--page-max-width)));
67 border-bottom: 1px solid #999;
68 border-right: 1px solid #999;
80 background-color: var(--accent-color-bright);
84 color: var(--accent-color-bright);
90 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
91 grid-column-gap: 0.5em;
97 flex-direction: column;