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: repeat(3, 1fr) / repeat(4, 1fr);
16 min-height: calc(100vh - 11.5ex);
18 @media (orientation: portrait) {
20 grid: repeat(6, 1fr) / repeat(2, 1fr);
24 overflow: hidden; /* rotation overflow on celebration */
28 display: inline-block;
30 border: 1px solid #888;
34 figure:not(.turn):hover {
38 transition: all .5s ease-in;
43 backface-visibility: hidden;
44 transform: rotateY(180deg); /* back */
45 transform-style: preserve-3d;
46 -float: left; /* ff workaround to prevent click selection */
49 transform: rotateY(180deg) scaleX(-1);
54 transform: rotateY(0deg);
56 figure.mirror.turn img {
57 transform: rotateY(0deg) scaleX(-1);
60 filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
67 animation: celebration 7s linear infinite;
72 @keyframes celebration {
73 0% { filter: hue-rotate(0deg); transform: rotate(0deg) }
74 33% { filter: hue-rotate(180deg); transform: rotate(180deg) }
75 66% { filter: hue-rotate(360deg); transform: rotate(360deg) }
76 100% { filter: hue-rotate(360deg); transform: rotate(360deg) }
81 if (my $gridsize = $get{grid}) {
82 printf "<style>#quiz {grid: repeat(%d, 1fr) / repeat(%d, 1fr)}</style>",
83 reverse split /\D+/, $gridsize;
86 say '<h1>memory</h1><p id="quiz"></p>';
87 say "<script>new WordMemory('/$wordlistbase.json')</script>";