Merge branch 'main' into dev
This commit is contained in:
@@ -17,6 +17,6 @@
|
||||
"dev": "directus-extension build -w --no-minify"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@directus/extensions-sdk": "9.20.4"
|
||||
"@directus/extensions-sdk": "11.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"start": "directus start"
|
||||
},
|
||||
"dependencies": {
|
||||
"directus": "^10.2.1",
|
||||
"pg": "^8.11.0"
|
||||
"directus": "^10.13.1",
|
||||
"mysql": "^2.18.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,46 +15,45 @@
|
||||
"lint": "eslint ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@studio-freight/lenis": "^1.0.15",
|
||||
"classix": "^2.1.32",
|
||||
"dayjs": "^1.11.8",
|
||||
"embla-carousel": "^7.1.0",
|
||||
"classix": "^2.1.38",
|
||||
"dayjs": "^1.11.12",
|
||||
"embla-carousel": "^8.1.7",
|
||||
"focus-visible": "^5.2.0",
|
||||
"motion": "^10.16.2",
|
||||
"ogl": "^0.0.117",
|
||||
"lenis": "^1.1.6",
|
||||
"motion": "^10.18.0",
|
||||
"ogl": "^1.0.7",
|
||||
"sanitize.css": "^13.0.0",
|
||||
"swell-js": "3.22.0",
|
||||
"tweakpane": "^3.1.9",
|
||||
"swell-js": "^4.2.0",
|
||||
"tweakpane": "^4.0.4",
|
||||
"utils": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.1.0",
|
||||
"@sveltejs/adapter-cloudflare": "^2.3.0",
|
||||
"@sveltejs/kit": "^1.20.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.9",
|
||||
"@typescript-eslint/parser": "^5.59.9",
|
||||
"@sveltejs/adapter-auto": "^3.2.2",
|
||||
"@sveltejs/adapter-cloudflare": "^4.6.1",
|
||||
"@sveltejs/kit": "^2.5.18",
|
||||
"@typescript-eslint/eslint-plugin": "^7.17.0",
|
||||
"@typescript-eslint/parser": "^7.17.0",
|
||||
"base-64": "^1.0.0",
|
||||
"browserslist": "^4.21.7",
|
||||
"browserslist": "^4.23.2",
|
||||
"config": "workspace:*",
|
||||
"cssnano": "^6.0.1",
|
||||
"eslint": "^8.42.0",
|
||||
"eslint-plugin-svelte": "^2.30.0",
|
||||
"postcss": "^8.4.24",
|
||||
"postcss-focus-visible": "^8.0.2",
|
||||
"cssnano": "^7.0.4",
|
||||
"eslint": "^9.7.0",
|
||||
"eslint-plugin-svelte": "^2.43.0",
|
||||
"postcss": "^8.4.39",
|
||||
"postcss-focus-visible": "^9.0.1",
|
||||
"postcss-normalize": "^10.0.1",
|
||||
"postcss-preset-env": "^8.4.2",
|
||||
"postcss-preset-env": "^9.6.0",
|
||||
"postcss-sort-media-queries": "^5.2.0",
|
||||
"sass": "^1.63.3",
|
||||
"svelte": "^3.59.1",
|
||||
"svelte-check": "^3.4.3",
|
||||
"svelte-preprocess": "^5.0.4",
|
||||
"tslib": "^2.5.3",
|
||||
"typescript": "^5.1.3",
|
||||
"vite": "^4.3.9"
|
||||
"sass": "^1.77.8",
|
||||
"svelte": "^4.2.18",
|
||||
"svelte-check": "^3.8.4",
|
||||
"svelte-preprocess": "^6.0.2",
|
||||
"tslib": "^2.6.3",
|
||||
"typescript": "^5.5.4",
|
||||
"vite": "5.3.4"
|
||||
},
|
||||
"type": "module",
|
||||
"browserslist": [
|
||||
"last 3 versions",
|
||||
"> 0.3%"
|
||||
"> .5% and last 2 versions"
|
||||
]
|
||||
}
|
||||
@@ -1,30 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { browser } from '$app/environment'
|
||||
import { onMount } from 'svelte'
|
||||
import Lenis from '@studio-freight/lenis'
|
||||
import Lenis from 'lenis'
|
||||
import { smoothScroll } from '$utils/stores'
|
||||
|
||||
let smoothScrollRAF = 0
|
||||
|
||||
|
||||
onMount(() => {
|
||||
// Setup smooth scroll
|
||||
if (browser) {
|
||||
$smoothScroll = new Lenis({
|
||||
duration: 1.2,
|
||||
easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://easings.net/
|
||||
smoothWheel: true,
|
||||
orientation: 'vertical',
|
||||
})
|
||||
}
|
||||
|
||||
// Lenis RAF
|
||||
const update = (time: number) => {
|
||||
$smoothScroll.raf(time)
|
||||
smoothScrollRAF = requestAnimationFrame(update)
|
||||
}
|
||||
|
||||
|
||||
onMount(() => {
|
||||
// Enable smooth scroll
|
||||
requestAnimationFrame(update)
|
||||
|
||||
@@ -34,4 +23,10 @@
|
||||
$smoothScroll.destroy()
|
||||
}
|
||||
})
|
||||
|
||||
// Lenis RAF
|
||||
const update = (time: number) => {
|
||||
$smoothScroll.raf(time)
|
||||
smoothScrollRAF = requestAnimationFrame(update)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,25 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/badge";
|
||||
.badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 16px;
|
||||
margin: 0 auto;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
background: $color-secondary-light;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1;
|
||||
color: $color-primary-darker;
|
||||
border-radius: 100vh;
|
||||
|
||||
// Small size
|
||||
&--small {
|
||||
font-size: rem(7px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/box-cta";
|
||||
@import "./BoxCTA";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/button";
|
||||
@import "./Button";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/button-cart";
|
||||
@import "./ButtonCart";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -9,7 +9,7 @@
|
||||
import { sendEvent } from '$utils/analytics'
|
||||
// Components
|
||||
import Icon from '$components/atoms/Icon.svelte'
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
|
||||
|
||||
const openCart = () => {
|
||||
$cartOpen = true
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/button-circle";
|
||||
@import "./ButtonCircle";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -1,5 +1,24 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/discover";
|
||||
.discover {
|
||||
padding: 0 20px;
|
||||
font-family: $font-sans;
|
||||
font-size: rem(24px);
|
||||
font-weight: 200;
|
||||
line-height: 1.5;
|
||||
color: $color-tertiary;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(28px);
|
||||
}
|
||||
@include bp (md) {
|
||||
font-size: rem(32px);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $color-secondary;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -1,5 +1,20 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/arrow";
|
||||
.arrow {
|
||||
display: block;
|
||||
|
||||
// Colors
|
||||
&--white {
|
||||
color: #fff;
|
||||
}
|
||||
&--pink {
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&--flip {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -5,78 +5,47 @@
|
||||
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 width: number = sizes?.medium?.width
|
||||
export let height: number = sizes?.medium?.height
|
||||
export let ratio: number = undefined
|
||||
export let alt: string
|
||||
export let lazy = 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 }
|
||||
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)
|
||||
}
|
||||
const setHeightFromRatio = (w: number, r: number = ratio) => 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
|
||||
for (const [key, value] of Object.entries(sizes)) {
|
||||
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
|
||||
$: imgWidth = sizes?.small?.width || width
|
||||
$: imgHeight = sizes?.small?.height || height
|
||||
$: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small`) : src
|
||||
$: srcSet = 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}-small`)} 345w`,
|
||||
sizes.medium && `${getAssetUrlKey(id, `${sizeKey}-medium`)} 768w`,
|
||||
sizes.large && `${getAssetUrlKey(id, `${sizeKey}-large`)} 1280w`,
|
||||
]
|
||||
: [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`)]
|
||||
}
|
||||
: [getAssetUrlKey(id, sizeKey)]
|
||||
</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()}
|
||||
sizes={sizes ? '(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%' : undefined}
|
||||
srcset={srcSet.join(', ')}
|
||||
width={imgWidth}
|
||||
height={imgHeight}
|
||||
{alt}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/atoms/site-title";
|
||||
@import "./SiteTitle";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/layouts/poster";
|
||||
@import "./PosterLayout";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -7,10 +7,10 @@
|
||||
import { capitalizeFirstLetter } from 'utils/string'
|
||||
// Components
|
||||
import SplitText from '$components/SplitText.svelte'
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Button from '$components/atoms/Button/Button.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
|
||||
import Carousel from '$components/organisms/Carousel.svelte'
|
||||
import Carousel from '$components/organisms/Carousel/Carousel.svelte'
|
||||
|
||||
export let product: any
|
||||
export let shopProduct: any
|
||||
@@ -1,11 +1,11 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/cart-item";
|
||||
@import "./CartItem";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
// Components
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
|
||||
import Select from '$components/molecules/Select.svelte'
|
||||
|
||||
export let item: any
|
||||
125
apps/website/src/components/molecules/EmailForm/EmailForm.scss
Normal file
125
apps/website/src/components/molecules/EmailForm/EmailForm.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
// Email Form
|
||||
.newsletter-form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.email {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 56px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 24px;
|
||||
border-radius: 100vh;
|
||||
box-shadow: inset 0 0 0 2px $color-secondary;
|
||||
transition: box-shadow 0.6s var(--ease-quart);
|
||||
|
||||
@include bp (sm) {
|
||||
height: 64px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: rem(16px);
|
||||
font-family: $font-sans;
|
||||
font-weight: 300;
|
||||
color: $color-tertiary;
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($color-tertiary, 0.6);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
:global(button) {
|
||||
position: absolute !important;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// States
|
||||
&.is-focused, &:hover {
|
||||
box-shadow: inset 0 0 0 4px $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom details
|
||||
.bottom {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: rem(14px);
|
||||
max-width: 600px;
|
||||
|
||||
@include bp (sm) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: rem(16px);
|
||||
}
|
||||
|
||||
.past-issues {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 auto auto 0;
|
||||
text-decoration: none;
|
||||
color: $color-text;
|
||||
|
||||
&, span {
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
padding-bottom: 2px;
|
||||
font-size: rem(14px);
|
||||
color: $color-text;
|
||||
margin-left: 8px;
|
||||
border-bottom: 1px solid $color-text;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-left: 12px;
|
||||
padding-bottom: 0;
|
||||
font-size: rem(16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $color-gray;
|
||||
line-height: 1.3;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Message
|
||||
.message {
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
|
||||
&.is-error {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
background: $color-secondary;
|
||||
}
|
||||
&.is-success {
|
||||
color: $color-text;
|
||||
background: $color-tertiary;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/newsletter-form";
|
||||
@import "./EmailForm";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -8,7 +8,7 @@
|
||||
import { sendEvent } from '$utils/analytics'
|
||||
// Components
|
||||
import IconArrow from '$components/atoms/IconArrow.svelte'
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
|
||||
|
||||
export let past = false
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
<form method="POST" action="/api/newsletter" on:submit|preventDefault={handleForm}
|
||||
out:fly|local={{ y: -8, easing: quartOut, duration: 600 }}
|
||||
>
|
||||
<div class="newsletter-form__email" class:is-focused={inputInFocus}>
|
||||
<div class="email" class:is-focused={inputInFocus}>
|
||||
<input type="email" placeholder="Your email address" name="email" id="newsletter_email" required
|
||||
on:focus={toggleFocus}
|
||||
on:blur={toggleFocus}
|
||||
@@ -79,7 +79,7 @@
|
||||
</ButtonCircle>
|
||||
</div>
|
||||
|
||||
<div class="newsletter-form__bottom">
|
||||
<div class="bottom">
|
||||
{#if past}
|
||||
<a href="/subscribe" class="past-issues" data-sveltekit-noscroll>
|
||||
<svg width="20" height="16" viewBox="0 0 20 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
|
||||
@@ -94,7 +94,7 @@
|
||||
{/if}
|
||||
|
||||
{#if formStatus && formStatus.message}
|
||||
<div class="newsletter-form__message shadow-small"
|
||||
<div class="message shadow-small"
|
||||
class:is-error={!isSuccess}
|
||||
class:is-success={isSuccess}
|
||||
in:fly|local={{ y: 8, easing: quartOut, duration: 600, delay: isSuccess ? 600 : 0 }}
|
||||
50
apps/website/src/components/molecules/Heading/Heading.scss
Normal file
50
apps/website/src/components/molecules/Heading/Heading.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.heading {
|
||||
overflow: hidden;
|
||||
margin-bottom: 72px;
|
||||
text-align: center;
|
||||
color: $color-tertiary;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: clamp(72px, 8vw, 128px);
|
||||
}
|
||||
|
||||
// Title
|
||||
:global(h1) {
|
||||
margin-top: 56px;
|
||||
line-height: 1;
|
||||
color: $color-secondary;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: clamp(80px, 9vw, 160px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text
|
||||
.text {
|
||||
width: 75%;
|
||||
max-width: 360px;
|
||||
margin: 40px auto 0;
|
||||
font-weight: 200;
|
||||
|
||||
@include bp (sm) {
|
||||
max-width: 600px;
|
||||
margin-top: 72px;
|
||||
}
|
||||
|
||||
:global(a) {
|
||||
position: relative;
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(rgba($color-tertiary, 0.3), rgba($color-tertiary, 0.3));
|
||||
background-position: 0 100%;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
transition: color 0.4s var(--ease-quart);
|
||||
|
||||
&:hover {
|
||||
color: $color-secondary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/heading";
|
||||
@import "./Heading";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import SiteTitle from '$components/atoms/SiteTitle.svelte'
|
||||
import SiteTitle from '$components/atoms/SiteTitle/SiteTitle.svelte'
|
||||
|
||||
export let text: string
|
||||
</script>
|
||||
@@ -1,5 +1,6 @@
|
||||
.house {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Information
|
||||
&__info {
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/house";
|
||||
@import "./House";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/location";
|
||||
@import "./Location";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/issue";
|
||||
@import "./NewsletterIssue";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -0,0 +1,61 @@
|
||||
.notification-cart {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
color: $color-gray;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// Left Image
|
||||
.left {
|
||||
margin-right: 20px;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-right: 24px;
|
||||
width: 58px;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// Details
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 24px;
|
||||
justify-content: center;
|
||||
|
||||
// Poster Title
|
||||
h3 {
|
||||
font-family: $font-serif;
|
||||
color: $color-secondary;
|
||||
font-size: rem(20px);
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(18px);
|
||||
}
|
||||
}
|
||||
// Text
|
||||
p {
|
||||
font-size: rem(12px);
|
||||
line-height: 1.4;
|
||||
max-width: 124px;
|
||||
margin: 4px 0;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(13px);
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/notification-cart";
|
||||
@import "./NotificationCart";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -22,11 +22,12 @@
|
||||
transition:fly={{ y: 20, duration: 700, easing: quartOut }}
|
||||
on:click={closeNotification}
|
||||
on:keydown
|
||||
role="presentation"
|
||||
>
|
||||
<div class="notification-cart__left">
|
||||
<div class="left">
|
||||
<img src={image} width={58} height={88} alt={title}>
|
||||
</div>
|
||||
<div class="notification-cart__right">
|
||||
<div class="right">
|
||||
<h3>{title}</h3>
|
||||
<p>{name}</p>
|
||||
</div>
|
||||
@@ -5,7 +5,7 @@
|
||||
margin: auto 0;
|
||||
cursor: pointer;
|
||||
|
||||
&[disabled] {
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/pagination";
|
||||
@import "./Pagination";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -8,8 +8,10 @@
|
||||
export let total: number
|
||||
</script>
|
||||
|
||||
<div class="pagination" role="button" tabindex="0"
|
||||
disabled={ended ? ended : undefined}
|
||||
<div
|
||||
class="pagination"
|
||||
class:is-disabled={ended ? ended : undefined}
|
||||
role="button" tabindex="0"
|
||||
on:click
|
||||
on:keydown
|
||||
>
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/photo-card";
|
||||
@import "./PhotoCard";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/organisms/postcard";
|
||||
@import "./PostCard";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -30,6 +30,20 @@
|
||||
transition: transform 0.8s var(--ease-quart), border-radius 0.8s var(--ease-quart);
|
||||
}
|
||||
|
||||
// Hover effect
|
||||
&:hover {
|
||||
:global(img) {
|
||||
@include bp (md) {
|
||||
transform: scale(0.8) translate3d(0, -5%, 0);
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.buttons {
|
||||
display: flex;
|
||||
@@ -85,17 +99,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover effect
|
||||
&:hover {
|
||||
:global(img) {
|
||||
@include bp (md) {
|
||||
transform: scale(0.8) translate3d(0, -5%, 0);
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/poster";
|
||||
@import "./Poster";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { addToCart } from '$utils/functions/shop'
|
||||
import { smoothScroll } from '$utils/stores'
|
||||
// Components
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Button from '$components/atoms/Button/Button.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
|
||||
export let product: any
|
||||
@@ -0,0 +1,56 @@
|
||||
// About page Step
|
||||
.step {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
background: $color-primary-darker;
|
||||
border-radius: 12px;
|
||||
transform: translateZ(0);
|
||||
|
||||
@include bp (sm) {
|
||||
--columns: 11;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
padding: 8% 0;
|
||||
min-height: clamp(400px, 75vh, 800px);
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
.media {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 70%;
|
||||
max-height: 550px;
|
||||
margin-bottom: 28px;
|
||||
border-radius: 6px;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span 6;
|
||||
grid-row: 1 / -1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
:global(.image img), video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
color: $color-secondary-light;
|
||||
grid-column: 2 / -2;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/process-step";
|
||||
@import "./ProcessStep";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -0,0 +1,45 @@
|
||||
.shop-locationswitcher {
|
||||
pointer-events: auto;
|
||||
|
||||
// Overlaid
|
||||
&.is-over {
|
||||
dt {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
color: $color-primary;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
font-size: rem(12px);
|
||||
}
|
||||
dd {
|
||||
color: $color-secondary;
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 4px;
|
||||
|
||||
@include bp (sm) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
select {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: rem(18px);
|
||||
color: $color-secondary;
|
||||
font-family: $font-serif;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(24px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/shop-locationswitcher";
|
||||
@import "./ShopLocationSwitcher";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/switcher";
|
||||
@import "./Switcher";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -3,7 +3,7 @@
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
padding-right: 28px;
|
||||
background: #fff;
|
||||
background: $color-cream;
|
||||
border-radius: 8px;
|
||||
|
||||
@include bp (md) {
|
||||
@@ -63,7 +63,6 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/toast";
|
||||
@import "./Toast";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -9,7 +9,7 @@
|
||||
import { browser } from '$app/environment'
|
||||
import { cx } from 'classix'
|
||||
// Components
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Button from '$components/atoms/Button/Button.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
|
||||
export let id: string
|
||||
@@ -30,10 +30,11 @@
|
||||
// Image rotation
|
||||
let imagesLoop: ReturnType<typeof setTimeout>
|
||||
let currentImageIndex = 0
|
||||
const loopDuration = 3000
|
||||
|
||||
const incrementCurrentImageIndex = () => {
|
||||
currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
|
||||
imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
|
||||
imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), loopDuration)
|
||||
}
|
||||
|
||||
// Close toast
|
||||
@@ -52,7 +53,7 @@
|
||||
|
||||
onMount(() => {
|
||||
if (images.length > 1) {
|
||||
incrementCurrentImageIndex()
|
||||
imagesLoop = setTimeout(incrementCurrentImageIndex, loopDuration)
|
||||
}
|
||||
|
||||
return () => {
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/organisms/banner";
|
||||
@import "./Banner";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/organisms/carousel";
|
||||
@import "./Carousel";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -49,8 +49,6 @@
|
||||
|
||||
/** Go to prev or next slide depending on direction */
|
||||
const handleArrowClick = () => {
|
||||
if (!carousel.clickAllowed()) return
|
||||
|
||||
// Define direction
|
||||
if (isFirstSlide) {
|
||||
arrowDirection = 'next'
|
||||
@@ -90,6 +88,7 @@
|
||||
on:mousemove={handleArrowMove}
|
||||
on:click={handleArrowClick}
|
||||
on:keydown
|
||||
role="presentation"
|
||||
>
|
||||
<div class="carousel__slides">
|
||||
{#each slides as { id, alt }}
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/organisms/cart";
|
||||
@import "./Cart";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -12,10 +12,10 @@
|
||||
import { initSwell, getCart, updateCartItem, removeCartItem } from '$utils/functions/shop'
|
||||
import { sendEvent } from '$utils/analytics'
|
||||
// Components
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Button from '$components/atoms/Button/Button.svelte'
|
||||
import Icon from '$components/atoms/Icon.svelte'
|
||||
import CartItem from '$components/molecules/CartItem.svelte'
|
||||
import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
|
||||
import CartItem from '$components/molecules/CartItem/CartItem.svelte'
|
||||
import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte'
|
||||
|
||||
|
||||
// Block scroll if cart is open
|
||||
@@ -1,9 +1,9 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/organisms/collage";
|
||||
@import "./Collage";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import PhotoCard from '$components/molecules/PhotoCard.svelte'
|
||||
import PhotoCard from '$components/molecules/PhotoCard/PhotoCard.svelte'
|
||||
|
||||
export let photos: any[] = []
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/organisms/footer";
|
||||
@import "./Footer";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte'
|
||||
// Components
|
||||
import SplitText from '$components/SplitText.svelte'
|
||||
import SiteTitle from '$components/atoms/SiteTitle.svelte'
|
||||
import SiteTitle from '$components/atoms/SiteTitle/SiteTitle.svelte'
|
||||
|
||||
const { settings: { instagram, footer_links } }: any = getContext('global')
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/modules/globe";
|
||||
@import "./InteractiveGlobe";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/organisms/locations";
|
||||
@import "./Locations";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -11,8 +11,8 @@
|
||||
import { throttle } from 'utils/actions'
|
||||
import { sendEvent } from '$utils/analytics'
|
||||
// Components
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Location from '$components/molecules/Location.svelte'
|
||||
import Button from '$components/atoms/Button/Button.svelte'
|
||||
import Location from '$components/molecules/Location/Location.svelte'
|
||||
|
||||
export let locations: any[]
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
}
|
||||
|
||||
// Form input
|
||||
:global(.newsletter-form__email) {
|
||||
:global(.email) {
|
||||
:global(input) {
|
||||
color: $color-text;
|
||||
}
|
||||
@@ -56,7 +56,7 @@
|
||||
}
|
||||
}
|
||||
// Form message
|
||||
:global(.newsletter-form__message.is-success) {
|
||||
:global(.message.is-success) {
|
||||
color: #fff;
|
||||
background: $color-primary-tertiary20;
|
||||
}
|
||||
@@ -69,7 +69,7 @@
|
||||
&--default {
|
||||
background: $color-tertiary 50% 0 / cover url(#{$dir-img}/newsletter-beige.jpg) no-repeat;
|
||||
|
||||
:global(.newsletter-form__email) {
|
||||
:global(.email) {
|
||||
background: $color-tertiary;
|
||||
}
|
||||
}
|
||||
@@ -77,7 +77,7 @@
|
||||
&--light {
|
||||
background: $color-cream 50% 0 / cover url(#{$dir-img}/newsletter-cream.jpg) no-repeat;
|
||||
|
||||
:global(.newsletter-form__email) {
|
||||
:global(.email) {
|
||||
background: $color-cream;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/organisms/newsletter";
|
||||
@import "./NewsletterModule";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte'
|
||||
// Components
|
||||
import EmailForm from '$components/molecules/EmailForm.svelte'
|
||||
import EmailForm from '$components/molecules/EmailForm/EmailForm.svelte'
|
||||
|
||||
export let theme = 'default'
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/pages/shop/posters";
|
||||
@import "./PostersGrid";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { getContext, onMount } from 'svelte'
|
||||
import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'
|
||||
// Components
|
||||
import Poster from '$components/molecules/Poster.svelte'
|
||||
import Poster from '$components/molecules/Poster/Poster.svelte'
|
||||
import { debounce } from 'utils/actions'
|
||||
|
||||
export let posters: any = []
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/pages/shop/banner";
|
||||
@import "./ShopBanner";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -12,8 +12,8 @@
|
||||
import { quartOut } from '$animations/easings'
|
||||
// Components
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import ButtonCart from '$components/atoms/ButtonCart.svelte'
|
||||
import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
|
||||
import ButtonCart from '$components/atoms/ButtonCart/ButtonCart.svelte'
|
||||
import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte'
|
||||
|
||||
export let product: any = undefined
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/organisms/shop";
|
||||
@import "./ShopModule";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { getContext, onMount } from 'svelte'
|
||||
// Components
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Button from '$components/atoms/Button/Button.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
|
||||
const { locations, shop }: any = getContext('global')
|
||||
@@ -38,15 +38,16 @@
|
||||
// Image rotation
|
||||
let imagesLoop: ReturnType<typeof setTimeout>
|
||||
let currentImageIndex = 0
|
||||
const loopDuration = 3000
|
||||
|
||||
const incrementCurrentImageIndex = () => {
|
||||
currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
|
||||
imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
|
||||
imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), loopDuration)
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (images.length > 1) {
|
||||
incrementCurrentImageIndex()
|
||||
imagesLoop = setTimeout(incrementCurrentImageIndex, loopDuration)
|
||||
}
|
||||
|
||||
return () => {
|
||||
@@ -13,10 +13,10 @@ export const createPane = (ctx: any) => {
|
||||
const rotation = ctx.pane.addFolder({
|
||||
title: 'Rotation',
|
||||
})
|
||||
rotation.addInput(ctx.params, 'autoRotate', {
|
||||
rotation.addBinding(ctx.params, 'autoRotate', {
|
||||
label: 'Auto-rotate',
|
||||
})
|
||||
rotation.addInput(ctx.params, 'speed', {
|
||||
rotation.addBinding(ctx.params, 'speed', {
|
||||
label: 'Rotation speed',
|
||||
min: 0.01,
|
||||
max: 2,
|
||||
@@ -31,10 +31,10 @@ export const createPane = (ctx: any) => {
|
||||
const markers = ctx.pane.addFolder({
|
||||
title: 'Markers',
|
||||
})
|
||||
markers.addInput(ctx.params, 'enableMarkers', {
|
||||
markers.addBinding(ctx.params, 'enableMarkers', {
|
||||
label: 'Enable markers',
|
||||
})
|
||||
markers.addInput(ctx.params, 'enableMarkersLinks', {
|
||||
markers.addBinding(ctx.params, 'enableMarkersLinks', {
|
||||
label: 'Interactive',
|
||||
})
|
||||
}
|
||||
@@ -47,7 +47,7 @@ export const createPane = (ctx: any) => {
|
||||
title: 'Misc',
|
||||
})
|
||||
// Sun position
|
||||
misc.addInput(ctx.params, 'sunAngle', {
|
||||
misc.addBinding(ctx.params, 'sunAngle', {
|
||||
label: 'Sun angle',
|
||||
min: 0,
|
||||
max: 1,
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
import { page } from '$app/stores'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import ShopHeader from '$components/organisms/ShopBanner.svelte'
|
||||
import PostersGrid from '$components/organisms/PostersGrid.svelte'
|
||||
import ShopHeader from '$components/organisms/ShopBanner/ShopBanner.svelte'
|
||||
import PostersGrid from '$components/organisms/PostersGrid/PostersGrid.svelte'
|
||||
|
||||
const { posters }: any = getContext('shop')
|
||||
const errors = {
|
||||
|
||||
@@ -73,6 +73,6 @@ export const load = async () => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
import { setContext } from 'svelte'
|
||||
import { cartNotifications } from '$utils/stores/shop'
|
||||
// Components
|
||||
import Cart from '$components/organisms/Cart.svelte'
|
||||
import NotificationCart from '$components/molecules/NotificationCart.svelte'
|
||||
import Cart from '$components/organisms/Cart/Cart.svelte'
|
||||
import NotificationCart from '$components/molecules/NotificationCart/NotificationCart.svelte'
|
||||
|
||||
export let data
|
||||
|
||||
|
||||
@@ -51,6 +51,6 @@ export const load = async ({ setHeaders }) => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
import { shopCurrentProductSlug } from '$utils/stores/shop'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import PostersGrid from '$components/organisms/PostersGrid.svelte'
|
||||
import ShopHeader from '$components/organisms/ShopBanner.svelte'
|
||||
import PosterLayout from '$components/layouts/PosterLayout.svelte'
|
||||
import PostersGrid from '$components/organisms/PostersGrid/PostersGrid.svelte'
|
||||
import ShopHeader from '$components/organisms/ShopBanner/ShopBanner.svelte'
|
||||
import PosterLayout from '$components/layouts/PosterLayout/PosterLayout.svelte'
|
||||
|
||||
export let data
|
||||
|
||||
|
||||
@@ -48,6 +48,6 @@ export const load = async ({ params, setHeaders }) => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(404)
|
||||
error(404)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
import { capitalizeFirstLetter } from 'utils/string'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import ShopHeader from '$components/organisms/ShopBanner.svelte'
|
||||
import PostersGrid from '$components/organisms/PostersGrid.svelte'
|
||||
import PosterLayout from '$components/layouts/PosterLayout.svelte'
|
||||
import ShopHeader from '$components/organisms/ShopBanner/ShopBanner.svelte'
|
||||
import PostersGrid from '$components/organisms/PostersGrid/PostersGrid.svelte'
|
||||
import PosterLayout from '$components/layouts/PosterLayout/PosterLayout.svelte'
|
||||
|
||||
export let data
|
||||
|
||||
|
||||
@@ -73,7 +73,7 @@ export const load = async ({ params, setHeaders }) => {
|
||||
const { data: { location: location, photos, total_published, product } } = res
|
||||
|
||||
if (!location.length || location.length && params.country !== location[0].country.slug) {
|
||||
throw error(404, 'This location is not available… yet!')
|
||||
error(404, 'This location is not available… yet!')
|
||||
}
|
||||
|
||||
setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })
|
||||
@@ -85,6 +85,6 @@ export const load = async ({ params, setHeaders }) => {
|
||||
product: product[0],
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,12 +17,12 @@
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Button from '$components/atoms/Button/Button.svelte'
|
||||
import IconEarth from '$components/atoms/IconEarth.svelte'
|
||||
import House from '$components/molecules/House.svelte'
|
||||
import Pagination from '$components/molecules/Pagination.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
|
||||
import ShopModule from '$components/organisms/ShopModule.svelte'
|
||||
import House from '$components/molecules/House/House.svelte'
|
||||
import Pagination from '$components/molecules/Pagination/Pagination.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
|
||||
import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
|
||||
|
||||
export let data
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
// Return new photos
|
||||
return photos
|
||||
} else {
|
||||
throw new Error('Error while loading new photos')
|
||||
new Error('Error while loading new photos')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -86,6 +86,6 @@ export const load = async ({ params, setHeaders }) => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import Icon from '$components/atoms/Icon.svelte'
|
||||
import IconArrow from '$components/atoms/IconArrow.svelte'
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
|
||||
|
||||
export let data
|
||||
|
||||
@@ -209,7 +209,7 @@
|
||||
}
|
||||
}
|
||||
} else {
|
||||
throw new Error('Error while loading new photos')
|
||||
new Error('Error while loading new photos')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -228,7 +228,7 @@
|
||||
}],
|
||||
// Other photos
|
||||
['.photo-page__picture:not(.is-1)', {
|
||||
x: ['-150%', 0],
|
||||
x: ['-15%', '0%'],
|
||||
opacity: [0, 1],
|
||||
}, {
|
||||
at: 0.4,
|
||||
|
||||
@@ -99,6 +99,6 @@ export const load = async ({ setHeaders }) => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,10 +17,10 @@
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Button from '$components/atoms/Button/Button.svelte'
|
||||
import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
|
||||
import ProcessStep from '$components/molecules/ProcessStep.svelte'
|
||||
import Banner from '$components/organisms/Banner.svelte'
|
||||
import ProcessStep from '$components/molecules/ProcessStep/ProcessStep.svelte'
|
||||
import Banner from '$components/organisms/Banner/Banner.svelte'
|
||||
|
||||
export let data
|
||||
const { about, photos } = data
|
||||
@@ -221,7 +221,7 @@
|
||||
{about.intro_firstphoto_caption}<br>
|
||||
in
|
||||
<a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
|
||||
<img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
|
||||
<img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
|
||||
<span>Naarm Australia (Melbourne)</span>
|
||||
</a>
|
||||
</figcaption>
|
||||
|
||||
@@ -19,6 +19,6 @@ export const POST = async ({ request, setHeaders }) => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,6 +38,6 @@ export const load = async ({ setHeaders }) => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import Heading from '$components/molecules/Heading.svelte'
|
||||
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
|
||||
import Heading from '$components/molecules/Heading/Heading.svelte'
|
||||
import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
|
||||
|
||||
export let data
|
||||
const { credit } = data
|
||||
|
||||
@@ -47,7 +47,7 @@ export const GET = async ({ url, setHeaders }) => {
|
||||
slug: siteProduct.location.slug,
|
||||
description: siteProduct.description,
|
||||
price: product.price,
|
||||
images: siteProduct.photos_product.map(({ directus_files_id: { id } }: any) => getAssetUrlKey(id, `product-large-jpg`)),
|
||||
images: siteProduct.photos_product.map(({ directus_files_id: { id } }: any) => getAssetUrlKey(id, `product-large`)),
|
||||
gCategory: category.value,
|
||||
gType: category.type,
|
||||
})
|
||||
@@ -63,7 +63,7 @@ export const GET = async ({ url, setHeaders }) => {
|
||||
|
||||
return new Response(sitemap)
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
import { getContext } from 'svelte'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
|
||||
import Locations from '$components/organisms/Locations.svelte'
|
||||
import ShopModule from '$components/organisms/ShopModule.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
|
||||
import Heading from '$components/molecules/Heading.svelte'
|
||||
import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
|
||||
import Locations from '$components/organisms/Locations/Locations.svelte'
|
||||
import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
|
||||
import Heading from '$components/molecules/Heading/Heading.svelte'
|
||||
|
||||
const { locations }: any = getContext('global')
|
||||
const text = 'Explore the globe to discover unique locations across the world'
|
||||
|
||||
@@ -82,6 +82,6 @@ export const load = async ({ url, setHeaders }) => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,14 +21,14 @@
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import SplitText from '$components/SplitText.svelte'
|
||||
import IconEarth from '$components/atoms/IconEarth.svelte'
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Button from '$components/atoms/Button/Button.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
|
||||
import DiscoverText from '$components/atoms/DiscoverText.svelte'
|
||||
import PostCard from '$components/molecules/PostCard.svelte'
|
||||
import PostCard from '$components/molecules/PostCard/PostCard.svelte'
|
||||
import Select from '$components/molecules/Select.svelte'
|
||||
import ShopModule from '$components/organisms/ShopModule.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
|
||||
import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
|
||||
|
||||
export let data
|
||||
|
||||
@@ -39,19 +39,11 @@
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
let photosContentEl: HTMLElement
|
||||
let photosGridEl: HTMLElement
|
||||
let observerPhotos: IntersectionObserver
|
||||
let mutationPhotos: MutationObserver
|
||||
let scrollY: number
|
||||
let innerWidth: number, innerHeight: number
|
||||
// Filters related
|
||||
let scrollDirection = 0
|
||||
let lastScrollTop = 0
|
||||
let scrolledPastIntro: boolean
|
||||
let filtersOver: boolean
|
||||
let filtersVisible: boolean
|
||||
let filtersTransitioning: boolean
|
||||
|
||||
|
||||
/**
|
||||
@@ -198,7 +190,7 @@
|
||||
// Return new photos
|
||||
return photos
|
||||
} else {
|
||||
throw new Error('Error while loading new photos')
|
||||
new Error('Error while loading new photos')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -222,37 +214,6 @@
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Scroll detection when entering content
|
||||
*/
|
||||
$: if (scrollY) {
|
||||
// Detect scroll direction
|
||||
throttle(() => {
|
||||
scrollDirection = scrollY > lastScrollTop ? 1 : -1
|
||||
lastScrollTop = scrollY
|
||||
|
||||
// Show filters bar when scrolling back up
|
||||
filtersVisible = scrollDirection < 0
|
||||
|
||||
// Scrolled past grid of photos
|
||||
if (scrollY > photosContentEl.offsetTop) {
|
||||
if (!scrolledPastIntro) {
|
||||
filtersOver = true
|
||||
// Hacky: Set filters as transitioning after a little delay to avoid an transition jump
|
||||
setTimeout(() => filtersTransitioning = true, 30)
|
||||
}
|
||||
scrolledPastIntro = true
|
||||
} else {
|
||||
if (scrolledPastIntro) {
|
||||
filtersOver = false
|
||||
filtersTransitioning = false
|
||||
}
|
||||
scrolledPastIntro = false
|
||||
}
|
||||
}, 200)()
|
||||
}
|
||||
|
||||
|
||||
onMount(() => {
|
||||
/**
|
||||
* Observers
|
||||
@@ -336,20 +297,14 @@
|
||||
|
||||
|
||||
<main class="photos-page">
|
||||
<section class="photos-page__intro"
|
||||
class:is-passed={scrolledPastIntro}
|
||||
>
|
||||
<section class="photos-page__intro">
|
||||
<ScrollingTitle tag="h1" text="Houses">
|
||||
<SplitText text="Houses" mode="chars" />
|
||||
</ScrollingTitle>
|
||||
|
||||
<DiscoverText />
|
||||
|
||||
<div class="filters"
|
||||
class:is-over={filtersOver}
|
||||
class:is-transitioning={filtersTransitioning}
|
||||
class:is-visible={filtersVisible}
|
||||
>
|
||||
<div class="filters">
|
||||
<div class="filters__bar">
|
||||
<span class="text-label filters__label">Filter photos</span>
|
||||
<ul>
|
||||
@@ -425,7 +380,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px">
|
||||
<section class="photos-page__content" style:--margin-sides="{sideMargins}px">
|
||||
<div class="grid container">
|
||||
{#if photos}
|
||||
<div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll>
|
||||
|
||||
@@ -33,6 +33,6 @@ export const load = async ({ setHeaders }) => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@
|
||||
import { quartOut } from '$animations/easings'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import Heading from '$components/molecules/Heading.svelte'
|
||||
import EmailForm from '$components/molecules/EmailForm.svelte'
|
||||
import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte'
|
||||
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
|
||||
import Heading from '$components/molecules/Heading/Heading.svelte'
|
||||
import EmailForm from '$components/molecules/EmailForm/EmailForm.svelte'
|
||||
import NewsletterIssue from '$components/molecules/NewsletterIssue/NewsletterIssue.svelte'
|
||||
import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
|
||||
|
||||
export let data
|
||||
|
||||
|
||||
@@ -21,6 +21,6 @@ export const load = async ({ setHeaders }) => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err.message)
|
||||
error(500, err.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import Heading from '$components/molecules/Heading.svelte'
|
||||
import Heading from '$components/molecules/Heading/Heading.svelte'
|
||||
|
||||
export let data
|
||||
const { legal } = data
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
import { page } from '$app/stores'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import BoxCTA from '$components/atoms/BoxCTA.svelte'
|
||||
import Heading from '$components/molecules/Heading.svelte'
|
||||
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
|
||||
import BoxCTA from '$components/atoms/BoxCTA/BoxCTA.svelte'
|
||||
import Heading from '$components/molecules/Heading/Heading.svelte'
|
||||
import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
|
||||
import ListCTAs from '$components/organisms/ListCTAs.svelte'
|
||||
import Locations from '$components/organisms/Locations.svelte'
|
||||
import ShopModule from '$components/organisms/ShopModule.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
|
||||
import Locations from '$components/organisms/Locations/Locations.svelte'
|
||||
import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
|
||||
|
||||
const { locations }: any = getContext('global')
|
||||
const errors = {
|
||||
|
||||
@@ -100,6 +100,6 @@ export const load = async ({ url }) => {
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
throw error(500, err || 'Failed to fetch data')
|
||||
error(500, err || 'Failed to fetch data')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,9 +31,9 @@
|
||||
import SVGSprite from '$components/SVGSprite.svelte'
|
||||
import SmoothScroll from '$components/SmoothScroll.svelte'
|
||||
import Analytics from '$components/Analytics.svelte'
|
||||
import Switcher from '$components/molecules/Switcher.svelte'
|
||||
import Toast from '$components/molecules/Toast.svelte'
|
||||
import Footer from '$components/organisms/Footer.svelte'
|
||||
import Switcher from '$components/molecules/Switcher/Switcher.svelte'
|
||||
import Toast from '$components/molecules/Toast/Toast.svelte'
|
||||
import Footer from '$components/organisms/Footer/Footer.svelte'
|
||||
|
||||
export let data
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user