147 lines
5.1 KiB
Svelte
147 lines
5.1 KiB
Svelte
<style lang="scss">
|
||
@import "../../style/pages/credits";
|
||
</style>
|
||
|
||
<script lang="ts">
|
||
import { navigating } from '$app/stores'
|
||
import type { PageData } from './$types'
|
||
import { onMount } from 'svelte'
|
||
import { stagger, timeline } from 'motion'
|
||
import { DELAY } from '$utils/contants'
|
||
import { quartOut } from 'svelte/easing'
|
||
// Components
|
||
import Metas from '$components/Metas.svelte'
|
||
import PageTransition from '$components/PageTransition.svelte'
|
||
import Image from '$components/atoms/Image.svelte'
|
||
import Heading from '$components/molecules/Heading.svelte'
|
||
import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
|
||
|
||
export let data: PageData
|
||
|
||
|
||
onMount(() => {
|
||
/**
|
||
* Animations
|
||
*/
|
||
const animation = timeline([
|
||
// Heading
|
||
['.heading .text', {
|
||
y: [24, 0],
|
||
opacity: [0, 1],
|
||
}],
|
||
|
||
// Categories
|
||
['.credits__category', {
|
||
opacity: [0, 1],
|
||
}, {
|
||
at: 0,
|
||
delay: stagger(0.35, { start: 0.5 }),
|
||
}],
|
||
|
||
// Names
|
||
['.credits__category > ul > li', {
|
||
y: [24, 0],
|
||
opacity: [0, 1],
|
||
}, {
|
||
at: 1.1,
|
||
delay: stagger(0.35),
|
||
}],
|
||
], {
|
||
delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
|
||
defaultOptions: {
|
||
duration: 1.6,
|
||
easing: quartOut,
|
||
},
|
||
})
|
||
animation.stop()
|
||
|
||
// Run animation
|
||
requestAnimationFrame(animation.play)
|
||
})
|
||
</script>
|
||
|
||
<Metas
|
||
title="Credits – Houses Of"
|
||
description={data.credits.text}
|
||
image=""
|
||
/>
|
||
|
||
|
||
<PageTransition name="credits">
|
||
<Heading
|
||
text={data.credits.text}
|
||
/>
|
||
|
||
<section class="credits__list">
|
||
<div class="grid container">
|
||
{#each data.credits.list as { title, credits }}
|
||
<div class="credits__category grid">
|
||
<h2 class="title-small">{title}</h2>
|
||
<ul>
|
||
{#each credits as { name, role, website }}
|
||
<li>
|
||
<dl>
|
||
<dt>
|
||
{#if website}
|
||
<h3>
|
||
<a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
|
||
</h3>
|
||
{:else}
|
||
<h3>{name}</h3>
|
||
{/if}
|
||
</dt>
|
||
<dd>
|
||
{role}
|
||
</dd>
|
||
</dl>
|
||
</li>
|
||
{/each}
|
||
</ul>
|
||
</div>
|
||
{/each}
|
||
|
||
<div class="credits__category grid">
|
||
<h2 class="title-small">Photography</h2>
|
||
<ul>
|
||
{#each data.credit as { name, website, location }}
|
||
<li>
|
||
<dl>
|
||
<dt>
|
||
{#if website}
|
||
<h3>
|
||
<a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
|
||
</h3>
|
||
{:else}
|
||
<h3>{name}</h3>
|
||
{/if}
|
||
</dt>
|
||
<dd>
|
||
<ul>
|
||
{#each location as loc}
|
||
{#if loc.location_id}
|
||
<li>
|
||
<a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" sveltekit:noscroll tabindex="0">
|
||
<Image
|
||
id={loc.location_id.country.flag.id}
|
||
sizeKey="square-small"
|
||
width={16}
|
||
height={16}
|
||
alt="Flag of {loc.location_id.country.slug}"
|
||
/>
|
||
<span>{loc.location_id.name}</span>
|
||
</a>
|
||
</li>
|
||
{/if}
|
||
{/each}
|
||
</ul>
|
||
</dd>
|
||
</dl>
|
||
</li>
|
||
{/each}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<InteractiveGlobe2 type="cropped" />
|
||
</PageTransition> |