/* 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 wdith easily enough, but what we can't easily
+ * 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
* 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 palcement of the
- * board (which require position:relative on its parent) and set all
+ * 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.
*
border: 3px solid #999;
}
+.mini-grid.active {
+ border: 3px solid var(--accent-color-bright);
+}
+
.square {
display: flex;
justify-content: center;
align-items: center;
- font-size: 8vmin;
+ font-size: calc(min(8vw, .08 * var(--page-max-width)));
line-height: 0;
font-weight: bold;
border-bottom: 1px solid #999;
.square.open:hover {
background-color: var(--accent-color-bright);
}
+
+.square.last-move {
+ 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;
+ align-items: center;
+}
+
+.glyph {
+ width: 8vw;
+}