tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

corrected visual/layout bugs on index and 404 pages, added backtotop and 404 analytics tracking

Browse Source
This commit is contained in:
zach
2026-03-02 14:09:59 -05:00
parent 521ee2d2a7
commit be4104cb0b
5 changed files with 22 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/404.astro
View File

@@ -39,20 +39,15 @@ const pokemonName = pokemon?.Name || "Unknown Pokémon";
<p class="mb-0">Click the image to reveal.</p>
</div>
<div class="p-0 mx-auto position-relative overflow-hidden d-flex">
<img class="whos-that-pokemon position-absolute" src="/404/lines.gif">
<div class="p-0 ratio ratio-1x1 position-relative overflow-hidden d-flex justify-items-center">
<img class="whos-that-pokemon position-absolute h-100" src="/404/lines.gif">
<div class="mx-auto d-flex flex-col-reverse flex-lg-row">
<div class="ratio ratio-1x1 relative">
<div class="d-flex flex-col-reverse flex-lg-row">
<div class="">
<img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png">
<!-- ✨ Name is placed in a data attribute for later use -->
<img
class="m-auto position-absolute w-50 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle"
src={pokedexImage}
alt={pokemonName}
data-name={pokemonName}
/>
<img class="m-auto position-absolute w-50 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle" src={pokedexImage} alt={pokemonName} data-name={pokemonName} onclick="dataLayer.push({'event': '404reveal','pokemonName': this.getAttribute('data-name')});"/>
</div>
</div>
</div>