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

re-did 404 images and added mapping, re-did menu/search components for auth, removed unneeded files and cleaned up css

Browse Source
This commit is contained in:
zach
2026-02-26 18:08:08 -05:00
parent 187da306f0
commit d149312f3d
1046 changed files with 4594 additions and 1042 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/EnergyWheel.astro
View File

@@ -3,16 +3,21 @@ import Image from "astro/components/Image.astro"
import '/src/assets/css/main.scss';
---
<div class="circle float-start ms-5">
<Image class="circle-item rounded-shadow" style="--i: 0" src="/src/svg/energy/grass.svg?raw" alt="Grass Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 1" src="/src/svg/energy/fire.svg?raw" alt="Fire Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 2" src="/src/svg/energy/water.svg?raw" alt="Water Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 3" src="/src/svg/energy/electric.svg?raw" alt="Electric Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 4" src="/src/svg/energy/psychic.svg?raw" alt="Psychic Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 5" src="/src/svg/energy/fighting.svg?raw" alt="Fighting Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 6" src="/src/svg/energy/dark.svg?raw" alt="Dark Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 7" src="/src/svg/energy/steel.svg?raw" alt="Steel Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 8" src="/src/svg/energy/colorless.svg?raw" alt="Colorless Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 9" src="/src/svg/energy/fairy.svg?raw" alt="Fairy Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 10" src="/src/svg/energy/dragon.svg?raw" alt="Dragon Energy" width={25} height={25}></Image>
</div>
<div class="energy-wheel">
<Image class="energy-wheel-item rounded-shadow" style="--i: 0" src="/src/svg/energy/colorless.svg?raw" alt="Colorless Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 1" src="/src/svg/energy/dark.svg?raw" alt="Dark Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 2" src="/src/svg/energy/dragon.svg?raw" alt="Dragon Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 3" src="/src/svg/energy/electric.svg?raw" alt="Electric Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 4" src="/src/svg/energy/fighting.svg?raw" alt="Fighting Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 5" src="/src/svg/energy/fairy.svg?raw" alt="Fairy Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 6" src="/src/svg/energy/fire.svg?raw" alt="Fire Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 7" src="/src/svg/energy/grass.svg?raw" alt="Grass Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 8" src="/src/svg/energy/psychic.svg?raw" alt="Psychic Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 9" src="/src/svg/energy/steel.svg?raw" alt="Steel Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 10" src="/src/svg/energy/water.svg?raw" alt="Water Energy" width={25} height={25}></Image>
</div>
<script>
document.querySelectorAll(".energy-wheel-item").forEach((el, i, arr) => {
el.style.zIndex = arr.length - i;
});
</script>