word/memory.plp

   1 <(../common.inc.plp)><:
   2
   3 Html({
   4         raw => <<'EOT',
   5 <script src="/word/put.min.js"></script>
   6 <script src="/word/memory.js"></script>
   7 <style>
   8 /* cards */
   9 #quiz {
  10         display: grid;
  11         grid: repeat(3, 1fr) / repeat(4, 1fr);
  12         grid-gap: 1ex;
  13         min-height: calc(100vh - 11.5ex);
  14 }
  15 @media (orientation: portrait) {
  16         #quiz {
  17                 grid: repeat(6, 1fr) / repeat(2, 1fr);
  18         }
  19 }
  20 html {
  21         overflow: hidden; /* rotation overflow on celebration */
  22 }
  23
  24 figure {
  25         display: inline-block;
  26         background: #224;
  27         border: 1px solid #888;
  28         perspective: 100em;
  29         position: relative;
  30 }
  31 figure:not(.turn):hover {
  32         cursor: pointer;
  33 }
  34 figure, img {
  35         transition: all .5s ease-in;
  36 }
  37
  38 /* card faces */
  39 figure img {
  40         height: 100%;
  41         width: auto;
  42         backface-visibility: hidden;
  43         transform: rotateY(180deg); /* back */
  44         transform-style: preserve-3d;
  45         -float: left; /* ff workaround to prevent click selection */
  46 }
  47
  48 /* turn results */
  49 figure.turn img {
  50         transform: rotateY(0deg);
  51 }
  52 figure.bad img {
  53         filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
  54 }
  55 figure.good {
  56         opacity: .8;
  57 }
  58
  59 .good figure {
  60         animation: celebration 5s linear infinite;
  61         background: none;
  62         border: 0;
  63 }
  64 @keyframes celebration {
  65         0% { filter: hue-rotate(0deg); transform: rotate(0deg) }
  66         50% { filter: hue-rotate(180deg); transform: rotate(180deg) }
  67         100% { filter: hue-rotate(360deg); transform: rotate(360deg) }
  68 }
  69 </style>
  70 EOT
  71 });
  72 say '<h1>memory</h1><p id="quiz"></p>';