/* We want our board to be the largest square that can * fit. Unfortunately, it requires a bit of CSS magic to make that * happen. We can set a width easily enough, but what we can't easily * do is to set the height to be exactly the same as the width. * * So here's the magic to get that to happen. On the board container * we set the height to 0 and the bottom padding to 100% (which just * happens to be defined as relative to the _width_). So, now we have * a square element. Hurrah! * * The problem is that this element has a nominal height of 0, so if * any child sas "height: 100%" that will result in a 0-height child * and won't be what we want. * * So the last piece of the magic is to use absolute placement of the * board (which requires position:relative on its parent) and set all * of its edges (top, left, bottom, right) to the extents of the * container. * * Ta-da! Now our board element is square and does not have any * dimensions of 0 so child elements can compute their sizes * naturally. */ .board-container { position: relative; width: 100%; height: 0; padding-bottom: 100%; } .board { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 1em; } .mini-grid { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; border-radius: 6px; border: 3px solid #999; } .square { display: flex; justify-content: center; align-items: center; font-size: calc(min(8vw, .08 * var(--page-max-width))); line-height: 0; font-weight: bold; border-bottom: 1px solid #999; border-right: 1px solid #999; } .square.open { cursor: pointer; } .square.occupied { cursor: default; } .square.open:hover { background-color: var(--accent-color-bright); } .glyphs { padding-top: 0.5em; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 0.5em; grid-row-gap: 0.25em; } .glyph-and-name { display: flex; flex-direction: column; justify-content: center; align-items: center; } .glyph { width: 8vw; }