🚧 Switch to monorepo with Turbo
This commit is contained in:
41
apps/website/src/components/atoms/AboutGridPhoto.svelte
Normal file
41
apps/website/src/components/atoms/AboutGridPhoto.svelte
Normal file
@@ -0,0 +1,41 @@
|
||||
<script lang="ts">
|
||||
import Image from './Image.svelte'
|
||||
|
||||
export let id: string
|
||||
export let alt: string
|
||||
export let disabled: boolean = false
|
||||
|
||||
let hovering: boolean = false
|
||||
let timer: ReturnType<typeof setTimeout> | number = null
|
||||
|
||||
$: classes = [
|
||||
hovering ? 'is-hovered' : undefined,
|
||||
disabled ? 'is-disabled' : undefined,
|
||||
$$props.class
|
||||
].join(' ').trim()
|
||||
|
||||
// Hovering functions
|
||||
const handleMouseEnter = () => {
|
||||
clearTimeout(timer)
|
||||
hovering = true
|
||||
}
|
||||
const handleMouseLeave = () => {
|
||||
// Reset hovering to false after a delay
|
||||
timer = setTimeout(() => hovering = false, 800)
|
||||
}
|
||||
</script>
|
||||
|
||||
<figure class={classes}
|
||||
on:mouseenter={handleMouseEnter}
|
||||
on:mouseleave={handleMouseLeave}
|
||||
>
|
||||
<Image
|
||||
{id}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 250 },
|
||||
}}
|
||||
ratio={1.5}
|
||||
{alt}
|
||||
/>
|
||||
</figure>
|
||||
12
apps/website/src/components/atoms/Badge.svelte
Normal file
12
apps/website/src/components/atoms/Badge.svelte
Normal file
@@ -0,0 +1,12 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/badge";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
export let text: string
|
||||
export let size: string = 'small'
|
||||
</script>
|
||||
|
||||
<div class="badge badge--{size}">
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
21
apps/website/src/components/atoms/BoxCTA.svelte
Normal file
21
apps/website/src/components/atoms/BoxCTA.svelte
Normal file
@@ -0,0 +1,21 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/box-cta";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import Icon from '$components/atoms/Icon.svelte'
|
||||
|
||||
export let icon: string
|
||||
export let alt: string
|
||||
export let label: string
|
||||
export let url: string
|
||||
</script>
|
||||
|
||||
<a href={url} class="box-cta">
|
||||
<div class="icon">
|
||||
<Icon icon={icon} label={alt} />
|
||||
</div>
|
||||
<span class="text-label">
|
||||
{label}
|
||||
</span>
|
||||
</a>
|
||||
60
apps/website/src/components/atoms/Button.svelte
Normal file
60
apps/website/src/components/atoms/Button.svelte
Normal file
@@ -0,0 +1,60 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/button";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import SplitText from '$components/SplitText.svelte'
|
||||
|
||||
export let tag: string = 'a'
|
||||
export let text: string
|
||||
export let url: string = undefined
|
||||
export let color: string = undefined
|
||||
export let size: string = undefined
|
||||
export let effect: string = 'link-3d'
|
||||
export let disabled: boolean = undefined
|
||||
export let slotPosition: string = 'before'
|
||||
|
||||
const className = 'button'
|
||||
const classes = [
|
||||
className,
|
||||
effect ? effect : undefined,
|
||||
...[color, size].map(variant => variant && `${className}--${variant}`),
|
||||
Object.keys($$slots).length !== 0 ? `has-icon-${slotPosition}` : undefined,
|
||||
$$props.class
|
||||
].join(' ').trim()
|
||||
|
||||
// Define external links
|
||||
$: isExternal = /^(http|https):\/\//i.test(url)
|
||||
$: isProtocol = /^(mailto|tel):/i.test(url)
|
||||
$: rel = isExternal ? 'external noopener' : null
|
||||
$: target = isExternal ? '_blank' : null
|
||||
</script>
|
||||
|
||||
{#if tag === 'button'}
|
||||
<button class={classes} tabindex="0" {disabled} on:click>
|
||||
{#if slotPosition === 'before'}
|
||||
<slot />
|
||||
{/if}
|
||||
<SplitText {text} clone={true} />
|
||||
{#if slotPosition === 'after'}
|
||||
<slot />
|
||||
{/if}
|
||||
</button>
|
||||
{:else if tag === 'a'}
|
||||
<a
|
||||
href={url} class={classes}
|
||||
{target} {rel}
|
||||
data-sveltekit-noscroll={isExternal || isProtocol ? 'off' : ''}
|
||||
{disabled}
|
||||
tabindex="0"
|
||||
on:click
|
||||
>
|
||||
{#if slotPosition === 'before'}
|
||||
<slot />
|
||||
{/if}
|
||||
<SplitText {text} clone={true} />
|
||||
{#if slotPosition === 'after'}
|
||||
<slot />
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
27
apps/website/src/components/atoms/ButtonCart.svelte
Normal file
27
apps/website/src/components/atoms/ButtonCart.svelte
Normal file
@@ -0,0 +1,27 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/button-cart";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { scale } from 'svelte/transition'
|
||||
import { quartOut } from 'svelte/easing'
|
||||
import { cartOpen, cartAmount } from '$utils/stores/shop'
|
||||
import { sendEvent } from '$utils/analytics'
|
||||
// Components
|
||||
import Icon from '$components/atoms/Icon.svelte'
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
|
||||
|
||||
const openCart = () => {
|
||||
$cartOpen = true
|
||||
sendEvent('cartOpen')
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="button-cart">
|
||||
<ButtonCircle color="purple" on:click={openCart}>
|
||||
<Icon icon="bag" label="Cart icon" />
|
||||
{#if $cartAmount > 0}
|
||||
<span class="quantity" transition:scale={{ start: 0.6, duration: 400, easing: quartOut }}>{$cartAmount}</span>
|
||||
{/if}
|
||||
</ButtonCircle>
|
||||
</div>
|
||||
44
apps/website/src/components/atoms/ButtonCircle.svelte
Normal file
44
apps/website/src/components/atoms/ButtonCircle.svelte
Normal file
@@ -0,0 +1,44 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/button-circle";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
export let tag: string = 'button'
|
||||
export let url: string = undefined
|
||||
export let color: string = undefined
|
||||
export let size: string = undefined
|
||||
export let type: string = undefined
|
||||
export let clone: boolean = false
|
||||
export let disabled: boolean = undefined
|
||||
export let label: string = undefined
|
||||
|
||||
const className = 'button-circle'
|
||||
const classes = [
|
||||
className,
|
||||
...[color, size].map(variant => variant && `${className}--${variant}`),
|
||||
clone ? 'has-clone' : null,
|
||||
$$props.class
|
||||
].join(' ').trim()
|
||||
</script>
|
||||
|
||||
{#if tag === 'a'}
|
||||
<a href={url} class={classes} tabindex="0" aria-label={label} on:click>
|
||||
{#if clone}
|
||||
{#each Array(2) as _}
|
||||
<slot />
|
||||
{/each}
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</a>
|
||||
{:else}
|
||||
<button {type} class={classes} disabled={disabled} tabindex="0" aria-label={label} on:click>
|
||||
{#if clone}
|
||||
{#each Array(2) as _}
|
||||
<slot />
|
||||
{/each}
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
15
apps/website/src/components/atoms/DiscoverText.svelte
Normal file
15
apps/website/src/components/atoms/DiscoverText.svelte
Normal file
@@ -0,0 +1,15 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/discover";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte'
|
||||
|
||||
const { count }: any = getContext('global')
|
||||
</script>
|
||||
|
||||
<p class="discover">
|
||||
Discover <strong>{count.photos} homes</strong><br>
|
||||
from <strong>{count.locations} places</strong>
|
||||
in <strong>{count.countries} countries</strong>
|
||||
</p>
|
||||
10
apps/website/src/components/atoms/Icon.svelte
Normal file
10
apps/website/src/components/atoms/Icon.svelte
Normal file
@@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
export let icon: string
|
||||
export let label: string = undefined
|
||||
|
||||
const classes = [$$props.class].join(' ').trim()
|
||||
</script>
|
||||
|
||||
<svg class={classes} aria-label={label} width="32" height="32">
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
15
apps/website/src/components/atoms/IconArrow.svelte
Normal file
15
apps/website/src/components/atoms/IconArrow.svelte
Normal file
@@ -0,0 +1,15 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/arrow";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
export let color: string = undefined
|
||||
export let flip: boolean = false
|
||||
</script>
|
||||
|
||||
<svg width="12" height="14"
|
||||
class="arrow arrow--{color}"
|
||||
class:arrow--flip={flip}
|
||||
>
|
||||
<use xlink:href="#arrow" />
|
||||
</svg>
|
||||
44
apps/website/src/components/atoms/IconEarth.svelte
Normal file
44
apps/website/src/components/atoms/IconEarth.svelte
Normal file
@@ -0,0 +1,44 @@
|
||||
<style lang="scss">
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $color-gray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
export let animate: boolean = false
|
||||
|
||||
const classes = ['icon-earth', $$props.class].join(' ').trim()
|
||||
</script>
|
||||
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
class={classes}
|
||||
>
|
||||
{#if animate}
|
||||
<defs>
|
||||
<mask id="circle" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
|
||||
<circle cx="24" cy="24" r="23" fill="currentColor" stroke="currentColor" stroke-width="2"/>
|
||||
</mask>
|
||||
</defs>
|
||||
<g mask="url(#circle)" fill="currentColor">
|
||||
<g class:anim-earth={animate}>
|
||||
<path d="M23.56 26.87a.63.63 0 0 1-.61-.64c-.06-1.26-1.06.38-2.42-1.48a.65.65 0 0 0-.56-.28c-7.11.3-2.58-.64-5.48-1.45a.65.65 0 0 1-.46-.6c0-1.73-2.2-.06-.78-2.55a.6.6 0 0 1 .33-.28c1.91-.7 2.12-.44 2.3-.07a.63.63 0 0 0 1.2-.11c.37-1.16 2.28-1.98 3.3-2.6a.64.64 0 0 0 .3-.68l-.1-.4a.62.62 0 0 1 0-.21.63.63 0 0 1 .71-.54l2.9.3h.02a.63.63 0 0 0 .69-.59c.05-.93.28-2.27-.56-2.23a.67.67 0 0 1-.6-.37l-.39-.78a.63.63 0 0 0-.67-.36c-.76.14-2.04.3-2.56.75a.65.65 0 0 1-.69.11c-2.41-1.04.7-.32 1.49-3.05l.02-.14a.63.63 0 0 0-.58-.68c-1.7-.15-4.22-.95-5.15.6a.65.65 0 0 1-.63.3L5.21 7.67a.62.62 0 0 0-.47.12.63.63 0 0 0-.23.67l.18.78a.66.66 0 0 1-.03.39.63.63 0 0 1-.58.39c-1.15-.04-1.11.2-1.06 1.64a.63.63 0 0 0 .32.52c.52.28 1.1.42 1.69.4v.04a.63.63 0 0 0 .63-.55c.2-1.27 1.77-.53 2.85-.53a.63.63 0 0 1 .5.25 3.28 3.28 0 0 1 .6 2.47.65.65 0 0 1-.57.56h-.16a.63.63 0 0 0-.56.58l-.33 3.66a.63.63 0 0 0 .18.52c.82.8 1.9 1.27 1.49 2.37a.61.61 0 0 0 .44.85c1.06.2 2.76.48 2.98.95a.63.63 0 0 0 .44.35c2.05.45.32 2.35 1.8 1.45a.64.64 0 0 1 .96.73c-.13.45-.32.88-.75 1.04a.61.61 0 0 0-.4.58v.93a.62.62 0 0 0 .23.48c4.02 3.05-1.3 2.33 2.98 4.47a.64.64 0 0 1 .37.56c.04 1.49-.48 5.8.6 6.64a.65.65 0 0 1 .24.67c-.37 1.53.55 1.67 1.73 2.27l.1.04a.63.63 0 0 0 .79-.41c.96-2.72-1.45.76-.82-4.97a.62.62 0 0 1 .24-.43c7.92-6.03 1.38-3.9 5.24-7.52a.65.65 0 0 0 .12-.8c-.95-1.61-1.34-2.86-3.39-2.97ZM84.07 9.8c-.76-1.37-3.07-.3-4.46-.16a.46.46 0 0 1-.47-.24c-.85-1.6-4.89-1.83-6.36-2.13a.52.52 0 0 0-.18 0c-3.1.5-4.22 1.8-6.53-.98a.47.47 0 0 0-.37-.19h-7.25a.48.48 0 0 0-.24.06c-3.01 1.7-.04 1.78-3.3 2.55a.48.48 0 0 1-.5-.19c-.55-.7-3.78-.18-4.21-.33l-3.48-1.2a.48.48 0 0 0-.31 0c-2.05.82-2.75 1.35-3.35 3.52a.5.5 0 0 0 .06.34l.5.96a.46.46 0 0 0 .4.25c.84.03 1.4.13 1.57-.84a.49.49 0 0 1 .24-.34c1.49-.76.97.9 1.08 1.96a.47.47 0 0 1-.3.5l-2 .7a.46.46 0 0 1-.62-.35c-.13-.68-.31-.96-1.02-1.08a.46.46 0 0 0-.52.5c.06 1.25-.35 1.3-1.65 1.6-.11.04-.2.1-.26.2-.4.51-.62.9-.47 1.4a.47.47 0 0 1-.45.58c-1.22.02-.74.65-.5 1.86a.46.46 0 0 0 .45.39c.8.04 1.34.1 1.52-.74a.46.46 0 0 1 .5-.36c.64.07 1.29-.04 1.86-.33a.46.46 0 0 1 .58.07c.37.43.65.75.65 1.21a.47.47 0 0 0 .65.43h.02a.46.46 0 0 0 .24-.61c-.1-.22-.22-.48-.3-.73a.47.47 0 0 1 .82-.42c.7.98.95 1.63 2.34.93a.47.47 0 0 1 .54.07c.73.7 1.29 1.28.9 2.34a.47.47 0 0 1-.32.28c-1.54.45-3.55 1-5.02.06a.46.46 0 0 1-.2-.28c-.38-1.64-2.03-1.2-3.33-1.28a.47.47 0 0 0-.32.1l-3.87 3.1a.46.46 0 0 0-.19.33c-.03.67-.14 2.18-.7 2.53a.48.48 0 0 0-.2.41v1.77c0 .12.04.23.12.32 3.22 3.5 4.4.82 7.25 2.64a.48.48 0 0 1 .23.39c0 1.34-.08 1.94 1.28 2.44a.47.47 0 0 1 .3.52c-1.12 6.14.72 3.44.89 8.13a.47.47 0 0 0 .33.45c2.88.83 3.2-.28 5.15-2.16a.47.47 0 0 0 .13-.37c-.1-2.31-.44-3.1 1.68-4.43a.47.47 0 0 0 .22-.41c0-2.44-.15-3.85 1.9-5.53a.49.49 0 0 0 .18-.39c-.1-1.64-1.28-1.6-2.55-1.93a.46.46 0 0 1-.35-.47c.04-2.16-1.37-1.62-1.11-3.7a.46.46 0 0 1 .72-.34c.63.45 1.32 1.68 1.7 2.16a.47.47 0 0 1 .09.37c-.5 2.66 2.06.75 3.38-.09a.46.46 0 0 0 .15-.64v-.01l-1.48-2.23a.46.46 0 0 1 .09-.65c.08-.06.18-.1.28-.1l.67-.02a.47.47 0 0 1 .48.32c.41 1.41 2.34 2.4 3.7 2.94a.46.46 0 0 1 .28.54c-.47 2.05 1.08 2.94 2.42 4.13a.47.47 0 0 0 .75-.18l1.48-4.06a.47.47 0 0 1 .52-.3l1.03.19a.47.47 0 0 1 .37.3l1 2.79.11.15.19.2a.46.46 0 0 0 .82-.33c-.04-.79.09-1.38.9-.41a.46.46 0 0 0 .55.14c2.04-.89 1.33-2.53 1.3-4.37a.46.46 0 0 1 .39-.46c1.3-.23 1.4-.86 1.67-2.1a.47.47 0 0 0-.11-.41l-1.2-1.36a.46.46 0 0 1-.08-.53c.28-.55.73-1.45 1.34-1.45a.44.44 0 0 0 .43-.24c.44-.97 1.86-3.96 2.36-5.1a.46.46 0 0 1 .69-.18c.6.39.61.98.57 1.76a.47.47 0 0 0 .24.45c1.92 1.04-.01-1.79 4.65-3.94a.46.46 0 0 0 .24-.61l-.01-.04Z"/>
|
||||
<path d="m30.64 5.77-2.4-1.5a1.77 1.77 0 0 0-1.39-.21c-1.74.46-5.93 1.1-5.05 2.58 2.1 2.98-.99 3.03 1.99 3.54.38.07.73.28.98.6h.02c1.93 2.41 2.4 2.13 3.72-.47.18-.37.49-.65.87-.8 1.92-.73 2.57-.49 1.97-2.77-.1-.4-.36-.75-.7-.97Zm8.63 8.02.54.1c.06.02.12.02.18 0h.02c1.12-.18 1.1-.81 1.04-1.61a.56.56 0 0 0-1.04-.13l-.02.04a.52.52 0 0 1-.48.39c-.52.03-.69.18-.69.69a.56.56 0 0 0 .45.52ZM77.7 37a.26.26 0 0 0-.05-.1c-.3-.5-.92-2.46-1.63-3.04a.26.26 0 0 0-.41.23c.02.65 0 .89-.82.61a.25.25 0 0 1-.15-.15v.02c-.31-.74-1.48-.37-2.15-.24a.26.26 0 0 0-.17.13c-.37.74-1.41 1.45-2.23 1.82a.61.61 0 0 0-.37.6l.13 1.99a.61.61 0 0 0 .61.58h2.42c.07 0 .14.03.18.09.56.65 2.29.98 3.15 1.13a.26.26 0 0 0 .22-.07 3.9 3.9 0 0 0 1.26-3.6Zm1.54 2.15a10.45 10.45 0 0 1-2.75 2.95.44.44 0 0 0-.2.49c.29.8.9.74 1.68.73a.44.44 0 0 0 .41-.38c.69-3.22 2.66-2.36 1.49-3.76a.45.45 0 0 0-.63-.03ZM55.63 35.6c-.32-.17-.62.12-.86.48a3.5 3.5 0 0 0-.6 2.42c.14.93.5 1.73 1.46.95-.08-.62 1.43-3.87 0-3.86Zm20.72-14.18c.95 2.14 1.92-.15 2.57-1.34a.9.9 0 0 0 .1-.45c-.14-1.06-.25-3.16-1.23-3.15a.69.69 0 0 0-.66.94v.01c.34 1-.37 2.46-.78 3.39a.72.72 0 0 0 0 .6Zm34.09 5.45a.63.63 0 0 1-.61-.64c-.06-1.26-1.06.38-2.42-1.48a.65.65 0 0 0-.56-.28c-7.12.3-2.58-.64-5.48-1.45a.65.65 0 0 1-.46-.6c0-1.73-2.2-.06-.78-2.55a.6.6 0 0 1 .33-.28c1.91-.7 2.12-.44 2.3-.07a.63.63 0 0 0 1 .22c.1-.1.16-.2.2-.33.37-1.16 2.28-1.98 3.3-2.6.11-.08.2-.18.26-.3a.63.63 0 0 0 .04-.38l-.1-.4a.63.63 0 0 1 0-.21.63.63 0 0 1 .7-.54l2.9.3h.03a.63.63 0 0 0 .68-.59c.06-.93.28-2.27-.55-2.23a.67.67 0 0 1-.6-.37l-.39-.78a.64.64 0 0 0-.67-.36c-.76.14-2.04.3-2.56.75a.65.65 0 0 1-.7.11c-2.4-1.04.72-.32 1.5-3.05l.02-.14a.63.63 0 0 0-.58-.68c-1.71-.15-4.22-.95-5.15.6a.65.65 0 0 1-.63.3l-9.37-1.16a.63.63 0 0 0-.7.78l.18.78a.66.66 0 0 1-.03.4.63.63 0 0 1-.58.38c-1.16-.03-1.12.2-1.06 1.64a.63.63 0 0 0 .31.52c.52.29 1.1.43 1.7.41v.04a.63.63 0 0 0 .63-.56c.2-1.26 1.76-.52 2.84-.52a.63.63 0 0 1 .5.24 3.28 3.28 0 0 1 .6 2.48.65.65 0 0 1-.56.56h-.16a.63.63 0 0 0-.56.57l-.34 3.67a.63.63 0 0 0 .18.52c.82.8 1.9 1.27 1.5 2.37a.61.61 0 0 0 .44.85c1.06.2 2.75.48 2.97.95a.63.63 0 0 0 .45.35c2.04.45.31 2.35 1.8 1.45a.64.64 0 0 1 .95.73c-.13.45-.32.88-.74 1.04a.61.61 0 0 0-.41.58v.93a.62.62 0 0 0 .24.48c4.01 3.05-1.3 2.33 2.97 4.47a.64.64 0 0 1 .37.56c.04 1.49-.48 5.8.6 6.64a.65.65 0 0 1 .24.67c-.37 1.53.56 1.67 1.73 2.27a.62.62 0 0 0 .77-.16c.06-.06.1-.13.12-.21.97-2.72-1.45.76-.82-4.97a.61.61 0 0 1 .25-.43c7.91-6.03 1.37-3.9 5.24-7.52a.65.65 0 0 0 .1-.8c-.94-1.61-1.32-2.86-3.37-2.97Zm60.52-17.02a.3.3 0 0 0-.02-.04c-.76-1.38-3.06-.3-4.46-.17a.46.46 0 0 1-.46-.24c-.85-1.6-4.89-1.83-6.36-2.13a.52.52 0 0 0-.18 0c-3.1.5-4.22 1.8-6.53-.98a.48.48 0 0 0-.37-.19h-7.25a.47.47 0 0 0-.24.06c-3.01 1.7-.04 1.78-3.3 2.55a.48.48 0 0 1-.51-.19c-.54-.7-3.77-.18-4.2-.33l-3.48-1.2a.48.48 0 0 0-.31 0c-2.05.82-2.75 1.35-3.35 3.52a.5.5 0 0 0 .06.34l.5.96a.46.46 0 0 0 .4.25c.84.03 1.4.13 1.57-.84a.48.48 0 0 1 .24-.34c1.49-.76.97.9 1.08 1.96a.47.47 0 0 1-.3.5l-2.01.7a.46.46 0 0 1-.5-.12.47.47 0 0 1-.11-.23c-.13-.68-.32-.96-1.03-1.08a.46.46 0 0 0-.52.5c.06 1.25-.35 1.3-1.65 1.6-.1.04-.2.1-.26.2-.4.51-.61.9-.47 1.4a.47.47 0 0 1-.44.58c-1.23.02-.75.65-.5 1.86.01.1.07.2.15.28.08.07.18.1.3.11.8.04 1.33.1 1.52-.74a.46.46 0 0 1 .5-.36c.64.07 1.28-.04 1.86-.33a.46.46 0 0 1 .57.07c.38.43.66.75.66 1.21 0 .08.01.15.05.22a.46.46 0 0 0 .37.25c.08 0 .15-.01.23-.04h.01a.47.47 0 0 0 .28-.43.45.45 0 0 0-.03-.18c-.1-.22-.23-.48-.3-.73a.47.47 0 0 1 .22-.57.47.47 0 0 1 .6.15c.7.98.94 1.63 2.34.93a.47.47 0 0 1 .54.07c.72.7 1.28 1.28.89 2.34a.46.46 0 0 1-.32.28c-1.54.45-3.55 1-5.02.06a.46.46 0 0 1-.2-.28c-.37-1.64-2.03-1.2-3.33-1.28a.46.46 0 0 0-.31.1l-3.87 3.1a.46.46 0 0 0-.19.33c-.03.67-.15 2.18-.7 2.53a.49.49 0 0 0-.2.41v1.77c0 .12.04.23.12.32 3.22 3.5 4.39.82 7.25 2.64a.49.49 0 0 1 .22.39c0 1.34-.07 1.94 1.29 2.44a.46.46 0 0 1 .3.52c-1.12 6.14.72 3.44.89 8.13a.47.47 0 0 0 .33.45c2.88.83 3.2-.28 5.15-2.16a.42.42 0 0 0 .1-.17.46.46 0 0 0 .03-.2c-.11-2.31-.45-3.1 1.67-4.43a.46.46 0 0 0 .23-.41c0-2.44-.15-3.85 1.9-5.53a.49.49 0 0 0 .18-.39c-.1-1.64-1.28-1.6-2.55-1.93a.46.46 0 0 1-.35-.47c.04-2.16-1.38-1.62-1.12-3.7a.46.46 0 0 1 .51-.41c.08 0 .15.03.22.07.63.45 1.32 1.68 1.69 2.16a.48.48 0 0 1 .1.37c-.5 2.66 2.06.75 3.38-.09a.47.47 0 0 0 .15-.64v-.01l-1.49-2.23a.46.46 0 0 1-.08-.35.46.46 0 0 1 .18-.3c.08-.06.18-.1.28-.1l.67-.02a.47.47 0 0 1 .48.32c.4 1.41 2.34 2.4 3.7 2.94a.47.47 0 0 1 .28.54c-.47 2.05 1.07 2.94 2.41 4.13a.47.47 0 0 0 .66-.04.5.5 0 0 0 .09-.15l1.48-4.05a.47.47 0 0 1 .53-.3l1.02.19a.47.47 0 0 1 .37.3l1 2.78c.03.06.07.11.11.15l.19.2a.46.46 0 0 0 .82-.33c-.04-.78.1-1.37.9-.4a.46.46 0 0 0 .55.14c2.04-.89 1.34-2.53 1.3-4.37a.47.47 0 0 1 .39-.46c1.3-.23 1.4-.86 1.67-2.1a.47.47 0 0 0-.11-.4l-1.19-1.37a.46.46 0 0 1-.07-.53c.28-.55.72-1.45 1.34-1.45a.44.44 0 0 0 .42-.24c.45-.97 1.86-3.96 2.36-5.1a.47.47 0 0 1 .44-.27.47.47 0 0 1 .25.09c.6.39.62.98.58 1.76a.47.47 0 0 0 .24.45c1.91 1.04-.02-1.79 4.65-3.94a.46.46 0 0 0 .23-.61Z"/>
|
||||
<path d="m117.52 5.77-2.4-1.5a1.77 1.77 0 0 0-1.4-.21c-1.74.46-5.92 1.1-5.05 2.58 2.1 2.98-.98 3.03 1.99 3.54.39.07.74.28.98.6h.02c1.94 2.41 2.4 2.13 3.72-.47.18-.37.5-.65.87-.8 1.92-.73 2.57-.49 1.97-2.77a1.6 1.6 0 0 0-.7-.97Zm8.62 8.02.54.1a.3.3 0 0 0 .19 0h.02c1.11-.18 1.1-.81 1.04-1.61a.56.56 0 0 0-.48-.43.56.56 0 0 0-.56.3l-.02.04a.52.52 0 0 1-.48.39c-.53.03-.7.18-.7.69a.56.56 0 0 0 .45.52ZM164.57 37a.28.28 0 0 0-.04-.1c-.3-.5-.93-2.46-1.64-3.04a.26.26 0 0 0-.2-.04.26.26 0 0 0-.16.1.26.26 0 0 0-.05.17c.02.65 0 .89-.81.61a.25.25 0 0 1-.15-.15v.02c-.32-.74-1.49-.37-2.16-.24a.26.26 0 0 0-.17.13c-.37.74-1.4 1.45-2.23 1.82a.61.61 0 0 0-.37.6l.13 1.99a.61.61 0 0 0 .62.58h2.41c.07 0 .14.03.19.09.56.65 2.28.98 3.14 1.13a.25.25 0 0 0 .22-.07 3.9 3.9 0 0 0 1.27-3.6Zm1.54 2.15a10.44 10.44 0 0 1-2.75 2.95.44.44 0 0 0-.19.49c.28.8.9.74 1.68.73a.45.45 0 0 0 .4-.38c.7-3.22 2.66-2.36 1.5-3.76a.44.44 0 0 0-.49-.12.44.44 0 0 0-.15.1ZM142.5 35.6c-.31-.17-.61.12-.85.48a3.5 3.5 0 0 0-.6 2.42c.13.93.48 1.73 1.45.95-.07-.62 1.43-3.87 0-3.86Zm20.73-14.18c.95 2.14 1.92-.15 2.57-1.34.07-.14.1-.3.1-.45-.14-1.06-.25-3.16-1.24-3.15a.69.69 0 0 0-.65.94v.01c.34 1-.37 2.46-.78 3.39a.73.73 0 0 0 0 .6Z"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect x="1.25" y="1.25" width="45.5" height="45.5" rx="22.75" stroke="currentColor" stroke-width="2.5"/>
|
||||
{:else}
|
||||
<g clip-path="url(#a)" fill="currentColor">
|
||||
<path d="M58.07 8.8c-.76-1.37-3.07-.3-4.46-.16a.46.46 0 0 1-.47-.24c-.85-1.6-4.89-1.83-6.36-2.13a.52.52 0 0 0-.18 0c-3.1.5-4.22 1.8-6.53-.98a.47.47 0 0 0-.37-.19h-7.25a.48.48 0 0 0-.24.06c-3.01 1.7-.04 1.78-3.3 2.55a.48.48 0 0 1-.5-.19c-.55-.7-3.78-.18-4.21-.33l-3.48-1.2a.48.48 0 0 0-.31 0c-2.05.82-2.75 1.35-3.35 3.52a.5.5 0 0 0 .06.34l.5.96a.46.46 0 0 0 .4.25c.84.03 1.4.13 1.57-.84a.49.49 0 0 1 .24-.34c1.49-.76.97.9 1.08 1.96a.47.47 0 0 1-.3.5l-2 .7a.46.46 0 0 1-.62-.35c-.13-.68-.31-.96-1.02-1.08a.46.46 0 0 0-.52.5c.06 1.25-.35 1.3-1.65 1.6-.11.04-.2.1-.26.2-.4.51-.62.9-.47 1.4a.47.47 0 0 1-.45.58c-1.22.02-.74.65-.5 1.86a.46.46 0 0 0 .45.39c.8.04 1.34.1 1.52-.74a.46.46 0 0 1 .5-.36c.64.07 1.29-.04 1.86-.33a.46.46 0 0 1 .58.07c.37.43.65.75.65 1.21a.47.47 0 0 0 .65.43h.02a.46.46 0 0 0 .24-.61c-.1-.22-.22-.48-.3-.73a.47.47 0 0 1 .82-.42c.7.98.95 1.63 2.34.93a.47.47 0 0 1 .54.07c.73.7 1.29 1.28.9 2.34a.47.47 0 0 1-.32.28c-1.54.45-3.55 1-5.02.06a.46.46 0 0 1-.2-.28c-.38-1.64-2.03-1.2-3.33-1.28a.47.47 0 0 0-.32.1l-3.87 3.1a.47.47 0 0 0-.19.33c-.03.67-.14 2.18-.7 2.53a.48.48 0 0 0-.2.41v1.77c0 .12.04.23.12.32 3.22 3.5 4.4.82 7.25 2.64a.49.49 0 0 1 .23.39c0 1.34-.08 1.94 1.28 2.44a.47.47 0 0 1 .3.52c-1.12 6.14.72 3.44.89 8.13a.47.47 0 0 0 .33.45c2.88.83 3.2-.28 5.15-2.16a.47.47 0 0 0 .13-.37c-.1-2.31-.44-3.1 1.68-4.43a.47.47 0 0 0 .22-.41c0-2.44-.15-3.85 1.9-5.53a.49.49 0 0 0 .18-.39c-.1-1.64-1.28-1.6-2.55-1.93a.46.46 0 0 1-.35-.47c.04-2.16-1.37-1.62-1.11-3.7a.47.47 0 0 1 .72-.34c.63.45 1.32 1.68 1.7 2.16a.47.47 0 0 1 .09.37c-.5 2.66 2.06.75 3.38-.09a.47.47 0 0 0 .15-.64v-.01l-1.48-2.23a.46.46 0 0 1 .37-.75l.67-.02a.47.47 0 0 1 .48.32c.41 1.41 2.34 2.4 3.7 2.94a.46.46 0 0 1 .28.54c-.47 2.05 1.08 2.94 2.42 4.13a.47.47 0 0 0 .75-.18l1.48-4.06a.47.47 0 0 1 .52-.3l1.03.19a.47.47 0 0 1 .37.3l1 2.79.11.15.19.2a.46.46 0 0 0 .82-.33c-.04-.79.09-1.38.9-.41a.46.46 0 0 0 .55.14c2.04-.89 1.33-2.53 1.3-4.37a.46.46 0 0 1 .39-.46c1.3-.23 1.4-.86 1.67-2.1a.47.47 0 0 0-.11-.41l-1.2-1.36a.46.46 0 0 1-.08-.53c.28-.55.73-1.45 1.34-1.45a.44.44 0 0 0 .43-.24c.44-.97 1.86-3.96 2.36-5.1a.47.47 0 0 1 .69-.18c.6.39.61.98.57 1.76a.47.47 0 0 0 .24.45c1.92 1.04-.01-1.79 4.65-3.94a.46.46 0 0 0 .24-.61l-.01-.04Z"/>
|
||||
<path d="m13.27 12.79.54.1c.06.02.12.02.18 0h.02c1.12-.18 1.1-.81 1.04-1.61a.56.56 0 0 0-1.04-.13l-.02.04a.52.52 0 0 1-.48.39c-.52.03-.69.18-.69.69a.56.56 0 0 0 .45.52ZM29.63 34.6c-.32-.17-.62.12-.86.48a3.5 3.5 0 0 0-.6 2.42c.14.93.5 1.73 1.46.95-.08-.62 1.43-3.87 0-3.86Zm20.72-14.18c.95 2.14 1.92-.15 2.57-1.34a.9.9 0 0 0 .1-.45c-.14-1.06-.25-3.16-1.23-3.15a.69.69 0 0 0-.66.94v.01c.34 1-.37 2.46-.78 3.39a.72.72 0 0 0 0 .6Z"/>
|
||||
</g>
|
||||
<rect x="1.25" y="1.25" width="45.5" height="45.5" rx="22.75" stroke="currentColor" stroke-width="2.5"/>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<rect width="48" height="48" rx="24" fill="#fff"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
{/if}
|
||||
</svg>
|
||||
86
apps/website/src/components/atoms/Image.svelte
Normal file
86
apps/website/src/components/atoms/Image.svelte
Normal file
@@ -0,0 +1,86 @@
|
||||
<script lang="ts">
|
||||
import { getAssetUrlKey } from '$utils/api'
|
||||
|
||||
export let src: string = undefined
|
||||
export let id: string = undefined
|
||||
export let sizeKey: string = undefined
|
||||
export let sizes: Sizes = undefined
|
||||
export let width: number = sizes && sizes.medium && sizes.medium.width
|
||||
export let height: number = sizes && sizes.medium && sizes.medium.height
|
||||
export let ratio: number = undefined
|
||||
export let alt: string
|
||||
export let lazy: boolean = true
|
||||
export let decoding: "auto" | "sync" | "async" = "auto"
|
||||
|
||||
interface Sizes {
|
||||
small?: { width?: number, height?: number }
|
||||
medium?: { width?: number, height?: number }
|
||||
large?: { width?: number, height?: number }
|
||||
}
|
||||
|
||||
let srcSet = { webp: [], jpg: [] }
|
||||
|
||||
|
||||
/**
|
||||
* Define height from origin ratio if not defined
|
||||
*/
|
||||
const setHeightFromRatio = (w: number, r: number = ratio) => {
|
||||
return Math.round(w / r)
|
||||
}
|
||||
|
||||
if (ratio && !height) {
|
||||
// Set height from width using ratio
|
||||
height = setHeightFromRatio(width)
|
||||
|
||||
// Add height to all sizes
|
||||
if (sizes) {
|
||||
Object.entries(sizes).forEach(size => {
|
||||
const [key, value]: [string, { width?: number, height?: number }] = size
|
||||
sizes[key].height = setHeightFromRatio(value.width)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Image attributes
|
||||
*/
|
||||
$: imgWidth = sizes && sizes.small ? sizes.small.width : width
|
||||
$: imgHeight = sizes && sizes.small ? sizes.small.height : height
|
||||
$: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined
|
||||
$: srcSet = {
|
||||
// WebP
|
||||
webp:
|
||||
sizes ? [
|
||||
`${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`,
|
||||
sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : null,
|
||||
sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : null,
|
||||
]
|
||||
: [getAssetUrlKey(id, `${sizeKey}-webp`)],
|
||||
// JPG
|
||||
jpg:
|
||||
sizes ? [
|
||||
`${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`,
|
||||
sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : null,
|
||||
sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : null,
|
||||
]
|
||||
: [getAssetUrlKey(id, `${sizeKey}-jpg`)]
|
||||
}
|
||||
</script>
|
||||
|
||||
<picture class={$$props.class}>
|
||||
<source
|
||||
type="image/webp"
|
||||
srcset={srcSet.webp.join(', ').trim()}
|
||||
>
|
||||
<img
|
||||
src={imgSrc}
|
||||
sizes={sizes ? '(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%' : null}
|
||||
srcset={srcSet.jpg.join(', ').trim()}
|
||||
width={imgWidth}
|
||||
height={imgHeight}
|
||||
{alt}
|
||||
loading={lazy ? 'lazy' : undefined}
|
||||
{decoding}
|
||||
/>
|
||||
</picture>
|
||||
72
apps/website/src/components/atoms/ScrollingTitle.svelte
Normal file
72
apps/website/src/components/atoms/ScrollingTitle.svelte
Normal file
@@ -0,0 +1,72 @@
|
||||
<style lang="scss">
|
||||
.scrolling-title {
|
||||
display: inline-block;
|
||||
transform: translate3d(var(--parallax-x), 0, 0);
|
||||
transition: transform 1.2s var(--ease-quart);
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { map } from '$utils/functions'
|
||||
import reveal from '$animations/reveal'
|
||||
|
||||
export let tag: string
|
||||
export let label: string = undefined
|
||||
export let parallax: number = undefined
|
||||
export let offsetStart: number = undefined
|
||||
export let offsetEnd: number = undefined
|
||||
export let animate: boolean = true
|
||||
|
||||
let scrollY: number
|
||||
let innerWidth: number
|
||||
let innerHeight: number
|
||||
let titleEl: HTMLElement
|
||||
let isLarger: boolean
|
||||
|
||||
// Define default values
|
||||
$: if (titleEl && !offsetStart && !offsetEnd) {
|
||||
offsetStart = titleEl.offsetTop - innerHeight * (innerWidth < 768 ? 0.2 : 0.75)
|
||||
offsetEnd = titleEl.offsetTop + innerHeight * (innerWidth < 768 ? 0.5 : 0.5)
|
||||
}
|
||||
|
||||
// Check if title is larger than viewport to translate it
|
||||
$: isLarger = titleEl && titleEl.offsetWidth >= innerWidth
|
||||
|
||||
// Calculate the parallax value
|
||||
$: if (titleEl) {
|
||||
const toTranslate = 100 - (innerWidth / titleEl.offsetWidth * 100)
|
||||
parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
|
||||
}
|
||||
|
||||
const classes = [
|
||||
'scrolling-title',
|
||||
'title-huge',
|
||||
$$props.class
|
||||
].join(' ').trim()
|
||||
|
||||
const revealOptions = animate ? {
|
||||
children: '.char',
|
||||
animation: { y: ['-105%', 0] },
|
||||
options: {
|
||||
stagger: 0.06,
|
||||
duration: 1.6,
|
||||
delay: 0.2,
|
||||
threshold: 0.2,
|
||||
},
|
||||
} : null
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
bind:scrollY
|
||||
bind:innerWidth bind:innerHeight
|
||||
/>
|
||||
|
||||
<svelte:element this={tag}
|
||||
bind:this={titleEl}
|
||||
class={classes} aria-label={label}
|
||||
style:--parallax-x="{parallax}%"
|
||||
use:reveal={revealOptions}
|
||||
>
|
||||
<slot />
|
||||
</svelte:element>
|
||||
37
apps/website/src/components/atoms/SiteTitle.svelte
Normal file
37
apps/website/src/components/atoms/SiteTitle.svelte
Normal file
@@ -0,0 +1,37 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/site-title";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import SplitText from '$components/SplitText.svelte'
|
||||
import reveal from '$animations/reveal'
|
||||
import { DURATION } from '$utils/constants'
|
||||
|
||||
export let variant: string = 'lines'
|
||||
export let tag: string = 'h1'
|
||||
</script>
|
||||
|
||||
{#if tag === 'h1'}
|
||||
<h1 class="site-title site-title--{variant}"
|
||||
use:reveal={{
|
||||
children: '.char',
|
||||
animation: { y: ['105%', 0] },
|
||||
options: {
|
||||
stagger: 0.04,
|
||||
duration: 1,
|
||||
delay: DURATION.PAGE_IN / 1000,
|
||||
threshold: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SplitText text="Houses" mode="chars" class="pink mask" />
|
||||
<SplitText text="Of The" mode="chars" class="middle mask" />
|
||||
<SplitText text="World" mode="chars" class="pink mask" />
|
||||
</h1>
|
||||
{:else}
|
||||
<div class="site-title site-title--{variant}">
|
||||
<span class="word-1">Houses</span>
|
||||
<span class="middle word-2">Of The</span>
|
||||
<span class="word-3">World</span>
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user