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

added local assets for 404 page shenanigans, added pokedex header, and continued to add set icon mappings

Browse Source
This commit is contained in:
zach
2026-02-23 17:04:45 -05:00
parent dcd2761403
commit 30433696e5
980 changed files with 144308 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/404.astro
View File

@@ -1,19 +1,19 @@
---
import Layout from '../layouts/Main.astro';
import StickyFilter from '../components/StickyFilter.astro';
import Image from 'astro/components/Image.astro';
const searchParams = Astro.url.searchParams;
const query = searchParams.get('q') || '*';
const randomNumber = Math.floor(Math.random() * 1025) + 1;
const randomNumber = String(Math.floor(Math.random() * 151) + 1).padStart(4, "0");
const pokedexImage = `/404/pokedex/${randomNumber}.svg?raw`;
---
<Layout>
<StickyFilter />
<style>
.masked-image {
filter: brightness(0);
}
</style>
<div class="container">
<div class="row col-10 mx-auto mt-5">
@@ -27,12 +27,12 @@ const randomNumber = Math.floor(Math.random() * 1025) + 1;
<h4 class="alert-heading">Who's that Pokémon?</h4>
<p class="mb-0">Click to reveal.</p>
</div>
<div class="mx-auto position-relative overflow-hidden d-flex">
<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="mx-auto d-flex flex-col-reverse flex-lg-row">
<div class="ratio ratio-1x1 relative">
<img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png">
<img class="m-auto position-absolute w-75 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle" src={`https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/${randomNumber}.png`} alt="">
<Image 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="Who is that Pokémon?" width={100} height={100}></Image>
</div>
</div>
</div>