64 lines
1.6 KiB
Svelte
64 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { ScrollerStep } from '../@types/global';
|
|
|
|
import { Markdown } from '@reuters-graphics/svelte-markdown';
|
|
|
|
interface Props {
|
|
steps: ScrollerStep[];
|
|
}
|
|
|
|
let { steps }: Props = $props();
|
|
</script>
|
|
|
|
{#each steps as step, i}
|
|
<div
|
|
class="step-foreground-container step-{i +
|
|
1} mb-20 h-screen flex items-center justify-center"
|
|
>
|
|
{#if step.foreground === '' || !step.foreground}
|
|
<!-- Empty foreground -->
|
|
<div class="empty-step-foreground"></div>
|
|
{#if typeof step.altText === 'string'}
|
|
<div class="background-alt-text visually-hidden">
|
|
<Markdown source={step.altText} />
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<div class="step-foreground w-full">
|
|
{#if typeof step.foreground === 'string'}
|
|
<Markdown source={step.foreground} />
|
|
{:else}
|
|
<step.foreground {...step.foregroundProps || {}}></step.foreground>
|
|
{/if}
|
|
</div>
|
|
{#if typeof step.altText === 'string'}
|
|
<div class="background-alt-text visually-hidden">
|
|
<Markdown source={step.altText} />
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
|
|
<style lang="scss">
|
|
@use './../../scss/mixins' as mixins;
|
|
|
|
div.step-foreground-container {
|
|
width: initial;
|
|
max-width: initial;
|
|
.step-foreground {
|
|
max-width: calc(mixins.$column-width-normal * 0.9);
|
|
border-radius: 0.25rem;
|
|
@include mixins.fpy-5;
|
|
@include mixins.fpx-4;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
:global(p:last-child) {
|
|
margin-block-end: 0;
|
|
}
|
|
:global(*:first-child) {
|
|
margin-block-start: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|