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     width: 100%;
  39     height: 100%;
  40
  41     position: absolute;
  42     top: 0;
  43     left: 0;
  44     bottom: 0;
  45     right: 0;
  46
  47     display: grid;
  48     grid-template-columns: 1fr 1fr 1fr;
  49     grid-template-rows: 1fr 1fr 1fr;
  50     grid-gap: 1em;
  51 }
  52
  53 .mini-grid {
  54     width: 100%;
  55     height: 100%;
  56
  57     display: grid;
  58     grid-template-columns: 1fr 1fr 1fr;
  59     grid-template-rows: 1fr 1fr 1fr;
  60
  61     border-radius: 6px;
  62     border: 3px solid #999;
  63
  64     position:relative;
  65 }
  66
  67 .mini-grid.active {
  68     border: 3px solid var(--accent-color-bright);
  69 }
  70
  71 .mini-grid.o-wins .square, .mini-grid.plus-wins .square {
  72     opacity: 0.6;
  73 }
  74
  75 .mini-grid .winner {
  76     position: absolute;
  77     top: 0;
  78     left: 0;
  79     bottom: 0;
  80     right: 0;
  81
  82     display: flex;
  83     justify-content: center;
  84     align-items: center;
  85     line-height: 0;
  86     font-size: calc(min(35vw, .35 * var(--page-max-width)));
  87     font-weight: bold;
  88     opacity: 0.20;
  89 }
  90
  91 .square {
  92     display: flex;
  93     justify-content: center;
  94     align-items: center;
  95     font-size: calc(min(8vw, .08 * var(--page-max-width)));
  96     line-height: 0;
  97     font-weight: bold;
  98     border-bottom: 1px solid #999;
  99     border-right: 1px solid #999;
 100 }
 101
 102 .square.open {
 103     cursor: pointer;
 104 }
 105
 106 .square.occupied {
 107     cursor: default;
 108 }
 109
 110 .square.glyph-o {
 111     background: var(--o-color);
 112 }
 113
 114 .square.glyph-plus {
 115     background: var(--plus-color);
 116 }
 117
 118 .square.open:hover {
 119     background-color: var(--accent-color-bright);
 120 }
 121
 122 .square.last-move {
 123     color: var(--accent-color-bright);
 124 }
 125
 126 .glyphs {
 127     padding-top: 0.5em;
 128     display: grid;
 129     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 130     grid-column-gap: 0.5em;
 131     grid-row-gap: 0.25em;
 132 }
 133
 134 .glyph-and-name {
 135     display: flex;
 136     flex-direction: column;
 137     align-items: center;
 138 }
 139
 140 .glyph {
 141     width: 8vw;
 142 }