Fix a couple of typos in my comments here

[lmno.games] / scribe / scribe.css

diff --git a/scribe/scribe.css b/scribe/scribe.css
index 4eaea8ffc0d555a7550aed606a42c1c0a2240f5f..6b1e5a642a54d2d582bfee477a5ac884371dcbdd 100644 (file)
--- a/scribe/scribe.css
+++ b/scribe/scribe.css
@@ -1,32 +1,67 @@
-ol, ul {
-  padding-left: 30px;
+/* 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-row:after {
-  clear: both;
-  content: "";
-  display: table;
+.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;

 }
 
 }
 

-.status {
-  margin-bottom: 10px;
+.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 {
 }
 
 .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 {
 }
 
 .square.open {


@@ -40,11 +75,3 @@ ol, ul {
 .square.open:hover {
     background-color: var(--accent-color-bright);
 }
 .square.open:hover {
     background-color: var(--accent-color-bright);
 }

-
-.square:focus {
-  outline: none;
-}
-
-.kbd-navigation .square:focus {
-  background: #ddd;
-}