diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css index 76f03901c..2f39af5b9 100644 --- a/app/assets/stylesheets/animation.css +++ b/app/assets/stylesheets/animation.css @@ -11,6 +11,13 @@ 75% { transform: translateX(1rem); } } +@keyframes shimmy { + 0% { transform: translateX(-0.5rem); } + 25% { transform: translateX(0.5rem); } + 50% { transform: translateX(-0.2rem); } + 75% { transform: translateX(0.2rem); } +} + @keyframes splat { 0% { transform: scale(150%); opacity: 0; } 29% { transform: scale(150%); opacity: 0; } diff --git a/app/assets/stylesheets/splats.css b/app/assets/stylesheets/splats.css index 45d851487..89359fd13 100644 --- a/app/assets/stylesheets/splats.css +++ b/app/assets/stylesheets/splats.css @@ -3,11 +3,6 @@ } .windshield { - align-items: end; - background-color: var(--color-bg); - display: inline-flex; - flex-wrap: wrap; - justify-content: center; margin-block: clamp(var(--block-space), 3%, calc(var(--block-space) * 2)); > * { @@ -51,6 +46,7 @@ @media (hover: hover) { .windshield &:hover { + animation: shimmy 400ms normal forwards ease-out; scale: 1.1; z-index: 999; diff --git a/app/views/splats/index.html.erb b/app/views/splats/index.html.erb index 1282a61b3..251097829 100644 --- a/app/views/splats/index.html.erb +++ b/app/views/splats/index.html.erb @@ -25,7 +25,7 @@ <% end %> -
+
<%= render @splats.last(10) %>