Releasing changes

jauntyjocularjay · May 17, 2024 · 8c8df0e · 8c8df0e
2 parents 93bc9af + 337d153
commit 8c8df0e
Showing 1 changed file with 85 additions and 2 deletions.
diff --git a/Gems.mjs b/Gems.mjs
@@ -78,11 +78,94 @@ const IMG =
 
 const css = {
     html: [
-        'background-color: #333',
+        'background-color: #444',
         'color: #fff'
-    ]
+    ],
+    '.field': [
+        'width: 512px',
+        'margin: 0 auto'
+    ],
+    '.card': [
+        'background-color: #333',
+        'border-radius: 16px',
+        'box-shadow: 2px 2px 1px #000, inset 1px 1px 1px #fff'
+    ],
+    '.gem': [
+        'animation: fall 2s ease 0s 1 normal forwards'
+    ],
+    '@keyframes fall { 0%' : [
+        'animation-timing-function: ease-in',
+        'opacity: 0',
+        'transform: translateY(-800%)'
+    ],
+    '@keyframes fall { 38%' : [
+        'animation-timing-function: ease-out',
+        'opacity: 1',
+        'transform: translateY(0)',
+    ],
+    '@keyframes fall { 55%' : [
+        'animation-timing-function: ease-in',
+        'transform: translateY(-65px)'
+    ],
+    '@keyframes fall { 72%' : [
+        'animation-timing-function: ease-out',
+        'transform: translateY(0)'
+    ],
+    '@keyframes fall { 81%' : [
+            'animation-timing-function: ease-in',
+            'transform: translateY(-28px)'
+    ],
+    '@keyframes fall { 90%' : [
+        'animation-timing-function: ease-out',
+        'transform: translateY(0)'
+    ],
+    '@keyframes fall { 95%' : [
+        'animation-timing-function: ease-in',
+        'transform: translateY(-8px)'
+    ],
+    '@keyframes fall { 100%' : [
+        'animation-timing-function: ease-out',
+        'transform: translateY(0)'
+    ],
 }
 
+/*
+    '@keyframes fall { 0%' : [
+        'animation-timing-function: ease-in',
+        'opacity: 0',
+        'transform: translateY(-800%)'
+    ],
+    '@keyframes fall { 38%' : [
+        'animation-timing-function: ease-out',
+        'opacity: 1',
+        'transform: translateY(0)',
+    ],
+    '@keyframes fall { 55%' : [
+        'animation-timing-function: ease-in',
+        'transform: translateY(-65px)'
+    ],
+    '@keyframes fall { 72%' : [
+        'animation-timing-function: ease-out',
+        'transform: translateY(0)'
+    ],
+    '@keyframes fall { 81%' : [
+            'animation-timing-function: ease-in',
+            'transform: translateY(-28px)'
+    ],
+    '@keyframes fall { 90%' : [
+        'animation-timing-function: ease-out'
+        'transform: translateY(0)'
+    ],
+    '@keyframes fall { 95%' : [
+        'animation-timing-function: ease-in'
+        'transform: translateY(-8px)'
+    ],
+    '@keyframes fall { 100%' : [
+        'animation-timing-function: ease-out',
+        'transform: translateY(0)'
+    ],
+*/
+
 class Gem {
 
     constructor(img=null)