diff --git a/Gems.mjs b/Gems.mjs index e837a02..80aed09 100644 --- 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)