Félix Péault
cdabe6935b
It's been tricky but got there finally! Hello `:global` - Avoid using one global CSS file containing everything - Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used
29 lines
827 B
Svelte
29 lines
827 B
Svelte
<style lang="scss">
|
|
@import "../../style/organisms/collage";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import PhotoCard from '$components/molecules/PhotoCard.svelte'
|
|
|
|
export let photos: any[] = []
|
|
|
|
let hovered: number = null
|
|
</script>
|
|
|
|
{#if photos}
|
|
<div class="collage" class:is-hovering={hovered !== null}>
|
|
{#each photos as { slug, title, image, location, city }, index}
|
|
<PhotoCard
|
|
id={image.id}
|
|
alt={title}
|
|
url="/{location.country.slug}/{location.slug}/{slug}"
|
|
title={title}
|
|
location={location}
|
|
city={city}
|
|
hovered={hovered === index}
|
|
lazy={false}
|
|
on:hover={({ detail }) => hovered = detail ? index : null}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{/if} |