-ol, ul {
- padding-left: 30px;
+:root {
+ /* Colors for the two players. */
+ --o-color: #c2dfff;
+ --plus-color: #fdd7e4;
}
-.board-row:after {
- clear: both;
- content: "";
- display: table;
+/* 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%;
}
-.status {
- margin-bottom: 10px;
+.board {
+ width: 100%;
+ height: 100%;
+
+ 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;
+
+ 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 {
- background: #fff;
- color: black;
- border: 1px solid #999;
- float: left;
- font-size: 20px;
- font-weight: bold;
- line-height: 25px;
- width: 25px;
- height: 25px;
- margin-right: -1px;
- margin-top: -1px;
- padding: 0;
- text-align: center;
- border-radius: 4px;
+ 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: 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:focus {
- outline: none;
+.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;
}
-.kbd-navigation .square:focus {
- background: #ddd;
+.glyph {
+ width: 8vw;
}