diff options
| -rw-r--r-- | app/assets/stylesheets/application.tailwind.css | 18 | ||||
| -rw-r--r-- | app/views/pokedex_entries/_entry.html.erb | 7 |
2 files changed, 23 insertions, 2 deletions
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index d0b2b0b..0c65ec9 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -38,3 +38,21 @@ @apply btn bg-orange-900 text-orange-100; } } + +@layer utilities { + .shiny-glow { + animation: shiny-glow 1s infinite; + } +} + +@keyframes shiny-glow { + 0% { + box-shadow: 0 0 20px #ffa928; + } + 50% { + box-shadow: 0 0 40px #ffa928; + } + 100% { + box-shadow: 0 0 20px #ffa928; + } +} diff --git a/app/views/pokedex_entries/_entry.html.erb b/app/views/pokedex_entries/_entry.html.erb index 992aa69..1c7f0ed 100644 --- a/app/views/pokedex_entries/_entry.html.erb +++ b/app/views/pokedex_entries/_entry.html.erb @@ -1,10 +1,13 @@ <div class="flex space-x-2 items-center"> <div class="flex justify-around bg-white h-[60px] w-[60px] border border-orange-900 - p-1 rounded shadow"> + p-1 rounded shadow <%= "shiny-glow" if entry.shiny? %>"> <%= image_tag entry.pokemon.sprite_path(shiny: entry.shiny?) %> </div> <div> - <div><%= "Shiny " if entry.shiny? %><%= entry.pokemon.name %></div> + <div> + <% "Shiny " if entry.shiny? %> + <%= entry.pokemon.name %> + </div> <div class="text-sm">Recorded by <%= link_to entry.user.name || "???", user_path(entry.user) %> @ <%= entry.recorded_at %> </div> |