1 <(../common.inc.plp)><:
7 <script src="/word/put.min.js"></script>
8 <script src="/word/quiz.js"></script>
9 <script src="/word/memory.js"></script>
14 grid: auto / repeat(6, 1fr);
18 overflow: hidden; /* rotation overflow on celebration */
23 border: 1px solid #888;
26 figure:not(.turn):hover {
30 transition: all .5s ease-in;
35 backface-visibility: hidden;
36 -webkit-backface-visibility: hidden;
37 transform: rotateY(180deg); /* back */
38 transform-style: preserve-3d;
39 float: left; /* ff workaround to prevent click selection */
41 object-fit: contain; /* center */
44 transform: rotateY(180deg) scaleX(-1);
49 transform: rotateY(0deg);
51 figure.mirror.turn img {
52 transform: rotateY(0deg) scaleX(-1);
55 filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
62 animation: celebration 7s linear infinite;
67 @keyframes celebration {
68 0% { filter: hue-rotate(0deg); transform: rotate(0deg) }
69 33% { filter: hue-rotate(180deg); transform: rotate(180deg) }
70 66% { filter: hue-rotate(360deg); transform: rotate(360deg) }
71 100% { filter: hue-rotate(360deg); transform: rotate(360deg) }
76 say '<h1>memory</h1><p id="quiz"></p>';
77 say "<script>new WordMemory('/$wordlistbase.json')</script>";