+:root {
+ /* Colors for the two players. */
+ --o-color: #c2dfff;
+ --plus-color: #fdd7e4;
+}
+
/* 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-radius: 6px;
border: 3px solid #999;
+
+ position:relative;
+}
+
+.mini-grid.active {
+ border: 3px solid var(--accent-color-bright);
+}
+
+.mini-grid.o-wins .square, .mini-grid.plus-wins .square {
+ opacity: 0.6;
+}
+
+.mini-grid .winner {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ line-height: 0;
+ font-size: calc(min(35vw, .35 * var(--page-max-width)));
+ font-weight: bold;
+ opacity: 0.20;
}
.square {
display: flex;
justify-content: center;
align-items: center;
- font-size: 5vmin;
+ 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;
}
cursor: default;
}
+.square.glyph-o {
+ background: var(--o-color);
+}
+
+.square.glyph-plus {
+ background: var(--plus-color);
+}
+
.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;
+}