word/wijzer.css

   1 #quiz {
   2         display: grid;
   3         grid: auto / 2fr 1fr;
   4         margin: 2em 0 1ex;
   5         align-items: center;
   6         grid-gap: 0 1ex;
   7 }
   8 figure {
   9         grid-column: 1;
  10         grid-row-start: 1;
  11         grid-row-end: span 9;
  12 }
  13 ul {
  14         display: contents;
  15 }
  16 li {
  17         grid-column: 2;
  18         font-size: 20pt;
  19         padding: 1ex .2ex;
  20         transition: all .5s ease-in;
  21 }
  22 li.chosen {background: #FF08}
  23 .done li.wrong {background: #F008}
  24 .done li.good {background: #0F08}
  25 li[onclick]:hover {
  26         cursor: pointer;
  27         background: #8888;
  28 }
  29
  30 @media (orientation: portrait) {
  31         #quiz {
  32                 grid: auto / 1fr 1fr;
  33         }
  34         figure {
  35                 grid-column: span 2;
  36         }
  37         li {
  38                 grid-column: auto;
  39         }
  40 }