git.cworth.org Git - lmno.games/blob - 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 .mini-grid.active {
  57     border: 3px solid var(--accent-color-bright);
  58 }
  59
  60 .square {
  61     display: flex;
  62     justify-content: center;
  63     align-items: center;
  64     font-size: calc(min(8vw, .08 * var(--page-max-width)));
  65     line-height: 0;
  66     font-weight: bold;
  67     border-bottom: 1px solid #999;
  68     border-right: 1px solid #999;
  69 }
  70
  71 .square.open {
  72     cursor: pointer;
  73 }
  74
  75 .square.occupied {
  76     cursor: default;
  77 }
  78
  79 .square.open:hover {
  80     background-color: var(--accent-color-bright);
  81 }
  82
  83 .square.last-move {
  84     color: var(--accent-color-bright);
  85 }
  86
  87 .glyphs {
  88     padding-top: 0.5em;
  89     display: grid;
  90     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  91     grid-column-gap: 0.5em;
  92     grid-row-gap: 0.25em;
  93 }
  94
  95 .glyph-and-name {
  96     display: flex;
  97     flex-direction: column;
  98     align-items: center;
  99 }
 100
 101 .glyph {
 102     width: 8vw;
 103 }