DeCentN2Madness
0db10a04d8
- deferred height-equalization script in `HomeProcess.astro` to `document.fonts.ready` - card heights now measured with correct web fonts in all environments, not just Vite dev server
32 lines
950 B
Plaintext
32 lines
950 B
Plaintext
---
|
|
import type { ProcessSection } from '../../types/home-sections';
|
|
interface Props { section: ProcessSection }
|
|
const { section } = Astro.props;
|
|
---
|
|
<section class="section cream-section process-section">
|
|
<div class="container">
|
|
<h2>{section.heading}</h2>
|
|
<div class="process-grid">
|
|
{section.steps.map(({ icon, label }) => (
|
|
<div>
|
|
<img src={`/assets/images/${icon}`} alt="" />
|
|
<p>{label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function equalizeProcessCards() {
|
|
const cards = [...document.querySelectorAll('.process-grid > div')] as HTMLElement[];
|
|
cards.forEach(c => (c.style.height = ''));
|
|
const max = Math.max(...cards.map(c => c.offsetHeight));
|
|
if (max > 0) cards.forEach(c => (c.style.height = `${max}px`));
|
|
}
|
|
document.fonts.ready.then(() => {
|
|
equalizeProcessCards();
|
|
window.addEventListener('resize', equalizeProcessCards);
|
|
});
|
|
</script>
|