git.cworth.org Git - lmno.games/blob - scribe/scribe.css

   1 :root {
   2     /* Colors for the two players. */
   3     --o-color: #c2dfff;
   4     --plus-color: #fdd7e4;
   5 }
   6
   7 /* We want our board to be the largest square that can
   8  * fit. Unfortunately, it requires a bit of CSS magic to make that
   9  * happen. We can set a width easily enough, but what we can't easily
  10  * do is to set the height to be exactly the same as the width.
  11  *
  12  * So here's the magic to get that to happen. On the board container
  13  * we set the height to 0 and the bottom padding to 100% (which just
  14  * happens to be defined as relative to the _width_). So, now we have
  15  * a square element. Hurrah!
  16  *
  17  * The problem is that this element has a nominal height of 0, so if
  18  * any child sas "height: 100%" that will result in a 0-height child
  19  * and won't be what we want.
  20  *
  21  * So the last piece of the magic is to use absolute placement of the
  22  * board (which requires position:relative on its parent) and set all
  23  * of its edges (top, left, bottom, right) to the extents of the
  24  * container.
  25  *
  26  * Ta-da! Now our board element is square and does not have any
  27  * dimensions of 0 so child elements can compute their sizes
  28  * naturally.
  29  */
  30 .board-container {
  31     position: relative;
  32     width: 100%;
  33     height: 0;
  34     padding-bottom: 100%;
  35 }
  36
  37 .board {
  38     position: absolute;
  39     top: 0;
  40     left: 0;
  41     bottom: 0;
  42     right: 0;
  43
  44     display: grid;
  45     grid-template-columns: 1fr 1fr 1fr;
  46     grid-template-rows: 1fr 1fr 1fr;
  47     grid-gap: 1em;
  48 }
  49
  50 .mini-grid {
  51     width: 100%;
  52     height: 100%;
  53
  54     display: grid;
  55     grid-template-columns: 1fr 1fr 1fr;
  56     grid-template-rows: 1fr 1fr 1fr;
  57
  58     border-radius: 6px;
  59     border: 3px solid #999;
  60
  61     position:relative;
  62 }
  63
  64 .mini-grid.active {
  65     border: 3px solid var(--accent-color-bright);
  66 }
  67
  68 .mini-grid.o-wins .square, .mini-grid.plus-wins .square {
  69     opacity: 0.6;
  70 }
  71
  72 .mini-grid .winner {
  73     position: absolute;
  74     top: 0;
  75     left: 0;
  76     bottom: 0;
  77     right: 0;
  78
  79     display: flex;
  80     justify-content: center;
  81     align-items: center;
  82     line-height: 0;
  83     font-size: calc(min(35vw, .35 * var(--page-max-width)));
  84     font-weight: bold;
  85     opacity: 0.20;
  86 }
  87
  88 .square {
  89     display: flex;
  90     justify-content: center;
  91     align-items: center;
  92     font-size: calc(min(8vw, .08 * var(--page-max-width)));
  93     line-height: 0;
  94     font-weight: bold;
  95     border-bottom: 1px solid #999;
  96     border-right: 1px solid #999;
  97 }
  98
  99 .square.open {
 100     cursor: pointer;
 101 }
 102
 103 .square.occupied {
 104     cursor: default;
 105 }
 106
 107 .square.glyph-o {
 108     background: var(--o-color);
 109 }
 110
 111 .square.glyph-plus {
 112     background: var(--plus-color);
 113 }
 114
 115 .square.open:hover {
 116     background-color: var(--accent-color-bright);
 117 }
 118
 119 .square.last-move {
 120     color: var(--accent-color-bright);
 121 }
 122
 123 .glyphs {
 124     padding-top: 0.5em;
 125     display: grid;
 126     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 127     grid-column-gap: 0.5em;
 128     grid-row-gap: 0.25em;
 129 }
 130
 131 .glyph-and-name {
 132     display: flex;
 133     flex-direction: column;
 134     align-items: center;
 135 }
 136
 137 .glyph {
 138     width: 8vw;
 139 }