Merge remote-tracking branch 'origin/master' into flempires/requests-generalized

[lmno.games] / scribe / scribe.css

diff --git a/scribe/scribe.css b/scribe/scribe.css
new file mode 100644 (file)
index 0000000..aba532e
--- /dev/null
+++ b/scribe/scribe.css
@@ -0,0 +1,103 @@
+/* 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;
+}
+
+.mini-grid.active {
+    border: 3px solid var(--accent-color-bright);
+}
+
+.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);
+}
+
+.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;
+}