Don't waste space for glyphs that are not full height.
[lmno.games] / scribe / scribe.css
1 /* We want our board to be the largest square that can
2  * fit. Unfortunately, it requires a bit of CSS magic to make that
3  * happen. We can set a width easily enough, but what we can't easily
4  * do is to set the height to be exactly the same as the width.
5  *
6  * So here's the magic to get that to happen. On the board container
7  * we set the height to 0 and the bottom padding to 100% (which just
8  * happens to be defined as relative to the _width_). So, now we have
9  * a square element. Hurrah!
10  *
11  * The problem is that this element has a nominal height of 0, so if
12  * any child sas "height: 100%" that will result in a 0-height child
13  * and won't be what we want.
14  *
15  * So the last piece of the magic is to use absolute placement of the
16  * board (which requires position:relative on its parent) and set all
17  * of its edges (top, left, bottom, right) to the extents of the
18  * container.
19  *
20  * Ta-da! Now our board element is square and does not have any
21  * dimensions of 0 so child elements can compute their sizes
22  * naturally.
23  */
24 .board-container {
25     position: relative;
26     width: 100%;
27     height: 0;
28     padding-bottom: 100%;
29 }
30
31 .board {
32     position: absolute;
33     top: 0;
34     left: 0;
35     bottom: 0;
36     right: 0;
37
38     display: grid;
39     grid-template-columns: 1fr 1fr 1fr;
40     grid-template-rows: 1fr 1fr 1fr;
41     grid-gap: 1em;
42 }
43
44 .mini-grid {
45     width: 100%;
46     height: 100%;
47
48     display: grid;
49     grid-template-columns: 1fr 1fr 1fr;
50     grid-template-rows: 1fr 1fr 1fr;
51
52     border-radius: 6px;
53     border: 3px solid #999;
54 }
55
56 .square {
57     display: flex;
58     justify-content: center;
59     align-items: center;
60     font-size: calc(min(8vw, .08 * var(--page-max-width)));
61     line-height: 0;
62     font-weight: bold;
63     border-bottom: 1px solid #999;
64     border-right: 1px solid #999;
65 }
66
67 .square.open {
68     cursor: pointer;
69 }
70
71 .square.occupied {
72     cursor: default;
73 }
74
75 .square.open:hover {
76     background-color: var(--accent-color-bright);
77 }
78
79 .glyphs {
80     padding-top: 0.5em;
81     display: grid;
82     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
83     grid-column-gap: 0.5em;
84     grid-row-gap: 0.25em;
85 }
86
87 .glyph-and-name {
88     display: flex;
89     flex-direction: column;
90     justify-content: center;
91     align-items: center;
92 }
93
94 .glyph {
95     width: 8vw;
96 }