cli: frontend page listing commandline parameters

[sheet.git] / word / memory.plp

diff --git a/word/memory.plp b/word/memory.plp
index 26a7cd4e04330feae707c0b84b53b5e5c0032e2d..d15d619dce6e934c23e656373a94ec205ba198dc 100644 (file)
--- a/word/memory.plp
+++ b/word/memory.plp
@@ -41,6 +41,7 @@ figure, img {
 /* card faces */
 figure img {
        backface-visibility: hidden;
+       -webkit-backface-visibility: hidden;
        transform: rotateY(180deg); /* back */
        transform-style: preserve-3d;
        -float: left; /* ff workaround to prevent click selection */
@@ -64,17 +65,24 @@ figure.good {
 }
 
 .good figure {
-       animation: celebration 5s linear infinite;
+       animation: celebration 7s linear infinite;
        background: none;
        border: 0;
+       opacity: 1;
 }
 @keyframes celebration {
        0% { filter: hue-rotate(0deg); transform: rotate(0deg) }
-       50% { filter: hue-rotate(180deg); transform: rotate(180deg) }
+       33% { filter: hue-rotate(180deg); transform: rotate(180deg) }
+       66% { filter: hue-rotate(360deg); transform: rotate(360deg) }
        100% { filter: hue-rotate(360deg); transform: rotate(360deg) }
 }
 </style>
 EOT
 });
+if (my $gridsize = $get{grid}) {
+       printf "<style>#quiz {grid: repeat(%d, 1fr) / repeat(%d, 1fr)}</style>",
+               reverse split /\D+/, $gridsize;
+       say '';
+}
 say '<h1>memory</h1><p id="quiz"></p>';
 say "<script>new WordMemory('/$wordlistbase.json')</script>";