23 lines
1.9 KiB
Plaintext
23 lines
1.9 KiB
Plaintext
---
|
|
import Image from "astro/components/Image.astro"
|
|
import '/src/assets/css/main.scss';
|
|
---
|
|
|
|
<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> |