www/src/components/Circles.astro
mr. M a594d343b4
Some checks are pending
Upload to bunny / upload (1.22.3) (push) Waiting to run
feat: update styles and components for theme support; add FontAwesome icons
2024-12-09 00:30:05 +01:00

18 lines
No EOL
661 B
Text

---
const { white, multiplier = 0.9, class: classList } = Astro.props;
const sizes = [216, 396, 576, 756]
const borderWidths = [20, 30, 40, 50]
---
<div id="circles" class:list={["inset-0 overflow-hidden pointer-events-none", classList]}>
<div class="mx-auto opacity-10 lg:opacity-100">
{[...Array(4)].map((_, i) => (
<div class:list={["absolute rounded-full -translate-x-1/2 -translate-y-1/2", white ? "border-paper" : "border-coral"]}
style={{
width: `${multiplier*sizes[i]}px`,
height: `${multiplier*sizes[i]}px`,
borderWidth: `${multiplier*borderWidths[i]}px`,
}}
/>
))}
</div>
</div>