WIP React > Svelte
Put most of the developed design into Svelte
This commit is contained in:
15
src/atoms/Button.svelte
Normal file
15
src/atoms/Button.svelte
Normal file
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let href
|
||||
export let type
|
||||
export let text = ''
|
||||
|
||||
// Transformed text into spans
|
||||
const textSpans = text
|
||||
.replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '<span>$&</span>'))
|
||||
.replace(/ /g, '\u00a0')
|
||||
</script>
|
||||
|
||||
<a {href} class={type} aria-label={text} data-text={text}>
|
||||
<slot></slot>
|
||||
{@html textSpans}
|
||||
</a>
|
||||
27
src/atoms/Cursor.svelte
Normal file
27
src/atoms/Cursor.svelte
Normal file
@@ -0,0 +1,27 @@
|
||||
<script>
|
||||
// // Cursor moving handling
|
||||
// const cursor = document.querySelector('.cursor')
|
||||
|
||||
// // In
|
||||
// function cursorIn (event) {
|
||||
// cursor.setAttribute('aria-hidden', false)
|
||||
// }
|
||||
// // Out
|
||||
// function cursorOut (event) {
|
||||
// const cursor = event.target.parentElement.querySelector('.cursor')
|
||||
// cursor.setAttribute('aria-hidden', true)
|
||||
// }
|
||||
// // Move the cursor
|
||||
// function cursorMove (event) {
|
||||
// // const parent = event.currentTarget.parentElement
|
||||
// // const cursor = parent.querySelector('.cursor')
|
||||
// // const photoPos = parent.getBoundingClientRect()
|
||||
// // cursor.style.top = (event.clientY - photoPos.top) - 14 + 'px'
|
||||
// // cursor.style.left = (event.clientX - photoPos.left) - 10 + 'px'
|
||||
// const cursor = event.currentTarget.parentElement.querySelector('.cursor')
|
||||
// cursor.style.top = (event.clientY - 14) + 'px'
|
||||
// cursor.style.left = (event.clientX - 14) + 'px'
|
||||
// }
|
||||
</script>
|
||||
|
||||
<i class="cursor cursor-zoom" aria-hidden="true"></i>
|
||||
40
src/atoms/IconGlobe.svelte
Normal file
40
src/atoms/IconGlobe.svelte
Normal file
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
export let width = 56
|
||||
export let color = '#000'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
svg:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 133.93%; /* 1.33 ratio */
|
||||
}
|
||||
</style>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width={width} style="fill: {color}" viewBox="0 0 56 75">
|
||||
<defs>
|
||||
<ellipse id="planet_2_" cx="31.5" cy="60.6" rx="24.5" ry="24.4"/>
|
||||
</defs>
|
||||
<clipPath id="planet_3_">
|
||||
<use overflow="visible" xlink:href="#planet_2_"/>
|
||||
</clipPath>
|
||||
<g transform="translate(0,-32)">
|
||||
<g clip-path="url(#planet_3_)">
|
||||
<g class="anim anim-spinGlobe">
|
||||
<path d="M43 65.3c-2.2-.1-1.8.9-3.6-.7-1 .1-1.6-.3-2.6-.2-.4-.1-.5-.5-1.1-.3-.8 0-1.2 1-2.1.6-.2.3-.4.7-1 .8-.3 0-.8.3-1.2 0-.7-2.4-1.8.7-1.8-2h-.1c-2.4 4.5-4.8-4.2 1.2-1.7h.1v-.1c-1-1-.2-1.7 0-2.9-.7-.6.7-2.7 1.7-2.9.1.3.8-.3 1.1-.8-.2-.3-.2-.2-.9.2-1-.4-.3-1.3-1.6.2-.3-1.6 3.1-1.6 2.2-3-1.1-.1-1.5-.6-2.3-1.4-.8 1.7-4.6-2-2.7 1.9.5 4.3-.2.5-3.5 1.2-2.3-1.2 2.1-4.1.8-4.8-1-.7-.4 2.9-3.4-1-1 .9 2.2 2.7-.3 2.4-.4.9-1 .6-1.8.9-.2.4-.2.5-.8.6-1.5.1-3.6-.5-4.9 1v-.4c-1.8 1.9-9.1.6-6.1 5 0 .3 0 .2-.3.7.1.2.1.3.2.5.5.1 1.4-.2 1.9.3-.4.8.4.8.5 0 2.3-3.6 5.7-1.9 8.4.1.6 1.8 1.6 3.2 3.5 4.2.3.9 2.3 1.6.5-.1.3-1.4 2.9 2.9 5.1 1.7h.3c1.3-.1 3 1.1 4.3.7 1.2.7-.3 3 1.4 3.7 2.7 1.2 4 3.6 3.6 6.6.8 1.3.4 4 2.4 3.9 1.9-.3-2.2-3.1 1.2-5.5.5-2.3 1.7-4.1 2.4-6.4-.6-1.1.8-2.6-.7-3zM76.1 36.6c-.5-.9 6.3-5.7 5.5-3.8-.3.7-1.5 2.5-.1 2.8.8-.5.4-2.2 1.1-3 3.6-1.5 3.6-6-.8-3.7-7.1 1.4-4.2-1-8.6 2.6-2.1-1.5-3.4-.1-5.8.8-.9-.2 1.4-1 .2-1.6-3.2-.5-5.5 3-6.8 5.4-1.9-.8-1.5-1.1-2.4 1.1-.9.2-1.4.6-2 1.5-1.5-.1-3.5 4.7-4.3 2.1.4-.3.9-.1 1.3-.7-3.2-4.4-10.3 8.2-3.9 5.6-.8-1.3.5-5.3.7-1.8 2.3 2.8-3.9 3.2-3.9 5.8.6 1.6-.3 1.2-.9 2.1-.4 1.5 1.3 1.9 2.2.9.8-1.8 1.2-3.2 3.5-2.1-.4 1.2 1.2 0 0-.5-.8-.2-1.3-1.4.2-.6.5.2.8 1.1 1.3.8.7-1.1.8.1 1.8.1 3.3-1.1.7 2.2-1.2 1.7-.6.5-1.4 1-2.2.6-4.4-2.8-8.1 8-2.1 8.2 4-.8 2.9-2.7 5.7 1 1.1 4 5.1 9.1 6 2.2 0-1.2.9-2.4.3-3.6-1.7-2.3.5-3.7.2-5.5-1.4.9-4.9-1.7-5-2.9 1.4 0 3.4 2.9 4.3 2.3.5-.6 2.8-2.7 1.5-3.1-2.2 1.1-4.3-1.7-1-.6 6.1-1.4 4.9 2.4 7 2.1.1-1.5 1.1-5.8 2.7-2.5.6-1.3.9-.3 1.4.8 0 .5 1.6 1.3 1 .4-.1 0-.2 0-.4-.1-1.1-1.7 3.7.6.2-2.9 1.4-1.1 3.6-2.6 1.8-5 .4-.2.3-.9-.3-.4-1.5-1.2 1.3-.9 2.1-.4-1.1-2.2 2.9-3.4 1.2-6-.5-.5-.9.1-1.5-.1zM56.3 48.3c-.9.1-1.6.7-2.7.7-.4-.4.1-2.4 1-1.3.3-.3.1-.8.9-1 0 .1 0 .4.1.8.4.1.6 0 1.1.4-.2.1-.3.3-.4.4zm2.1-.8c-.9-.5-.9-1.2 0-1.9.8-.1.1.8.4 1.1 1.8.2.7 3.3-.4.8zM27.4 45c1.1.2 4.1-1.3 3.9 1.2.6-.7 2.1 0 .5.4.8.3.7.6 1 1.4 1.7 2.1 3.2 1.7 3.1-1 4-3.6 2.6-2.5 2.2-7.3 0-.6 1.2-1.1.5-1.6-.6-.1-1.1 1.1-1.8.3-3.7-.9-8.6 3.1-10.6 6.2-.1.9.6.2 1.2.4zM84.7 53.3c-.3-.2-.5-.7-1.2-.8 0 .5.2 2.1-.9 1.5-.3-1.4-1.6-1.1-1.7.2-2.6 2.4-3.6 2.8-1.3 5.8 1.1-.2 2.2-2.1 3.5-2 .8.5 1.6-.1 2.2.8 1 .3 2.6-.2 2.2-1.7.4-2.8-1.3-2.5-2.8-3.8z"/>
|
||||
<path d="M21.5 45.8c.7.2 1.2-.3 2-.1 0 .1-.1.1-.2.4-.4.1-.1.6.4.3 2.1-.5 1.5-.5 2-2.3.8-.9 3.8-3.7.5-2.4-1.2.7-4.8 1.8-4.3 2.9-.3.4-1.6.9-.4 1.2zM29.9 49.1c1.1.2.7-1-.7-.8-.9-.9-2.4-1-3.7-.5-.4-.3-.6-.4-1 .1-.4-.8-1.4.4-.6 1 2.1.6 2.7-1.1 5 .8v.1c-1.2-.2-2.6 1.8-.6.6.5 0 1.3.7 1.9.2 0 0-.2-.3-.5-.4.1-.1.3-.2.4-.4-.1-.1-1.1-.9-.2-.7zM17.5 51.1c.3.1 1-.1 1 .6.7.1 2.2-.4 2.9-.9-.6-.1-1.5-1.9-1.9-1.3-.4 1.1-1.8.3-2 1.6zM81.5 50.9c-1.2-.5-1.8.4.2.5.5 0 .7.9 1.3.6.4-.8 3.8.1 1.6-.9-.7-.7-2.3-.9-3.1-.2zM76.2 50.4c-.2.6-1 1.4-1 2.1 1.5 1.4 2.4-.4 1.4-1.9-.1-.3-.3-.3-.4-.2zM62.4 60.2c-.5.2-.2.9-.2 1.5 1.8 3.5 2-1 .2-1.5zM56.7 37.4c-.7-1.2.1-1.8.9-2.7 1.5-.6 1.2-1.8-.5 0-1.1.3-2.5 3-.4 2.7zM16.4 51.5c.9-.8 1.7-2.2-.6-1.2-.5.4-.4 1.5.6 1.2zM45.4 46.8c-.9-.9-2.7 1.3-.6 1 .2-.2.8-.5.6-1zM41.5 45c-.4-.1-1.4.4-2 .7.5.7 2.4.5 2-.7zM45.1 48.4c0 .3.4.3.9.5 1.2-1-.3-1.6-.9-.5zM33.6 53.3c-.8.4 1.1 1.6 1.3.6-.1-.4-.9-.8-1.3-.6zM93.4 57.2c-.1 0-.1-.1-.2-.1-1.9 1.5-.2 3.2.2.1zM47.8 36.5c.7-.2.6-1.2-.4-.8-.5.3-.4.9.4.8zM45.8 37.7c.7-.2.5-1.2-.5-.7-.3.3-.2.9.5.7zM93.6 55.8c-.1-.5-1-.4-.4.2 0 .2.1.4.2.6-.1.3.7.8.4-.1l.3-.6c-.2 0-.3-.1-.5-.1zM44 48.3c-.2.3-.6 1 .3.8.5-.4.4-.6-.3-.8zM22.6 47.5c-.3 0-.3.6.1.4 1.1.3.8-1.3-.1-.4zM87.1 59.1c-.1.3-.2.4-.1.6.4.4 1-.2.1-.6zM50.1 51c-.2-.2-1 .1-.2.5.1-.2.1-.4.2-.5zM47.6 37.2c-.3 0-.5-.2-.6.3.2 0 .4.2.6-.3zM21.1 46.7v.1c.1 0 .5.1.6-.2-.2-.1-.3-.2-.6.1zM17.9 49.4c-.2-.1-.4-.2-.6.2.2.1.3.1.6-.2zM19.5 48.8v-.1c-.1.1-.4-.1-.5.2.2.1.4.1.5-.1zM21.3 49.8c-.2 0-.4-.2-.5.1.2.2.3.2.5-.1zM68.3 52.7c0 .2-.1.2-.1.3.2.3.7-.1.1-.3z"/>
|
||||
<path d="M27.5 49.2c0-.1-.2-.1-.3-.1 0 .1-.2.3.2.4 0-.2.1-.3.1-.3zM26.1 47.1c-.2 0-.4.1-.5.1v.1c.3.1.3.1.5-.2zM53.9 50.7c-.1.1-.2.1-.3.2 0 0 0 .1.1.1s.2-.1.3-.1c0-.1-.1-.1-.1-.2zM48.1 46.8c0-.1.2-.1-.1-.3.1 0-.1.1.1.3zM26.6 51.7s0-.1-.2 0c.1 0 .1.2.2 0zM22 48.1s.1 0 0 0c.1-.1.1-.1 0 0zM14.6 52.9zM76.1 53.7c-.5-.1-1.1 0-1.6-.4-5.7-3.3-1.2 2.2 1.6.9.9 0 1-.8 0-.5zM26.9 51c-.2-.2-.1-.2-.8-.1-.2 0-.8-.3-.7.3-.3.1-.2.8.3.3.1 0 .2-.1.3-.1.1-.1.9.1.9-.4zM123.3 37c-2.2-.1-1.8.9-3.6-.7-1 .1-1.6-.3-2.6-.2-.4-.1-.5-.5-1.1-.3-.8 0-1.2 1-2.1.6-.2.3-.4.7-1 .8-.3 0-.8.3-1.2 0-.7-2.4-1.8.7-1.8-2h-.1c-2.4 4.5-4.8-4.2 1.2-1.7h.1v-.1c-1-1-.2-1.7 0-2.9-.7-.6.7-2.7 1.7-2.9.1.3.8-.3 1.1-.8-.2-.3-.2-.2-.9.2-1-.4-.3-1.3-1.6.2-.3-1.6 3.1-1.6 2.2-3-1.1-.1-1.5-.6-2.3-1.4-.8 1.7-4.6-2-2.7 1.9.5 4.3-.2.5-3.5 1.2-2.3-1.2 2.1-4.1.8-4.8-1-.7-.4 2.9-3.4-1-1 .9 2.2 2.7-.3 2.4-.4.9-1 .6-1.8.9-.2.4-.2.5-.8.6-1.5.1-3.6-.5-4.9 1v-.4c-1.8 1.9-9.1.6-6.1 5 0 .3 0 .2-.3.7.1.2.1.3.2.5.5.1 1.4-.2 1.9.3-.4.8.4.8.5 0 2.3-3.6 5.7-1.9 8.4.1.6 1.8 1.6 3.2 3.5 4.2.3.9 2.3 1.6.5-.1.3-1.4 2.9 2.9 5.1 1.7h.3c1.3-.1 3 1.1 4.3.7 1.2.7-.3 3 1.4 3.7 2.7 1.2 4 3.6 3.6 6.6.8 1.3.4 4 2.4 3.9 1.9-.3-2.2-3.1 1.2-5.5.5-2.3 1.7-4.1 2.4-6.4-.6-1 .8-2.6-.7-3zM156.4 8.3c-.5-.9 6.3-5.7 5.5-3.8-.3.7-1.5 2.5-.1 2.8.8-.5.4-2.2 1.1-3 3.6-1.5 3.6-6-.8-3.7-7.1 1.4-4.2-1-8.6 2.6-2.1-1.5-3.4-.1-5.8.8-.9-.2 1.4-1 .2-1.6-3.2-.5-5.5 3-6.8 5.4-1.9-.8-1.5-1.1-2.4 1.1-.9.2-1.4.6-2 1.5-1.5-.1-3.5 4.7-4.3 2.1.4-.3.9-.1 1.3-.7-3.2-4.4-10.3 8.2-3.9 5.6-.8-1.3.5-5.3.7-1.8 2.3 2.8-3.9 3.2-3.9 5.8.6 1.6-.3 1.2-.9 2.1-.4 1.5 1.3 1.9 2.2.9.8-1.8 1.2-3.2 3.5-2.1-.4 1.2 1.2 0 0-.5-.8-.2-1.3-1.4.2-.6.5.2.8 1.1 1.3.8.7-1.1.8.1 1.8.1 3.3-1.1.7 2.2-1.2 1.7-.6.5-1.4 1-2.2.6-4.4-2.8-8.1 8-2.1 8.2 4-.8 2.9-2.7 5.7 1 1.1 4 5.1 9.1 6 2.2 0-1.2.9-2.4.3-3.6-1.7-2.3.5-3.7.2-5.5-1.4.9-4.9-1.7-5-2.9 1.4 0 3.4 2.9 4.3 2.3.5-.6 2.8-2.7 1.5-3.1-2.2 1.1-4.3-1.7-1-.6 6.1-1.4 4.9 2.4 7 2.1.1-1.5 1.1-5.8 2.7-2.5.6-1.3.9-.3 1.4.8 0 .5 1.6 1.3 1 .4-.1 0-.2 0-.4-.1-1.1-1.7 3.7.6.2-2.9 1.4-1.1 3.6-2.6 1.8-5 .4-.2.3-.9-.3-.4-1.5-1.2 1.3-.9 2.1-.4-1.1-2.2 2.9-3.4 1.2-6-.5-.4-.8.1-1.5-.1zM136.6 20c-.9.1-1.6.7-2.7.7-.4-.4.1-2.4 1-1.3.3-.3.1-.8.9-1 0 .1 0 .4.1.8.4.1.6 0 1.1.4-.2.1-.3.3-.4.4zm2.1-.8c-.9-.5-.9-1.2 0-1.9.8-.1.1.8.4 1.1 1.8.3.7 3.4-.4.8zM107.7 16.7c1.1.2 4.1-1.3 3.9 1.2.6-.7 2.1 0 .5.4.8.3.7.6 1 1.4 1.7 2.1 3.2 1.7 3.1-1 4-3.6 2.6-2.5 2.2-7.3 0-.6 1.2-1.1.5-1.6-.6-.1-1.1 1.1-1.8.3-3.7-.9-8.6 3.1-10.6 6.2 0 .9.7.2 1.2.4zM165 25c-.3-.2-.5-.7-1.2-.8 0 .5.2 2.1-.9 1.5-.3-1.4-1.6-1.1-1.7.2-2.6 2.4-3.6 2.8-1.3 5.8 1.1-.2 2.2-2.1 3.5-2 .8.5 1.6-.1 2.2.8 1 .3 2.6-.2 2.2-1.7.4-2.8-1.3-2.5-2.8-3.8z"/>
|
||||
<path d="M101.8 17.5c.7.2 1.2-.3 2-.1 0 .1-.1.1-.2.4-.4.1-.1.6.4.3 2.1-.5 1.5-.5 2-2.3.8-.9 3.8-3.7.5-2.4-1.2.7-4.8 1.8-4.3 2.9-.2.5-1.6.9-.4 1.2zM110.2 20.8c1.1.2.7-1-.7-.8-.9-.9-2.4-1-3.7-.5-.4-.3-.6-.4-1 .1-.4-.8-1.4.4-.6 1 2.1.6 2.7-1.1 5 .8v.1c-1.2-.2-2.6 1.8-.6.6.5 0 1.3.7 1.9.2 0 0-.2-.3-.5-.4.1-.1.3-.2.4-.4-.1-.1-1.1-.9-.2-.7zM97.8 22.8c.3.1 1-.1 1 .6.7.1 2.2-.4 2.9-.9-.6-.1-1.5-1.9-1.9-1.3-.4 1.1-1.8.4-2 1.6zM161.8 22.6c-1.2-.5-1.8.4.2.5.5 0 .7.9 1.3.6.4-.8 3.8.1 1.6-.9-.7-.6-2.3-.9-3.1-.2zM156.5 22.2c-.2.6-1 1.4-1 2.1 1.5 1.4 2.4-.4 1.4-1.9-.1-.3-.2-.4-.4-.2zM142.7 32c-.5.2-.2.9-.2 1.5 1.8 3.5 2-1 .2-1.5zM137 9.1c-.7-1.2.1-1.8.9-2.7 1.5-.6 1.2-1.8-.5 0-1.1.4-2.5 3-.4 2.7zM96.7 23.2c.9-.8 1.7-2.2-.6-1.2-.4.4-.3 1.6.6 1.2zM125.7 18.5c-.9-.9-2.7 1.3-.6 1 .2-.1.8-.5.6-1zM121.8 16.8c-.4-.1-1.4.4-2 .7.5.6 2.4.5 2-.7zM125.4 20.2c0 .3.4.3.9.5 1.2-1-.3-1.7-.9-.5zM114 25.1c-.8.4 1.1 1.6 1.3.6-.2-.5-1-.8-1.3-.6zM173.7 29c-.1 0-.1-.1-.2-.1-1.9 1.4-.2 3.2.2.1zM128.1 8.2c.7-.2.6-1.2-.4-.8-.4.4-.3.9.4.8zM126.2 9.4c.7-.2.5-1.2-.5-.7-.4.3-.3.9.5.7zM174.5 27.7c-.2 0-.4-.1-.6-.1-.1-.5-1-.4-.4.2 0 .2.1.4.2.6-.1.3.7.8.4-.1.2-.2.3-.4.4-.6zM124.3 20.1c-.2.3-.6 1 .3.8.5-.4.4-.7-.3-.8zM102.9 19.3c-.3 0-.3.6.1.4 1.1.3.8-1.3-.1-.4zM167.4 30.9c-.1.3-.2.4-.1.6.4.3 1-.3.1-.6zM130.4 22.7c-.2-.2-1 .1-.2.5.1-.2.1-.3.2-.5zM128 8.9c-.3 0-.5-.2-.6.3.1.1.4.3.6-.3zM101.4 18.5v.1c.1 0 .5.1.6-.2-.2-.2-.3-.2-.6.1zM98.2 21.1c-.2-.1-.4-.2-.6.2.3.2.3.1.6-.2zM99.8 20.5v-.1c-.1.1-.4-.1-.5.2.2.2.4.1.5-.1zM101.6 21.5c-.2 0-.4-.2-.5.1.2.3.3.2.5-.1zM148.7 24.4c0 .2-.1.2-.1.3.1.3.6 0 .1-.3z"/>
|
||||
<path d="M107.8 20.9c0-.1-.2-.1-.3-.1 0 .1-.2.3.2.4 0-.1.1-.2.1-.3zM106.5 18.8c-.2 0-.4.1-.5.1v.1c.3.1.3.1.5-.2zM134.2 22.5c-.1.1-.2.1-.3.2 0 0 0 .1.1.1s.2-.1.3-.1c0-.1 0-.2-.1-.2zM128.5 18.5c0-.1.2-.1-.1-.3.1.1-.2.1.1.3zM106.9 23.4s0-.1-.2 0c.1 0 .1.2.2 0zM102.3 19.9c.1 0 .1-.1 0 0 .1-.1.1-.1 0 0 0-.1 0 0 0 0zM94.9 24.6v.1-.1zM156.4 25.4c-.5-.1-1.1 0-1.6-.4-5.7-3.3-1.2 2.2 1.6.9.9.1 1-.7 0-.5zM107.2 22.8c-.2-.2-.1-.2-.8-.1-.2 0-.8-.3-.7.3-.3.1-.2.8.3.3.1 0 .2-.1.3-.1.2-.1.9.1.9-.4z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M7 60.6C7 74 18 85 31.5 85S56 74 56 60.6 45 36.3 31.5 36.3 7 47.2 7 60.6zm24.5-21.9c12.1 0 22 9.8 22 21.9s-9.9 21.9-22 21.9-22-9.8-22-21.9 9.9-21.9 22-21.9z"/>
|
||||
<path d="M48.7 84c-5 3.6-10.9 5.5-17.1 5.5-16.1 0-29.1-13-29.1-29C2.5 49 9.3 38.6 19.9 34c.6-.3.9-1 .6-1.6-.3-.6-1-.9-1.6-.6C7.4 36.8 0 48.2 0 60.6c0 16 12.1 29.3 27.7 31.2v6.1h-5.8c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4H36c2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4h-5.8V92h1.4c6.7 0 13.2-2.1 18.6-6 .6-.4.7-1.2.3-1.7-.4-.5-1.2-.7-1.8-.3zM38 102.3c0 1.1-.9 1.9-1.9 1.9H21.9a1.9 1.9 0 110-3.8H36c1.1 0 2 .9 2 1.9z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
38
src/atoms/IconGlobeSmall.svelte
Normal file
38
src/atoms/IconGlobeSmall.svelte
Normal file
@@ -0,0 +1,38 @@
|
||||
<script>
|
||||
export let width = 56
|
||||
export let color = '#000'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
svg:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%; /* 1:1 ratio */
|
||||
}
|
||||
</style>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width={width} style="fill: {color}" viewBox="0 0 56 56">
|
||||
<defs>
|
||||
<circle id="planet" cx="28.1" cy="28" r="26.6"/>
|
||||
</defs>
|
||||
<clipPath id="continents">
|
||||
<use overflow="visible" xlink:href="#planet"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#continents)">
|
||||
<g class="anim anim-spinGlobeSmall">
|
||||
<path d="M36.5 36.9c-2.3-1-2.2.3-3.5-2.2-1.1-.3-1.6-1-2.7-1.2-.4-.3-.3-.8-1.1-.8-.8-.3-1.7.6-2.4-.2-.4.2-.8.6-1.4.5-.3-.2-.9 0-1.3-.5.2-2.9-2.2.1-1.1-2.9l-.1-.1c-2.7 3.2-4.2-2.7-1.2-2.6.9 0 2.5-.6 2.7.9 0 .1.1.4.4.3h.1V28c.1 0-.2-1-.2-1.1-.1-.8 1.3-1.1 1.3-2-.4-.7-.2-.7.6-1.2.8-.6 1.1-1.5 2.3-1.3 0 .4 1 0 1.5-.4-.1-.4-.2-.3-1-.1-1-.8.2-1.5-1.8-.5.3-1.8 4-.6 3.5-2.4-1.2-.5-1.4-1.2-1.9-2.4-.4.1-1.1 1-1.4.2-1.2-2.1-2.9-1.6-2.2.8.1.6-.6.8-.4 1.6.3.8-.6 1-.9 0-.1-1.5-1.9-1-2.8-1.7-2-2.3 3.8-3.6 2.8-4.9-1.1-1.4-.4 2.5-2.7-.9-.5-.5 0-1-.5-1.5-1.4.6 1.3 3.7-1.3 2.5-.8.8-1.3.2-2.3.3-.4.3-.4.4-1.1.4-.8.1-.8-.4-1.5-.7-1.2-.3-2.9-.9-4.2-.1.1-.2.1-.3.2-.5-2.6 1.4-10.1-2.9-8.5 3-.1.4 0 .3-.6.6v.6c.5.3 1.6.3 1.9 1.1-.8.8.1 1 .5.1 3.9-2.9 6.8.2 8.9 3.4 0 2.2.5 4.1 2.1 5.9 0 1 1.8 2.7.5.1.9-1.4 2 4.3 4.8 3.8.1 0 .1 0 .3.1.8.4 1.8.9 2.6 1.7.4.5.9.8 1.5.7l.2.1c1 1.3-1.5 3.1.1 4.5.6 1.5 2.4 1.9 2.3 3.6-.3 1.6 0 3.4-1 4.9.4 1.7-1.2 4.5 1 5.2 1.8.3.4-1.1.6-2.2.1-.6.7-.7.5-1.5-.1-.9 1.6-1.3 2.3-1.8.8-1.3 1.8-2 2.6-3.5.8-1.1 2-.9 2.5-2.5-.1-1 2-2.1.5-3.1zM92.5 12.7c-8.2-1.2-4.2-2.7-10.2-.6-.4-.1-.6-.3-.9-.7-.8-2.2-3.8-.2-5.7-.7-.9-.5 1.9-.6.9-1.7-2.4-1.5-5.4.4-7.7 1.5-.8.4-.6 1.5-1.7 1.6-1.7-1.6-1.2-1.7-3 .2-1.1-.1-1.7.1-2.7.8-1.8.1-2.6.5-4.2 1.7-.6.5-1.9-.5-1.2-1.1.5-.2 1 .3 1.6-.3.5-2.4-4.6-1.7-5.7-.8-5.3 2.8-2.6 6.4-.8 5.3.4-.9-.1-2.1.9-2.8 1.7-1.6.6.3.5 1.1.6.9.3 1.4-.5 2.1-1.8 1.5-4.7.2-5.9 2.7.1 2-.8 1.2-1.8 1.9-1 1.5.6 2.6 2 1.8 1.5-1.2 1.9-3 4-1.3.1.1.1 0 .4.2l.2.2c-.9 1.2 1.3.4.2-.5-.7-.6-.8-2 .5-.5.4.4.4 1.4 1.1 1.3 1.2-.9.8.4 1.9.8 2-.2 2.3 1 .6 1.7-.8.3-1.6-.2-2.6-.3-.9.3-1.9.6-2.6-.3-.8-2.2-3.4-.7-5.2-.5-1 .4-.7 1.6-1.6 2.4-1.9 1.6-1.3 5.3 1.2 6.1 4.6.7 4.2-1.8 5.8 3.4-.4 4.7 1.9 11.8 5.5 4.8.5-.5.4-.9.8-1.6.6-.6 1.2-1.2.9-2.2-.9-3.2 2-3.8 2.3-5.9-1.9.4-4.6-3.7-4.2-5.1 1.5.5 2.5 4.5 3.8 4.1.8-.5 4.1-1.9 2.8-2.8-2.8.3-3.9-3.5-.9-1 7.1.8 4.3 4.5 6.7 5 .7-1.6 3.4-5.9 3.9-1.6 1.2-1.1 1 0 1.2 1.4-.3.5 1.2 2.1.9.8-.1 0-.2-.1-.3-.3-.4-1.9.7 0 1.6-.4 1.3-.7-.3-1.7-.3-2.7.2-.8.9-.2 1.6-.4 2-.6 2.8-2.3 2.3-4.2.5 0 .7-.9-.1-.5-.8-.3 0-1.6 1.1-.7.5.2.6.9 1.3 1.1-.2-1.9 1-2 2.5-3 .9-.7 1.2-1.9 1.1-3.1-.4-.5-1-.1-1.6-.5.5-.7 1.1-1.3 2.2-1.6 1.1-.4 2 0 3.2-.5.4-.2 2.9-1.5 2 .1-.6.7-2.6 2.1-1.2 3 1-.2 1.3-2.2 2.4-2.8 1.7-.2 5.5-1.8 4.1-3.6-.9-.6-2-.6-3.4-.5zm-35 11c-1-.3-2 .1-3.1-.3-.3-.6 1.1-2.6 1.5-1 .4-.2.4-.8 1.3-.8 0 .2-.1.4-.2.8.4.2.7.2 1.1.9-.3.2-.4.3-.6.4zm3.9.8c.1 1.4-1.5.5-1.3-.8-.8-.8-.5-1.7.7-2 .9.2-.2.9 0 1.3.9.5.6.4.6 1.5zM40.5 11.2c-.4-.6.2-1.1.3-1.9.2-.7 0-1.3.5-1.9.2-.6 1.7-.7 1.2-1.5-.7-.4-1.6.7-2.1-.3-2.4-2.5-6.6.1-9.6.1-1.7.3-2.8 1.5-4.2 2.4-.4.8.6.3 1.2.7.4.3.6.6 1.3.4 1.1-.4 3.4 1.1 2.4 2.4.9-.5 2.3.8.3.6.7.6.5.9.5 1.9.3 1 1.6 3.2 2.7 2.2.6-.6.3-1.4 1-2 1.2-.2 1.7-1.1 2.9-1.5.8 0 2.2-.4 1.6-1.6zM85.1 38.9c-.2.6-.6 2.4-1.6 1.3-.2-.7.2-1.5-.8-1.3-.7-.1-.6.4-1.1.9-.5.1-.9 0-1.3.4-3.6 2.8-3.1 1.1-2.3 5.4 1.3.2 3.2-1.4 4.6-.8.6.9 1.7.6 2 1.7.9.7 2.9.8 3.1-1 1.6-3-.4-3.3-1.5-5.3-.4-.4-.4-1-1.1-1.3zM21.1 7.4c.7.5 1.4.1 2.1.7-.1.1-.1.1-.4.3-.5 0-.3.7.3.5 2.5.3 1.8.1 3-1.7 1.2-.7 5.5-2.5 1.5-2.4-1.6.3-5.8.2-5.7 1.5-.3.3-2 .3-.8 1.1z"/>
|
||||
<path d="M28.8 14.2c1.1.6 1.2-.8-.4-1.2-.5-.9-.7-1-1.8-1.6-.6-.5-1.2-.2-2-.4-.3-.5-.4-.6-1.1-.3-.1-1-1.7-.1-1.1.8 2 1.4 3.3-.1 5.1 2.8v.2c-.3-.2-.6-.2-.9-.1-1.7.1-1.5.9 0 .5.6.2 1.1 1.3 2 1 0 0-.1-.4-.3-.6l.6-.3c-.2-.1-.9-1.3-.1-.8zM15.5 12.3v.3c.3.5 1.1.1 1.9.2.6 0 .9.5 1.6 0-.6-.3-.8-2.7-1.5-2.1-.3.2-.7.6-1.3.3-.5-.2-1-.1-1.4.5 0 .3.9.3.7.8zM84.7 38.1c.5.1 1.1-.4 1.7.1.9 1 1.5.4.4-.3-.5-1-2.1-1.9-3.3-1.5-.2-.1-.2-.2-.8-.5h-.1c-1.2-.1 0 .6.9 1.1.7.1.5 1.2 1.2 1.1zM78 33.8c-.4.6-1.6 1.1-1.9 1.8 1.1 2.1 2.8.6 2.3-1.5 0-.3-.1-.4-.4-.3zM59.4 39c-.6.1-.6.9-.8 1.5.5 4.5 2.5-.3.8-1.5zM62.2 12c-.2-1.3.4-1.8 1.5-2.3.1 0 .1 0 .3-.3 0 0 .1 0 .1-.1 1.8 0 1.9-1.5-.5-.2-1.2.2-3.7 2.5-1.4 2.9zM13.4 11.6c1.3-.5 2.7-1.7-.2-1.6-.6.3-1 1.5.2 1.6zM44.8 18.4c.2.1.4.1.6.2.3-.1 1-.2 1-.8-.2-.9-3-.4-1.6.6zM42.9 14.4c-.2-.4-.4-.1-1.1 0-.5 0-.8-.3-1.4 0 .4.9 2.5 1.4 2.5 0zM45.4 19.5c-.1.4.3.5.8.9 1.6-.6.4-1.9-.8-.9zM32.3 21.5c0-.6-.7-1.3-1.1-1.2-1 .1.5 2.2 1.1 1.2zM93.9 47.9c0-.1-.1-.2-.1-.2-2.8.8-1.6 3.3.1.2zM53.1 7.6c.9 0 1.1-1.1-.2-1-.6.2-.7.9.2 1zM50.4 8.2c.9.1 1-1.1-.2-1-.5.2-.6.9.2 1zM94.4 46c-.2-.2-.7-.1-.3.5-.1.2-.1.5 0 .7-.2.3.4 1.1.5.1.2-.2.4-.3.6-.5l-.6-.3c0-.2-.1-.4-.2-.5zM44.3 19.9c.7-.1.7-.5 0-.9-.4.2-1 .7 0 .9zM21.6 9.7c-.3-.1-.6.5 0 .5.1.1.2.1.4.1.3 0 .5-.2.5-.4 0-.3-.5-.4-.9-.2zM85.9 48c.3.6 1.2.1.4-.6-.2.3-.3.5-.4.6zM49.3 24.6c.2-.2.3-.3.4-.5-.1-.2-1-.2-.4.5zM52.6 8.3c-.3-.1-.5-.4-.8.1.2.1.4.4.8-.1zM21 8.4c-.2-.2-.3-.3-.7-.1v.2c.1-.1.4.2.7-.1zM15.4 10c.1 0 .2-.1.4-.2-.2-.2-.3-.4-.7-.1.1.2.2.3.3.3zM17.8 9.9v-.2c-.1.1-.4-.2-.6.1.2.2.4.2.6.1zM18.9 11.8c.1 0 .2-.1.4-.2-.2-.1-.3-.4-.6 0l.2.2zM68.5 33.5c0 .3.7.2.2-.3-.1.1-.2.2-.2.3z"/>
|
||||
<path d="M26.2 13.4c0-.1-.2-.1-.2-.2-.1.1-.4.2 0 .5.1-.1.2-.2.2-.3zM25 10.5v.1c.3.3.3.3.6 0-.2 0-.4-.1-.6-.1zM54 25.4h-.4v.2h.4v-.2zM49.4 18.6c0 .1-.3 0-.1.3 0-.1.3-.1.1-.3zM24.1 15.7s0 .2.2 0c-.1.1 0-.1-.2 0zM20.7 10.1c0 .1.1.1.1 0 0 0 .1-.1-.1 0zM10.9 12.4zM76.7 37.3c-.5-.3-1.2-.5-1.5-1.1-4.8-5.7-2.1 1.9 1.4 1.6.3 0 .6.4.9 0 0-.3-.6-.5-.8-.5zM24.9 15.2c-.1-.3-.1-.3-.8-.4-.2-.1-.7-.7-.8 0-.3 0-.6.8.2.5h.4c0-.1.7.4 1-.1zM133.5 36.9c-2.3-1-2.2.3-3.5-2.2-1.1-.3-1.6-1-2.7-1.2-.4-.3-.3-.8-1.1-.8-.8-.3-1.7.6-2.4-.2-.4.2-.8.6-1.4.5-.3-.2-.9 0-1.3-.5.2-2.9-2.2.1-1.1-2.9l-.1-.1c-2.7 3.2-4.2-2.7-1.2-2.6.9 0 2.5-.6 2.7.9 0 .1.1.4.4.3h.1V28c.1 0-.2-1-.2-1.1-.1-.8 1.3-1.1 1.3-2-.4-.7-.2-.7.6-1.2.8-.6 1.1-1.5 2.3-1.3 0 .4 1 0 1.5-.4-.1-.4-.2-.3-1-.1-1-.8.2-1.5-1.8-.5.3-1.8 4-.6 3.5-2.4-1.2-.5-1.4-1.2-1.9-2.4-.4.1-1.1 1-1.4.2-1.2-2.1-2.9-1.6-2.2.8.1.6-.6.8-.4 1.6.3.8-.6 1-.9 0-.1-1.5-1.9-1-2.8-1.7-2-2.3 3.8-3.6 2.8-4.9-1.1-1.4-.4 2.5-2.7-.9-.5-.5 0-1-.5-1.5-1.4.6 1.3 3.7-1.3 2.5-.8.8-1.3.2-2.3.3-.4.3-.4.4-1.1.4-.8.1-.8-.4-1.5-.7-1.2-.3-2.9-.9-4.2-.1.1-.2.1-.3.2-.5-2.6 1.4-10.1-2.9-8.5 3-.1.4 0 .3-.6.6v.6c.5.3 1.6.3 1.9 1.1-.8.8.1 1 .5.1 3.9-2.9 6.8.2 8.9 3.4 0 2.2.5 4.1 2.1 5.9 0 1 1.8 2.7.5.1.9-1.4 2 4.3 4.8 3.8.1 0 .1 0 .3.1.8.4 1.8.9 2.6 1.7.4.5.9.8 1.5.7l.2.1c1 1.3-1.5 3.1.1 4.5.6 1.5 2.4 1.9 2.3 3.6-.3 1.6 0 3.4-1 4.9.4 1.7-1.2 4.5 1 5.2 1.8.3.4-1.1.6-2.2.1-.6.7-.7.5-1.5-.1-.9 1.6-1.3 2.3-1.8.8-1.3 1.8-2 2.6-3.5.8-1.1 2-.9 2.5-2.5-.2-1 2-2.1.5-3.1zM193 13.4c-1-.8-2.1-.8-3.5-.7-8.2-1.2-4.2-2.7-10.2-.6-.4-.1-.6-.3-.9-.7-.8-2.2-3.8-.2-5.7-.7-.9-.5 1.9-.6.9-1.7-2.4-1.5-5.4.4-7.7 1.5-.8.4-.6 1.5-1.7 1.6-1.7-1.6-1.2-1.7-3 .2-1.1-.1-1.7.1-2.7.8-1.8.1-2.6.5-4.2 1.7-.6.5-1.9-.5-1.2-1.1.5-.2 1 .3 1.6-.3.5-2.4-4.6-1.7-5.7-.8-5.3 2.8-2.6 6.4-.8 5.3.4-.9-.1-2.1.9-2.8 1.7-1.6.6.3.5 1.1.6.9.3 1.4-.5 2.1-1.8 1.5-4.7.2-5.9 2.7.1 2-.8 1.2-1.8 1.9-1 1.5.6 2.6 2 1.8 1.5-1.2 1.9-3 4-1.3.1.1.1 0 .4.2l.2.2c-.9 1.2 1.3.4.2-.5-.7-.6-.8-2 .5-.5.4.4.4 1.4 1.1 1.3 1.2-.9.8.4 1.9.8 2-.2 2.3 1 .6 1.7-.8.3-1.6-.2-2.6-.3-.9.3-1.9.6-2.6-.3-.8-2.2-3.4-.7-5.2-.5-1 .4-.7 1.6-1.6 2.4-1.9 1.6-1.3 5.3 1.2 6.1 4.6.7 4.2-1.8 5.8 3.4-.4 4.7 1.9 11.8 5.5 4.8.5-.5.4-.9.8-1.6.6-.6 1.2-1.2.9-2.2-.9-3.2 2-3.8 2.3-5.9-1.9.4-4.6-3.7-4.2-5.1 1.5.5 2.5 4.5 3.8 4.1.8-.5 4.1-1.9 2.8-2.8-2.8.3-3.9-3.5-.9-1 7.1.8 4.3 4.5 6.7 5 .7-1.6 3.4-5.9 3.9-1.6 1.2-1.1 1 0 1.2 1.4-.3.5 1.2 2.1.9.8-.1 0-.2-.1-.3-.3-.4-1.9.7 0 1.6-.4 1.3-.7-.3-1.7-.3-2.7.2-.8.9-.2 1.6-.4 2-.6 2.8-2.3 2.3-4.2.5 0 .7-.9-.1-.5-.8-.3 0-1.6 1.1-.7.5.2.6.9 1.3 1.1-.2-1.9 1-2 2.5-3 .9-.7 1.2-1.9 1.1-3.1-.4-.5-1-.1-1.6-.5.5-.7 1.1-1.3 2.2-1.6 1.1-.4 2 0 3.2-.5.4-.2 2.9-1.5 2 .1-.6.7-2.6 2.1-1.2 3 1-.2 1.3-2.2 2.4-2.8 1.7.1 5.5-1.5 4.2-3.4zm-38.6 10.3c-1-.3-2 .1-3.1-.3-.3-.6 1.1-2.6 1.5-1 .4-.2.4-.8 1.3-.8 0 .2-.1.4-.2.8.4.2.7.2 1.1.9-.2.2-.4.3-.6.4zm3.9.8c.1 1.4-1.5.5-1.3-.8-.8-.8-.5-1.7.7-2 .9.2-.2.9 0 1.3 1 .5.6.4.6 1.5zM137.5 11.2c-.4-.6.2-1.1.3-1.9.1-.7-.1-1.3.4-1.9.2-.6 1.7-.7 1.2-1.5-.7-.4-1.6.7-2.1-.3-2.4-2.5-6.6.1-9.6.1-1.7.3-2.7 1.5-4.1 2.4-.4.8.6.3 1.2.7.4.3.6.6 1.3.4 1.1-.4 3.4 1.1 2.4 2.4.9-.5 2.3.8.3.6.7.6.5.9.5 1.9.3 1 1.6 3.2 2.7 2.2.6-.6.3-1.4 1-2 1.2-.2 1.7-1.1 2.9-1.5.7 0 2.2-.4 1.6-1.6zM182.1 38.9c-.2.6-.6 2.4-1.6 1.3-.2-.7.2-1.5-.8-1.3-.7-.1-.6.4-1.1.9-.5.1-.9 0-1.3.4-3.6 2.8-3.1 1.1-2.3 5.4 1.3.2 3.2-1.4 4.6-.8.6.9 1.7.6 2 1.7.9.7 2.9.8 3.1-1 1.6-3-.4-3.3-1.5-5.3-.5-.4-.5-1-1.1-1.3zM118.1 7.4c.7.5 1.4.1 2.1.7-.1.1-.1.1-.4.3-.5 0-.3.7.3.5 2.5.3 1.8.1 3-1.7 1.2-.7 5.5-2.5 1.5-2.4-1.6.3-5.9.1-5.8 1.5-.3.3-1.9.3-.7 1.1z"/>
|
||||
<path d="M125.8 14.2c1.1.6 1.2-.8-.4-1.2-.5-.9-.7-1-1.8-1.6-.6-.5-1.2-.2-2-.4-.3-.5-.4-.6-1.1-.3-.1-1-1.7-.1-1.1.8 2 1.4 3.3-.1 5.1 2.8v.2c-.3-.2-.6-.2-.9-.1-1.7.1-1.5.9 0 .5.6.2 1.1 1.3 2 1 0 0-.1-.4-.3-.6l.6-.3c-.2-.1-1-1.3-.1-.8zM112.5 12.3v.3c.3.5 1.1.1 1.9.2.6 0 .9.5 1.6 0-.6-.3-.8-2.7-1.5-2.1-.3.2-.7.6-1.3.3-.5-.2-1-.1-1.4.5 0 .3.9.3.7.8zM181.7 38.1c.5.1 1.1-.4 1.7.1.9 1 1.5.4.4-.3-.5-1-2.1-1.9-3.3-1.5-.2-.1-.2-.2-.8-.5h-.1c-1.2-.1 0 .6.9 1.1.6.1.4 1.2 1.2 1.1zM175 33.8c-.4.6-1.6 1.1-1.9 1.8 1.1 2.1 2.8.6 2.3-1.5 0-.3-.2-.4-.4-.3zM156.4 39c-.6.1-.6.9-.8 1.5.5 4.5 2.5-.3.8-1.5zM159.2 12c-.2-1.3.4-1.8 1.5-2.3.1 0 .1 0 .3-.3 0 0 .1 0 .1-.1 1.8 0 1.9-1.5-.5-.2-1.2.2-3.8 2.5-1.4 2.9zM110.4 11.6c1.3-.5 2.7-1.7-.2-1.6-.7.3-1 1.5.2 1.6zM141.7 18.4c.2.1.4.1.6.2.3-.1 1-.2 1-.8-.2-.9-3-.4-1.6.6zM139.9 14.4c-.2-.4-.4-.1-1.1 0-.5 0-.8-.3-1.4 0 .3.9 2.4 1.4 2.5 0zM142.4 19.5c-.1.4.3.5.8.9 1.6-.6.3-1.9-.8-.9zM129.3 21.5c0-.6-.7-1.3-1.1-1.2-1 .1.4 2.2 1.1 1.2zM190.8 47.9c0-.1-.1-.2-.1-.2-2.7.8-1.6 3.3.1.2zM150 7.6c.9 0 1.1-1.1-.2-1-.6.2-.7.9.2 1zM147.4 8.2c.9.1 1-1.1-.2-1-.6.2-.6.9.2 1zM191.4 46c-.2-.2-.7-.1-.3.5-.1.2-.1.5 0 .7-.2.3.4 1.1.5.1.2-.2.4-.3.6-.5l-.6-.3c-.1-.2-.1-.4-.2-.5zM141.3 19.9c.7-.1.7-.5 0-.9-.4.2-1.1.7 0 .9zM118.6 9.7c-.3-.1-.6.5 0 .5.1.1.2.1.4.1.3 0 .5-.2.5-.4-.1-.3-.5-.4-.9-.2zM182.9 48c.3.6 1.2.1.4-.6-.2.3-.4.5-.4.6zM146.3 24.6c.2-.2.3-.3.4-.5-.2-.2-1.1-.2-.4.5zM149.5 8.3c-.3-.1-.5-.4-.8.1.2.1.4.4.8-.1zM118 8.4c-.2-.2-.3-.3-.7-.1v.2c.1-.1.4.2.7-.1zM112.3 10c.1 0 .2-.1.4-.2-.2-.2-.3-.4-.7-.1.1.2.2.3.3.3zM114.7 9.9v-.2c-.1.1-.4-.2-.6.1.2.2.4.2.6.1zM115.9 11.8c.1 0 .2-.1.4-.2-.2-.1-.3-.4-.6 0 0 .1.1.2.2.2zM165.5 33.5c0 .3.7.2.2-.3-.1.1-.2.2-.2.3z"/>
|
||||
<path d="M123.1 13.4c0-.1-.2-.1-.2-.2-.1.1-.4.2 0 .5.1-.1.2-.2.2-.3zM121.9 10.5v.1c.3.3.3.3.6 0-.2 0-.4-.1-.6-.1zM150.9 25.4h-.4v.2h.4c.1 0 .1-.1 0-.2zM146.4 18.6c0 .1-.3 0-.1.3 0-.1.3-.1.1-.3zM121 15.7s0 .2.2 0c0 .1 0-.1-.2 0zM117.7 10.1c0 .1.1.1.1 0 0 0 0-.1-.1 0zM107.9 12.4h-.1.1zM173.6 37.3c-.5-.3-1.2-.5-1.5-1.1-4.8-5.7-2.1 1.9 1.4 1.6.3 0 .6.4.9 0 .1-.3-.5-.5-.8-.5zM121.8 15.2c-.1-.3-.1-.3-.8-.4-.2-.1-.7-.7-.8 0-.3 0-.6.8.2.5h.4c.1-.1.8.4 1-.1z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M28 2.8C14.1 2.8 2.8 14.1 2.8 28S14.1 53.2 28 53.2 53.2 41.9 53.2 28 41.9 2.8 28 2.8z"/>
|
||||
<path d="M28 0C12.6 0 0 12.6 0 28s12.6 28 28 28 28-12.6 28-28S43.4 0 28 0zm0 53.2C14.1 53.2 2.8 41.9 2.8 28S14.1 2.8 28 2.8 53.2 14.1 53.2 28 41.9 53.2 28 53.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
@@ -1,76 +0,0 @@
|
||||
<script context="module">
|
||||
import Shuffle from 'shufflejs'
|
||||
</script>
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { continents, locations } from '../store'
|
||||
import { zoomFadeIn, zoomFadeOut } from '../animations'
|
||||
|
||||
|
||||
// Define continents to be show
|
||||
let continentsShow = []
|
||||
$continents.forEach((c, i) => {
|
||||
continentsShow[i] = {
|
||||
id: c.id,
|
||||
show: c.countries ? true : false
|
||||
}
|
||||
})
|
||||
|
||||
let filterLocations
|
||||
onMount(() => {
|
||||
filterLocations = new Shuffle(document.getElementById('locations_list'), {
|
||||
itemSelector: '.column',
|
||||
sizer: '#continents',
|
||||
speed: 400,
|
||||
staggerAmount: 50
|
||||
})
|
||||
})
|
||||
|
||||
// On click on continents
|
||||
const toggleContinents = (event, continent = '') => {
|
||||
// Change the filter
|
||||
filterLocations.filter(continent.id)
|
||||
|
||||
// Change active classes
|
||||
const continentsList = [...event.target.parentNode.children]
|
||||
continentsList.forEach(c => c.classList.remove('is-danger'))
|
||||
event.target.classList.add('is-danger')
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="buttons is-centered" id="continents">
|
||||
<button class="button is-rounded is-danger" on:click="{(e) => toggleContinents(e)}">All</button>
|
||||
{#each $continents as continent, i}
|
||||
{#if continent.countries}
|
||||
<button class="button is-rounded is-danger is-outlined" on:click="{(e) => toggleContinents(e, continent)}">
|
||||
{continent.name}
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="columns" id="locations_list">
|
||||
{#each $locations as location}
|
||||
<div class="column is-one-third animate" data-groups='["{location.country.continent.id}"]'>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a class="media" href="/location/{location.country.slug}/{location.slug}">
|
||||
<figure class="media-left">
|
||||
<span class="icon is-medium has-text-danger">
|
||||
<img src="{location.country.flag.full_url}" alt="{location.country.flag.full_url}" width="32" height="32">
|
||||
</span>
|
||||
</figure>
|
||||
|
||||
<div class="media-content">
|
||||
<span class="title is-5">{location.name}</span><br>
|
||||
{location.region}, {location.country.name}<br>
|
||||
<!-- {#if (location.photos.length > 0)}
|
||||
{location.photos.length} {(location.photos.length > 1) ? 'photos' : 'photo'}
|
||||
{/if} -->
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -1,14 +0,0 @@
|
||||
<script>
|
||||
export let segment;
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a class:selected='{segment === undefined}' href='.'>home</a></li>
|
||||
<li><a class:selected='{segment === "about"}' href='about'>about</a></li>
|
||||
|
||||
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
|
||||
the blog data when we hover over the link or tap it on a touchscreen -->
|
||||
<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -1,40 +0,0 @@
|
||||
<script>
|
||||
// Svelte
|
||||
import { fade, slide } from 'svelte/transition'
|
||||
import { site, currentLocation } from '../store'
|
||||
|
||||
// Dependencies
|
||||
import dayjs from 'dayjs'
|
||||
import advancedFormat from 'dayjs/plugin/advancedFormat'
|
||||
dayjs.extend(advancedFormat)
|
||||
|
||||
export let index
|
||||
export let photo
|
||||
const location = $currentLocation.location
|
||||
|
||||
// Manipulate data
|
||||
const thumbnail = photo.image.data.thumbnails.find(t => t.url.includes('key=large'))
|
||||
index = (index < 10 ? '0' : null) + index
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{thumbnail.url}" alt="{photo.name}, {location.name}, {location.country.name}" width="{thumbnail.width}" height="{thumbnail.height}">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<p class="is-size-5"><strong></strong>
|
||||
<strong>{photo.name}</strong>
|
||||
</p>
|
||||
<p>{location.name}, {location.country.name}</p>
|
||||
</div>
|
||||
|
||||
<footer class="card-footer has-text-grey-light">
|
||||
<span class="card-footer-item">{dayjs(photo.date).format('MMM Do, YYYY')}</span>
|
||||
<span class="card-footer-item">#{index}</span>
|
||||
</footer>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,17 +0,0 @@
|
||||
<script>
|
||||
import { currentLocation } from '../store'
|
||||
|
||||
const locationName = ($currentLocation) ? $currentLocation.location.name : 'World'
|
||||
const locationOf = ($currentLocation) ? 'Of' : 'Of The'
|
||||
</script>
|
||||
|
||||
<div class="switcher switcher--side">
|
||||
<p class="switcher__location">
|
||||
<a href="/">Houses <span class="caps">{locationOf}</span></a> <br>
|
||||
<strong class="name">{locationName}</strong>
|
||||
</p>
|
||||
|
||||
<a href="/choose" class="switcher__icon icon is-medium has-text-danger">
|
||||
<i class="fas fa-exchange-alt fa-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
30
src/molecules/Footer.svelte
Normal file
30
src/molecules/Footer.svelte
Normal file
@@ -0,0 +1,30 @@
|
||||
<script>
|
||||
// Svelte
|
||||
import { site, currentLocation } from '../store'
|
||||
|
||||
// Components
|
||||
import Switcher from '../molecules/Switcher'
|
||||
</script>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="wrap">
|
||||
<div class="footer__left">
|
||||
<Switcher radius="30" />
|
||||
</div>
|
||||
|
||||
<div class="footer__right">
|
||||
<div class="instagram">
|
||||
<a href="https://instagram.com/{$site.instagram}" target="_blank">
|
||||
<img src="/img/icons/instagram.svg" alt="Instagram">
|
||||
<span>Instagram</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="cetrucflotte">
|
||||
<span>A project by</span>
|
||||
<a href="https://cetrucflotte.com" target="_blank">
|
||||
<img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
5
src/molecules/InteractiveGlobe.svelte
Normal file
5
src/molecules/InteractiveGlobe.svelte
Normal file
@@ -0,0 +1,5 @@
|
||||
<div class="globe">
|
||||
<div class="wrap">
|
||||
<img src="/img/globe.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
13
src/molecules/Location.svelte
Normal file
13
src/molecules/Location.svelte
Normal file
@@ -0,0 +1,13 @@
|
||||
<script>
|
||||
export let name
|
||||
export let slug
|
||||
export let country
|
||||
</script>
|
||||
|
||||
<div class="location" data-groups='["{country.continent.id}"]'>
|
||||
<a href="/location/{country.slug}/{slug}">
|
||||
<img src={country.flag.full_url} alt={'Flag of ' + country.name} />
|
||||
<h3 class="location__city">{name}</h3>
|
||||
<p class="location__country style-caps">{country.name}</p>
|
||||
</a>
|
||||
</div>
|
||||
71
src/molecules/Photo.svelte
Normal file
71
src/molecules/Photo.svelte
Normal file
@@ -0,0 +1,71 @@
|
||||
<script>
|
||||
// Svelte
|
||||
import { site, currentLocation } from '../store'
|
||||
|
||||
// Dependencies
|
||||
import dayjs from 'dayjs'
|
||||
import advancedFormat from 'dayjs/plugin/advancedFormat'
|
||||
dayjs.extend(advancedFormat)
|
||||
|
||||
// Props
|
||||
export let index
|
||||
export let photo
|
||||
|
||||
// Shortcut current location
|
||||
let location
|
||||
$: location = $currentLocation.location
|
||||
|
||||
// Manipulate data
|
||||
const thumbnail = photo.image.data.thumbnails.find(thumb => thumb.url.includes('key=large'))
|
||||
</script>
|
||||
|
||||
<div class="photo">
|
||||
<div class="photo__location wrap">
|
||||
<div class="wrapper">
|
||||
<h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
|
||||
<p class="style-caps">{location.region}, {location.country.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="photo__image wrap">
|
||||
<div class="align">
|
||||
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
|
||||
<div class="photo__image--img">
|
||||
<img
|
||||
src={thumbnail.url}
|
||||
width={thumbnail.width} height={thumbnail.height}
|
||||
alt="{photo.name}, {location.region}, {location.country.name}"
|
||||
>
|
||||
</div>
|
||||
<time class="photo__image--date">{dayjs(photo.date).format('MMM Do, YYYY')}</time>
|
||||
<span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="card">
|
||||
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img
|
||||
src={thumbnail.url}
|
||||
alt="{`${photo.name}, ${location.name}, ${location.country.name}`}"
|
||||
width={thumbnail.width} height={thumbnail.height}
|
||||
>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<p class="is-size-5"><strong></strong>
|
||||
<strong>{photo.name}</strong>
|
||||
</p>
|
||||
<p>{location.name}, {location.country.name}</p>
|
||||
</div>
|
||||
|
||||
<footer class="card-footer has-text-grey-light">
|
||||
<span class="card-footer-item">{dayjs(photo.date).format('MMM Do, YYYY')}</span>
|
||||
<span class="card-footer-item">#{(index < 10 ? '0' : '') + index}</span>
|
||||
</footer>
|
||||
</a>
|
||||
</div> -->
|
||||
55
src/molecules/Switcher.svelte
Normal file
55
src/molecules/Switcher.svelte
Normal file
@@ -0,0 +1,55 @@
|
||||
<script>
|
||||
import { currentLocation } from '../store'
|
||||
|
||||
// Components
|
||||
import IconGlobe from '../atoms/iconGlobe'
|
||||
|
||||
// Props
|
||||
export let type = ''
|
||||
export let radius = 32
|
||||
|
||||
// Location variables
|
||||
let location
|
||||
let locationName
|
||||
let locationOf
|
||||
|
||||
$: {
|
||||
location = $currentLocation
|
||||
locationName = location ? location.location.name : 'World'
|
||||
locationOf = location ? 'Of' : 'Of The'
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="switcher {type}">
|
||||
<a href="/choose">
|
||||
<div class="switcher__text" class:empty={!location}>
|
||||
{#if !location}
|
||||
<span class="top">Houses</span>
|
||||
<span class="bottom">
|
||||
<em class="same-line">{locationOf}</em> {locationName}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="top">Houses <em>{locationOf}</em></span>
|
||||
<span class="bottom">{locationName}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="button-control button-control--dashed switcher__icon">
|
||||
<IconGlobe color="#fff" width="24" />
|
||||
<svg>
|
||||
<circle cx="50%" cy="50%" r="{type.includes('side') ? 24 : radius}px"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- <div class="switcher switcher--side">
|
||||
<p class="switcher__location">
|
||||
<a href="/">Houses <span class="caps">{locationOf}</span></a> <br>
|
||||
<strong class="name">{locationName}</strong>
|
||||
</p>
|
||||
|
||||
<a href="/choose" class="switcher__icon icon is-medium has-text-danger">
|
||||
<i class="fas fa-exchange-alt fa-lg"></i>
|
||||
</a>
|
||||
</div> -->
|
||||
46
src/organisms/Carousel.svelte
Normal file
46
src/organisms/Carousel.svelte
Normal file
@@ -0,0 +1,46 @@
|
||||
<div class="carousel">
|
||||
<div class="wrap">
|
||||
<div class="gallery">
|
||||
<div class="gallery__images">
|
||||
<div class="gallery__images--photo prev">
|
||||
<img src="/img/RyanStreet58.jpg" alt="">
|
||||
</div>
|
||||
<div class="gallery__images--photo front">
|
||||
<img src="/img/TurinStreet33.jpg" alt="">
|
||||
</div>
|
||||
<div class="gallery__images--photo next">
|
||||
<img src="/img/GrayRoad15.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel__controls">
|
||||
<button class="button-control button-control--white prev">
|
||||
<img src="/img/icons/arrow-pink.svg" alt="">
|
||||
</button>
|
||||
<button class="button-control button-control--white next">
|
||||
<img src="/img/icons/arrow-pink.svg" alt="">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel__information">
|
||||
<div class="carousel__information--location location">
|
||||
<p class="street">Rogers Street, West End</p>
|
||||
<p class="style-caps state">Queensland, Australia</p>
|
||||
</div>
|
||||
<!-- {viewer &&
|
||||
<p class="carousel__information--date">
|
||||
Apr 6th, 2019
|
||||
</p>
|
||||
} -->
|
||||
</div>
|
||||
|
||||
<!-- {viewer &&
|
||||
<div class="carousel__number">
|
||||
05
|
||||
</div>
|
||||
} -->
|
||||
|
||||
<!-- {!viewer && pagination} -->
|
||||
</div>
|
||||
</div>
|
||||
103
src/organisms/Locations.svelte
Normal file
103
src/organisms/Locations.svelte
Normal file
@@ -0,0 +1,103 @@
|
||||
<script context="module">
|
||||
import Shuffle from 'shufflejs'
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { locations, countries, continents } from '../store'
|
||||
// import { zoomFadeIn, zoomFadeOut } from '../animations'
|
||||
|
||||
// Components
|
||||
import Location from '../molecules/Location'
|
||||
|
||||
// Define continents to show
|
||||
let continentsToShow = []
|
||||
$continents.forEach(cont => !!cont.countries && continentsToShow.push(cont))
|
||||
|
||||
// Create the filterable list of locations
|
||||
let filterLocations
|
||||
onMount(() => {
|
||||
// filterLocations = new Shuffle(document.getElementById('continents'), {
|
||||
// itemSelector: '.location',
|
||||
// // sizer: '#locations_list',
|
||||
// speed: 400,
|
||||
// staggerAmount: 50
|
||||
// })
|
||||
})
|
||||
|
||||
// // On click on continents
|
||||
const toggleContinents = (event, continent = '') => {
|
||||
// Change the filter
|
||||
// filterLocations.filter(continent.id)
|
||||
|
||||
// Change active classes
|
||||
const continents = document.querySelectorAll('#continents a')
|
||||
if (!continent) {
|
||||
continents.forEach(cont => cont.classList.remove('disabled'))
|
||||
} else {
|
||||
continents.forEach(cont => cont.classList.add('disabled'))
|
||||
event.currentTarget.classList.remove('disabled')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="browse wrap">
|
||||
<div class="description">
|
||||
<p>Browse all the cities and countries</p>
|
||||
</div>
|
||||
|
||||
<ul class="browse__continents" id="continents">
|
||||
<li>
|
||||
<button class="button-outline" on:click|preventDefault={e => toggleContinents(e)}>All</button>
|
||||
</li>
|
||||
{#each continentsToShow as continent}
|
||||
<li>
|
||||
<button class="button-outline" on:click|preventDefault={e => toggleContinents(e, continent)}>
|
||||
<span>{continent.name}</span>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div class="browse__locations" id="locations_list">
|
||||
{#each $locations as location}
|
||||
<Location
|
||||
name={location.name}
|
||||
slug={location.slug}
|
||||
country={location.country}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="buttons is-centered" id="continents">
|
||||
<button class="button is-rounded is-danger" on:click={e => toggleContinents(e)}>All</button>
|
||||
{#each continentsToShow as continent}
|
||||
{#if continent.countries}
|
||||
<button class="button is-rounded is-danger is-outlined" on:click={e => toggleContinents(e, continent)}>{continent.name}</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="columns" id="locations_list">
|
||||
{#each $locations as location}
|
||||
<div class="column is-one-third animate" data-groups='["{location.country.continent.id}"]'>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a class="media" href="/location/{location.country.slug}/{location.slug}">
|
||||
<figure class="media-left">
|
||||
<span class="icon is-medium has-text-danger">
|
||||
<img src={location.country.flag.full_url} alt={location.country.flag.full_url} width="32" height="32">
|
||||
</span>
|
||||
</figure>
|
||||
|
||||
<div class="media-content">
|
||||
<span class="title is-5">{location.name}</span><br>
|
||||
{location.region}, {location.country.name}<br>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div> -->
|
||||
@@ -1,23 +0,0 @@
|
||||
<script>
|
||||
// Svelte
|
||||
import { site, currentLocation } from '../store'
|
||||
</script>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="content columns">
|
||||
<div class="column is-7">
|
||||
<p><strong>Houses Of {($currentLocation) ? $currentLocation.location.name : ''}</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="column columns">
|
||||
<p class="column">
|
||||
<a href="https://instagram.com/{$site.instagram}" target="_blank">Instagram</a>
|
||||
</p>
|
||||
<p class="column">
|
||||
<a href="https://cetrucflotte.com" target="_blank">A project by <img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's"></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -1,8 +1,8 @@
|
||||
<script context="module">
|
||||
import { api, site, continents, countries, locations, currentLocation } from '../store'
|
||||
import { apiEndpoints, site, continents, countries, locations } from '../store'
|
||||
|
||||
export async function preload (page, segment) {
|
||||
const res = await this.fetch(api.graphql, {
|
||||
export async function preload (page, session) {
|
||||
const request = await this.fetch(apiEndpoints.gql, {
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query: `{
|
||||
@@ -25,11 +25,8 @@
|
||||
id
|
||||
name
|
||||
slug
|
||||
continent { id name }
|
||||
flag {
|
||||
full_url
|
||||
title
|
||||
}
|
||||
flag { full_url title }
|
||||
continent { id }
|
||||
}
|
||||
}
|
||||
locations (filter: { status_eq: "published" }) {
|
||||
@@ -38,55 +35,42 @@
|
||||
name
|
||||
slug
|
||||
region
|
||||
country {
|
||||
name slug
|
||||
flag {
|
||||
full_url
|
||||
title
|
||||
}
|
||||
continent { id name }
|
||||
}
|
||||
country { id }
|
||||
description
|
||||
}
|
||||
}
|
||||
}`})
|
||||
})
|
||||
const data = await res.json()
|
||||
const result = await request.json()
|
||||
|
||||
// Set data into store
|
||||
continents.set(data.data.continents.data)
|
||||
countries.set(data.data.countries.data)
|
||||
locations.set(data.data.locations.data)
|
||||
site.set(data.data.site.data[0])
|
||||
site.set(result.data.site.data[0])
|
||||
continents.set(result.data.continents.data)
|
||||
countries.set(result.data.countries.data)
|
||||
locations.set(result.data.locations.data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Styles
|
||||
// import '../../node_modules/bulma/css/bulma.min.css'
|
||||
// import '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
|
||||
|
||||
// Components
|
||||
import Footer from '../parts/Footer.svelte'
|
||||
// Manipulate countries data
|
||||
// Replace each countrie's continent by the database
|
||||
$countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
|
||||
|
||||
// Manipulate continents data
|
||||
// Push each country to its continent
|
||||
$countries.forEach(country => {
|
||||
const continent = $continents.find(c => c.id === country.continent.id)
|
||||
const continent = $continents.find(cont => cont.id === country.continent.id)
|
||||
continent.countries = []
|
||||
if (!continent.countries.includes(country)) {
|
||||
continent.countries.push(country)
|
||||
}
|
||||
!continent.countries.includes(country) && continent.countries.push(country)
|
||||
})
|
||||
|
||||
// Manipulate locations data
|
||||
// Replace each location's country by the database
|
||||
$locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Houses Of - Beautiful houses of planet Earth</title>
|
||||
</svelte:head>
|
||||
|
||||
<style lang="scss" global>
|
||||
@import '../style/style.scss';
|
||||
@import "style/style.scss";
|
||||
</style>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
<Footer />
|
||||
|
||||
@@ -1,14 +1,43 @@
|
||||
<script>
|
||||
import { fade, slide } from 'svelte/transition'
|
||||
import { site } from '../store'
|
||||
import Locations from '../components/Locations'
|
||||
import { site, currentLocation } from '../store'
|
||||
|
||||
// Components
|
||||
import Globe from '../molecules/InteractiveGlobe'
|
||||
import Footer from '../molecules/Footer'
|
||||
import Locations from '../organisms/Locations'
|
||||
|
||||
// Reset current location if existing
|
||||
$: if ($currentLocation) {
|
||||
currentLocation.set()
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Houses Of - Beautiful houses of planet Earth</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="hero is-medium is-danger has-text-centered">
|
||||
<section class="explore">
|
||||
<div class="wrap">
|
||||
<div class="explore__top">
|
||||
<a href="/" class="button-control button-control--pink">
|
||||
<img src="/img/icons/arrow-white.svg" alt="">
|
||||
</a>
|
||||
<h1 class="title-location">Houses <em>of the</em> World</h1>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>{$site.explore_globe}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Globe />
|
||||
|
||||
<Locations />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
|
||||
<!-- <section class="hero is-medium is-danger has-text-centered">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">Houses Of The World</h1>
|
||||
@@ -31,4 +60,4 @@
|
||||
|
||||
<Locations />
|
||||
</section>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
@@ -5,16 +5,70 @@
|
||||
|
||||
// Dependencies
|
||||
// import anime from 'animejs/lib/anime.es.js'
|
||||
// import * as basicScroll from 'basicscroll'
|
||||
|
||||
// Components
|
||||
import Locations from '../components/Locations'
|
||||
import Footer from '../parts/Footer'
|
||||
import Button from '../atoms/Button'
|
||||
import IconGlobeSmall from '../atoms/IconGlobeSmall'
|
||||
import IconGlobe from '../atoms/IconGlobe'
|
||||
import InteractiveGlobe from '../molecules/InteractiveGlobe'
|
||||
import Carousel from '../organisms/Carousel'
|
||||
import Locations from '../organisms/Locations'
|
||||
import Footer from '../molecules/Footer'
|
||||
|
||||
// Reset current location
|
||||
currentLocation.set(undefined)
|
||||
// Reset current location if existing
|
||||
$: if ($currentLocation) {
|
||||
currentLocation.set()
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="hero is-medium is-danger has-text-centered">
|
||||
<svelte:head>
|
||||
<title>Houses Of - Beautiful houses of planet Earth</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="intro">
|
||||
<h1 class="title-massive title-parallax">Houses</h1>
|
||||
<!-- <MassiveTitle
|
||||
text="Houses"
|
||||
scrollFrom="0" scrollTo={window.innerHeight * 0.6}
|
||||
effectFrom="-5vw" effectTo="-20vw"
|
||||
/> -->
|
||||
|
||||
<div class="wrap">
|
||||
<div class="description">
|
||||
<p>{$site.description}</p>
|
||||
|
||||
<Button href="/choose" type="button" text="Explore locations">
|
||||
<IconGlobeSmall width="22" color="#666" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Carousel />
|
||||
</section>
|
||||
|
||||
<section class="explore explore--homepage">
|
||||
<p class="of">of</p>
|
||||
|
||||
<div class="description">
|
||||
<p>{$site.explore_list}</p>
|
||||
</div>
|
||||
|
||||
<InteractiveGlobe />
|
||||
|
||||
<!-- <MassiveTitle
|
||||
text="World"
|
||||
scrollFrom="0" scrollTo={window.innerHeight * 0.6}
|
||||
effectFrom="-5vw" effectTo="-20vw"
|
||||
/> -->
|
||||
<h1 class="title-massive title-parallax">World</h1>
|
||||
|
||||
<Locations />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
|
||||
<!-- <section class="hero is-medium is-danger has-text-centered">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">Houses Of</h1>
|
||||
@@ -26,6 +80,10 @@
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<h2 class="title is-4">Choose on globe</h2>
|
||||
|
||||
<IconGlobeSmall width="14" color="red" />
|
||||
<IconGlobe />
|
||||
|
||||
<div class="content">
|
||||
<p>{$site.explore_globe}</p>
|
||||
<p>[globe]</p>
|
||||
@@ -40,4 +98,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
<!-- <Footer /> -->
|
||||
|
||||
@@ -1,74 +1,165 @@
|
||||
<script context="module">
|
||||
// Svelte
|
||||
import { api, site, locations, currentLocation } from '../../../store'
|
||||
import { apiEndpoints, site, locations, currentLocation } from '../../../store'
|
||||
import { stores } from '@sapper/app'
|
||||
|
||||
// Preload
|
||||
// Preload data
|
||||
export async function preload (page, session) {
|
||||
const photos = await this.fetch(`${api.rest}/items/photos?fields=id,name,date,slug,image.data,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&sort=-created_on,name`)
|
||||
const photosData = await photos.json()
|
||||
|
||||
return {
|
||||
photos: photosData.data
|
||||
// Load photos
|
||||
const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.data,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&sort=-created_on,name`)
|
||||
const photos = await req.json()
|
||||
if (req.status === 200) {
|
||||
return { photos: photos.data }
|
||||
}
|
||||
this.error(404, 'Not found')
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Svelte
|
||||
import { fade, slide } from 'svelte/transition'
|
||||
import { stores } from '@sapper/app'
|
||||
const { page } = stores()
|
||||
export let photos
|
||||
|
||||
// Dependencies
|
||||
import dayjs from 'dayjs'
|
||||
import advancedFormat from 'dayjs/plugin/advancedFormat'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
|
||||
// Components
|
||||
import IconGlobe from '../../../atoms/iconGlobe'
|
||||
import IconGlobeSmall from '../../../atoms/iconGlobeSmall'
|
||||
import Cursor from '../../../atoms/Cursor'
|
||||
import Photo from '../../../molecules/Photo'
|
||||
import Switcher from '../../../molecules/Switcher'
|
||||
import Footer from '../../../molecules/Footer'
|
||||
|
||||
// Props
|
||||
export let photos
|
||||
|
||||
// Setup
|
||||
const { page } = stores()
|
||||
dayjs.extend(advancedFormat)
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
// Components
|
||||
import Photo from '../../../components/Photo'
|
||||
import SwitcherSide from '../../../components/SwitcherSide'
|
||||
|
||||
// Update current location
|
||||
currentLocation.set({
|
||||
location: $locations.find(location => location.slug === $page.params.location),
|
||||
photos: photos
|
||||
})
|
||||
const location = $locations.find(loc => loc.slug === $page.params.location)
|
||||
currentLocation.set({ location, photos })
|
||||
|
||||
// Define things
|
||||
const locationFull = `${$currentLocation.location.name}, ${$currentLocation.location.country.name}`
|
||||
const dateUpdated = (photos.length) ? {
|
||||
full: dayjs(photos[0].modified_on).format('MMM Do, YYYY'),
|
||||
relative: dayjs().to(dayjs(photos[0].modified_on))
|
||||
} : undefined
|
||||
const lastUpdated = (photos.length) ? ((dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdated.full : dateUpdated.relative) : undefined
|
||||
// Define full location
|
||||
const locationFull = `${location.name}, ${location.country.name}`
|
||||
|
||||
// Define dates
|
||||
const dateUpdatedFull = photos.length ? dayjs(photos[0].modified_on).format('MMM Do, YYYY') : ''
|
||||
const dateUpdatedRelative = photos.length ? dayjs().to(dayjs(photos[0].modified_on)) : ''
|
||||
const lastUpdated = photos.length ? (dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelative : ''
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Houses Of - Beautiful houses of {locationFull}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="section container">
|
||||
<section class="place">
|
||||
<div class="place__title">
|
||||
<h1 class="title-location title-location--big">
|
||||
<span class="top">Houses <em>of</em></span>
|
||||
<span class="bottom">{location.name}</span>
|
||||
</h1>
|
||||
|
||||
<a href="/choose" class="button-control button-control--big button-control--dashed">
|
||||
<span class="center">
|
||||
<IconGlobe width="44" color="#fff" />
|
||||
<span>Change</span>
|
||||
</span>
|
||||
<svg>
|
||||
<circle cx="50%" cy="50%" r="43%"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="wrap place__description--wrap">
|
||||
<div class="place__description">
|
||||
<div class="wrapper">
|
||||
<p>{$site.description}</p>
|
||||
<p>
|
||||
Houses Of
|
||||
<a href="/choose" class="link-change">
|
||||
{location.name}
|
||||
<span class="icon">
|
||||
<IconGlobeSmall width="14" color="#999" />
|
||||
</span>
|
||||
</a>
|
||||
{location.description}
|
||||
</p>
|
||||
<p class="updated style-caps">
|
||||
<strong>Updated</strong>
|
||||
<time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time>
|
||||
</p>
|
||||
|
||||
<div class="toggle">
|
||||
<button on:click class="active">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="17" viewBox="0 0 19 17">
|
||||
<path fill="#FF6C89" fillRule="evenodd" d="M39,30 L39,33 L24,33 L24,30 L39,30 Z M43,23 L43,26 L28,26 L28,23 L43,23 Z M39,16 L39,19 L24,19 L24,16 L39,16 Z" transform="translate(-24 -16)" />
|
||||
</svg>
|
||||
<span>List</span>
|
||||
</button>
|
||||
<button on:click>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20">
|
||||
<path fill="#FF6C89" fillRule="evenodd" d="M63,27 L63,34 L56,34 L56,27 L63,27 Z M52,25 L52,32 L45,32 L45,25 L52,25 Z M63,16 L63,23 L56,23 L56,16 L63,16 Z M52,14 L52,21 L45,21 L45,14 L52,14 Z" transform="translate(-45 -14)"/>
|
||||
</svg>
|
||||
<span>Grid</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="photos photos--list">
|
||||
<aside class="photos__side">
|
||||
<div class="sticky">
|
||||
<Switcher type="switcher--side" />
|
||||
<p class="updated style-caps">
|
||||
<strong>Updated</strong>
|
||||
<time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time>
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<Cursor type="zoom" />
|
||||
|
||||
<div class="wrap">
|
||||
{#each photos as photo, index}
|
||||
<Photo {photo} index={index + 1} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<section class="pagination">
|
||||
<button>
|
||||
<div class="pagination__page">
|
||||
<p><span>page</span> 1/3</p>
|
||||
</div>
|
||||
<p class="style-caps pagination__caption">See more photos</p>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</section>
|
||||
|
||||
<!-- <div class="section container">
|
||||
<div class="nav content">
|
||||
<SwitcherSide />
|
||||
<Switcher />
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h1 class="title is-2">{locationFull}</h1>
|
||||
{#if $currentLocation && $currentLocation.location.description}
|
||||
{#if location && location.description}
|
||||
<p>
|
||||
{$site.description}<br>
|
||||
Houses Of <a href="/choose">{$currentLocation.location.name}</a> {$currentLocation.location.description}
|
||||
Houses Of <a href="/choose">{location.name}</a> {location.description}
|
||||
</p>
|
||||
{/if}
|
||||
{#if photos.length > 0}
|
||||
<p><strong>Updated</strong> <time title="{dateUpdated && dateUpdated.full}">{lastUpdated}</time></p>
|
||||
{#if photos.length}
|
||||
<p><strong>Updated</strong> <time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time></p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if photos.length > 0}
|
||||
{#if photos.length}
|
||||
<div class="columns is-multiline">
|
||||
{#each photos as photo, index}
|
||||
<div class="column is-one-third">
|
||||
@@ -83,4 +174,4 @@
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
@@ -1,31 +1,29 @@
|
||||
<script context="module">
|
||||
// Svelte
|
||||
import { api, locations, currentLocation } from '../../../../store'
|
||||
import { apiEndpoints, locations, currentLocation } from '../../../../store'
|
||||
import { stores } from '@sapper/app'
|
||||
|
||||
// Define to preload data or load the store
|
||||
// Define either to preload data or use the store
|
||||
let preloaded
|
||||
currentLocation.subscribe(store => {
|
||||
preloaded = (store) ? store : undefined
|
||||
})
|
||||
currentLocation.subscribe(store => preloaded = store ? store : undefined)
|
||||
|
||||
// Sapper preload data
|
||||
// Preload data
|
||||
export async function preload (page, session) {
|
||||
if (preloaded === undefined) {
|
||||
const photos = await this.fetch(`${api.rest}/items/photos?fields=id,name,slug,image.data,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
|
||||
const photosData = await photos.json()
|
||||
// Load the photos if not loaded
|
||||
if (!preloaded) {
|
||||
const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.data,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
|
||||
const photos = await req.json()
|
||||
return {
|
||||
photos: photosData.data
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
photos: preloaded.photos
|
||||
photos: photos.data
|
||||
}
|
||||
}
|
||||
// Use the store otherwise
|
||||
else return {
|
||||
photos: preloaded.photos
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { stores } from '@sapper/app'
|
||||
const { page, session, preloading } = stores()
|
||||
|
||||
// Dependencies
|
||||
@@ -33,18 +31,15 @@
|
||||
import advancedFormat from 'dayjs/plugin/advancedFormat'
|
||||
dayjs.extend(advancedFormat)
|
||||
|
||||
// Props and variables
|
||||
export let photos
|
||||
let currentIndex
|
||||
let indexFormated
|
||||
let viewerPhotos
|
||||
|
||||
// Define current location
|
||||
if ($currentLocation === undefined) {
|
||||
currentLocation.set({
|
||||
location: $locations.find(location => location.slug === $page.params.location),
|
||||
photos: photos
|
||||
})
|
||||
}
|
||||
const location = $locations.find(loc => loc.slug === $page.params.location)
|
||||
$currentLocation == undefined && currentLocation.set({ location, photos })
|
||||
|
||||
// Set current photo, index and siblings
|
||||
const setCurrentPhotos = () => {
|
||||
@@ -53,9 +48,9 @@
|
||||
indexFormated = (currentIndex < 10) ? '0' + (currentIndex + 1) : currentIndex + 1
|
||||
viewerPhotos = {
|
||||
current: photos[currentIndex],
|
||||
// Last photo if first, otherwise index-1
|
||||
// Last photo if first, otherwise index - 1
|
||||
prev: (currentIndex === 0) ? photos[photos.length - 1] : photos[currentIndex - 1],
|
||||
// First photo if last, otherwise index+1
|
||||
// First photo if last, otherwise index + 1
|
||||
next: (currentIndex === photos.length - 1) ? photos[0] : photos[currentIndex + 1]
|
||||
}
|
||||
}
|
||||
@@ -67,9 +62,9 @@
|
||||
}
|
||||
})
|
||||
|
||||
// Define things
|
||||
const locationFull = `${$currentLocation.location.name}, ${$currentLocation.location.country.name}`
|
||||
const path = `/viewer/${$currentLocation.location.country.slug}/${$currentLocation.location.slug}/`
|
||||
// Define values
|
||||
const locationFull = `${location.name}, ${location.country.name}`
|
||||
const path = `/viewer/${location.country.slug}/${location.slug}/`
|
||||
|
||||
// Get thumbnail
|
||||
const getThumb = (photo, size) => {
|
||||
@@ -99,12 +94,12 @@
|
||||
<div class="container">
|
||||
<div class="nav content">
|
||||
<a href="/choose" class="button is-info" id="photo_close">Change location</a>
|
||||
<a href="/location/{$currentLocation.location.country.slug}/{$currentLocation.location.slug}" class="button is-dark" id="photo_close">Close</a>
|
||||
<a href="/location/{location.country.slug}/{location.slug}" class="button is-dark" id="photo_close">Close</a>
|
||||
</div>
|
||||
|
||||
<div class="photo">
|
||||
<div class="image">
|
||||
<img src="{getThumb(viewerPhotos.current, 'large')}" srcset="{getThumb(viewerPhotos.current, 'large')} 1x, {getThumb(viewerPhotos.current, 'large-2x')} 2x" alt="{viewerPhotos.current.name}">
|
||||
<img src={getThumb(viewerPhotos.current, 'large')} srcset="{getThumb(viewerPhotos.current, 'large')} 1x, {getThumb(viewerPhotos.current, 'large-2x')} 2x" alt="viewerPhotos.current.name">
|
||||
</div>
|
||||
<div class="details content">
|
||||
<strong class="is-size-5">{viewerPhotos.current.name}</strong> <br>
|
||||
@@ -117,10 +112,10 @@
|
||||
<div class="section">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<a href="{path + viewerPhotos.prev.slug}" id="photo_prev">
|
||||
<a href={path + viewerPhotos.prev.slug} id="photo_prev">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<img src="{getThumb(viewerPhotos.prev, 'thumbnail')}" alt="{viewerPhotos.prev.name}" width="200">
|
||||
<img src={getThumb(viewerPhotos.prev, 'thumbnail')} alt={viewerPhotos.prev.name} width="200">
|
||||
</div>
|
||||
<div class="media-content content">
|
||||
<strong class="is-size-5">{viewerPhotos.prev.name}</strong> <br>
|
||||
@@ -131,14 +126,14 @@
|
||||
</div>
|
||||
|
||||
<div class="level-right">
|
||||
<a href="{path + viewerPhotos.next.slug}" id="photo_next">
|
||||
<a href={path + viewerPhotos.next.slug} id="photo_next">
|
||||
<div class="media">
|
||||
<div class="media-content content has-text-right">
|
||||
<strong class="is-size-5">{viewerPhotos.next.name}</strong> <br>
|
||||
<span>{locationFull}</span>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<img src="{getThumb(viewerPhotos.next, 'thumbnail')}" alt="{viewerPhotos.next.name}" width="200">
|
||||
<img src={getThumb(viewerPhotos.next, 'thumbnail')} alt={viewerPhotos.next.name} width="200">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
13
src/store.js
13
src/store.js
@@ -1,3 +1,4 @@
|
||||
// Svelte
|
||||
import { writable } from 'svelte/store'
|
||||
|
||||
// Define environment
|
||||
@@ -8,17 +9,17 @@ export const dev = process.env.NODE_ENV === 'development'
|
||||
Site related
|
||||
========================================================================== */
|
||||
const apiEndpoint = dev ? 'http://api.housesof.localhost/how' : 'https://api.housesof.world/_'
|
||||
export const api = {
|
||||
graphql: apiEndpoint + '/gql?access_token=NJk0urljsdSvApUDzWxGgoO6',
|
||||
export const apiEndpoints = {
|
||||
gql: apiEndpoint + '/gql?access_token=NJk0urljsdSvApUDzWxGgoO6',
|
||||
rest: apiEndpoint
|
||||
}
|
||||
|
||||
// Data
|
||||
export let currentLocation = writable()
|
||||
export let loaded = writable(false)
|
||||
|
||||
// Data
|
||||
export let site = writable()
|
||||
export let continents = writable()
|
||||
export let countries = writable()
|
||||
export let locations = writable()
|
||||
|
||||
// Derived data
|
||||
export let currentLocation = writable()
|
||||
export let loaded = writable(false)
|
||||
|
||||
@@ -7,11 +7,31 @@
|
||||
/* ==========================================================================
|
||||
KEYFRAMES ANIMATIONS
|
||||
========================================================================== */
|
||||
// Keyframe
|
||||
// @keyframes name {
|
||||
// from {}
|
||||
// to {}
|
||||
// }
|
||||
// Rotate button dashes
|
||||
@keyframes rotateDashes {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// Spinning globe (small)
|
||||
@keyframes moveContinentsSmall {
|
||||
0% { transform: translate3d(0,0,0); }
|
||||
100% { transform: translate3d(-96.95px, 0, 0); }
|
||||
}
|
||||
.anim-spinGlobeSmall {
|
||||
animation: moveContinentsSmall 1.5s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
// Spinning globe
|
||||
@keyframes moveContinents {
|
||||
0% { transform: translate3d(0,0,0); }
|
||||
100% { transform: translate3d(-80.26px, 28.2px, 0); }
|
||||
}
|
||||
.anim-spinGlobe {
|
||||
animation: moveContinents 1.7s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,34 +1,39 @@
|
||||
html {
|
||||
font: #{$base-font-size}/24px "$font-text";
|
||||
font: #{$base-font-size} $font-sans;
|
||||
color: $color-text;
|
||||
}
|
||||
body {
|
||||
@include font-smooth;
|
||||
background: #fff;
|
||||
background: $color-primary;
|
||||
cursor: default;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
strong {
|
||||
font-family: "$font-bold";
|
||||
font-weight: normal;
|
||||
}
|
||||
em {
|
||||
font-family: "$font-text_it";
|
||||
font-style: normal;
|
||||
}
|
||||
figure, p, dl, dt, dd, ul, li {
|
||||
figure, p, dl, dt, dd, ul, ol, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
figure img {
|
||||
display: block;
|
||||
}
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Selection
|
||||
::selection { color: #fff; background: $color-primary; }
|
||||
::-moz-selection { color: #fff; background: $color-primary; }
|
||||
::selection { color: #fff; background: $color-secondary; }
|
||||
::-moz-selection { color: #fff; background: $color-secondary; }
|
||||
|
||||
// Images glitches fix
|
||||
// img {backface-visibility: hidden;}
|
||||
@@ -42,3 +47,103 @@ figure img {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Title: Massive
|
||||
.title-massive {
|
||||
font-size: 50.25vw;
|
||||
letter-spacing: -2vw;
|
||||
font-family: $font-serif-extra;
|
||||
color: $color-secondary;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Title: Locations
|
||||
.title-location {
|
||||
font-size: rem(68px);
|
||||
font-family: $font-serif;
|
||||
color: $color-secondary;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(96px);
|
||||
}
|
||||
|
||||
em {
|
||||
display: block;
|
||||
font-size: rem(18px);
|
||||
text-transform: uppercase;
|
||||
color: $color-lightpurple;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: inline-block;
|
||||
font-size: rem(32px);
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Bigger version
|
||||
&--big {
|
||||
font-size: rem(56px);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(160px);
|
||||
}
|
||||
|
||||
em {
|
||||
display: inline-block;
|
||||
font-size: rem(20px);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-left: -8px;
|
||||
font-size: rem(56px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Parallax title: Translate X
|
||||
.title-parallax {
|
||||
transform: translate3d(var(--translateX), 0, 0);
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* Text Styles
|
||||
========================================================================== */
|
||||
.location {
|
||||
text-align: center;
|
||||
|
||||
.street {
|
||||
font-family: $font-serif;
|
||||
font-size: rem(24px);
|
||||
margin-bottom: 8px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(28px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style-caps {
|
||||
font-size: rem(14px);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: $color-tertiary;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: $font-sans-light;
|
||||
font-size: rem(18px);
|
||||
line-height: 1.55;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(28px);
|
||||
line-height: 1.64;
|
||||
max-width: 572px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
/* Fonts list
|
||||
========================================================================== */
|
||||
$fonts: (
|
||||
// "font1",
|
||||
// "font2",
|
||||
// "font3"
|
||||
"G-Light",
|
||||
"G-Regular",
|
||||
"G-Semibold",
|
||||
"M-Extralight",
|
||||
"M-Light"
|
||||
);
|
||||
@each $font in $fonts {
|
||||
@include font-face($font);
|
||||
|
||||
@@ -1,24 +1,38 @@
|
||||
// Colors
|
||||
$color-primary: pink;
|
||||
$color-secondary: #000;
|
||||
$color-primary: #3C0576;
|
||||
$color-secondary: #FF6C89;
|
||||
$color-text: #333;
|
||||
$color-tertiary: #FFE0C5;
|
||||
$color-lightpurple: #8B50B2;
|
||||
$color-gray: #666;
|
||||
$color-lightgray: #999;
|
||||
|
||||
// CSS Variables
|
||||
:root {
|
||||
// Colors
|
||||
--primary: #{$color-primary};
|
||||
--secondary: #{$color-secondary};
|
||||
--text: #{$color-text};
|
||||
--color-primary: #{$color-primary};
|
||||
--color-secondary: #{$color-secondary};
|
||||
--color-text: #{$color-text};
|
||||
--color-tertiary: #{$color-tertiary};
|
||||
--color-lightpurple: #{$color-lightpurple};
|
||||
--color-gray: #{$color-gray};
|
||||
--color-lightgray: #{$color-lightgray};
|
||||
}
|
||||
|
||||
|
||||
/* Fonts
|
||||
========================================================================== */
|
||||
$base-font-size: 16px;
|
||||
$base-font-size: 28px;
|
||||
|
||||
// Families
|
||||
$replacement: "Georgia, serif";
|
||||
$font-text: "font", #{$replacement};
|
||||
$replacement-sans: "Helvetica, Arial, sans-serif";
|
||||
$replacement-serif: "Georgia, serif";
|
||||
$font-sans: "G-Regular", #{$replacement-sans};
|
||||
$font-sans-sb: "G-Semibold", #{$replacement-sans};
|
||||
$font-sans-light: "G-Light", #{$replacement-sans};
|
||||
$font-serif: "M-Light", #{$replacement-serif};
|
||||
$font-serif-extra: "M-Extralight", #{$replacement-serif};
|
||||
|
||||
|
||||
|
||||
/* Sizes, margins and spacing
|
||||
@@ -28,16 +42,15 @@ $font-text: "font", #{$replacement};
|
||||
|
||||
/* Directories
|
||||
========================================================================== */
|
||||
$dir-img: "../img";
|
||||
$dir-fonts: "../fonts";
|
||||
$dir-node: "../node-modules";
|
||||
$dir-img: "/img";
|
||||
$dir-fonts: "/fonts";
|
||||
|
||||
|
||||
/* Animation
|
||||
========================================================================== */
|
||||
// Easing
|
||||
$ease-cubic: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
$ease-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
$ease-cubic: cubic-bezier(.785, .135, .15, .86);
|
||||
$ease-quart: cubic-bezier(.165, .84, .44, 1);
|
||||
$ease-inout: ease-in-out;
|
||||
|
||||
|
||||
|
||||
336
src/style/atoms/_button.scss
Normal file
336
src/style/atoms/_button.scss
Normal file
@@ -0,0 +1,336 @@
|
||||
// Default button
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: $color-gray;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 250ms, color 350ms;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
// Icon if existing
|
||||
img, svg {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: auto;
|
||||
margin-right: 8px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 22px;
|
||||
height: auto;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
transition: all 350ms;
|
||||
}
|
||||
|
||||
// Text
|
||||
&:before {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(50% + 19px);
|
||||
width: 100%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
transition: transform 350ms, opacity 350ms;
|
||||
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
|
||||
// transition-delay: 75ms;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
transform: translate3d(0, -6px, 0);
|
||||
transition: transform 350ms, opacity 350ms;
|
||||
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
|
||||
opacity: 0;
|
||||
|
||||
@for $i from 1 to 20 {
|
||||
&:nth-child(#{$i}) { transition-delay: $i * 12ms; }
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
|
||||
svg {
|
||||
fill: #fff !important;
|
||||
}
|
||||
.anim {
|
||||
animation-play-state: running;
|
||||
}
|
||||
&:before {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, 75%, 0);
|
||||
}
|
||||
span {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
// &:after {
|
||||
// opacity: 1;
|
||||
// width: 300px;
|
||||
// height: 300px;
|
||||
// }
|
||||
}
|
||||
// &:after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// z-index: 1;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate3d(-50%, -50%, 0);
|
||||
// width: 200px;
|
||||
// height: 200px;
|
||||
// background: $color-primary;
|
||||
// opacity: 0;
|
||||
// border-radius: 50vh;
|
||||
// transition: all 250ms ease-in-out;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// Button: Control
|
||||
.button-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
pointer-events: auto;
|
||||
border-radius: 50vh;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
// Icon
|
||||
img {
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: auto;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// White variant
|
||||
&--white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// Pink variant
|
||||
&--pink {
|
||||
background-color: rgba($color-secondary, .4);
|
||||
}
|
||||
|
||||
// Gray variant
|
||||
&--gray {
|
||||
background-color: $color-gray;
|
||||
}
|
||||
|
||||
// Next direction
|
||||
&.next {
|
||||
img {
|
||||
transform: rotateY(180deg);
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dashed style
|
||||
&--dashed {
|
||||
position: relative;
|
||||
background-color: rgba($color-lightpurple, .5);
|
||||
transition: background-color 150ms ease-in-out;
|
||||
|
||||
// Icon
|
||||
svg[style] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Dashed circle
|
||||
svg:not([style]) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 130%;
|
||||
height: 130%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
circle {
|
||||
display: block;
|
||||
stroke-width: 1.75;
|
||||
stroke-dasharray: 7, 3;
|
||||
stroke: rgba($color-lightpurple, .35);
|
||||
fill: none;
|
||||
transform-origin: 50% 50%;
|
||||
animation: rotateDashes 5s linear infinite;
|
||||
animation-play-state: paused;
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
background-color: rgba($color-lightpurple, .65);
|
||||
|
||||
* {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Big
|
||||
&--big {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
text-decoration: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: rgba(#fff, .3);
|
||||
text-transform: uppercase;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(6px);
|
||||
letter-spacing: 1px;
|
||||
line-height: 1;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 10px;
|
||||
font-size: rem(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Big Dashed
|
||||
&.button-control--dashed {
|
||||
@include breakpoint (sm) {
|
||||
circle {
|
||||
stroke-width: 4.5;
|
||||
stroke-dasharray: 20, 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button: Outline
|
||||
.button-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: #fff;
|
||||
background: none;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 150ms ease;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 40px;
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
color: $color-lightpurple;
|
||||
border-color: $color-lightpurple;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-tertiary;
|
||||
border-color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggle Button
|
||||
.toggle {
|
||||
margin-top: 58px;
|
||||
background-color: rgba($color-secondary, .25);
|
||||
display: inline-flex;
|
||||
border-radius: 50vh;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $color-secondary;
|
||||
border-radius: 50vw;
|
||||
padding: 12px 24px;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(18px);
|
||||
line-height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
span {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
// Active button
|
||||
&.active {
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
|
||||
svg * {
|
||||
fill: #C78FEC;
|
||||
}
|
||||
|
||||
& + button {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/style/atoms/_cursor.scss
Normal file
18
src/style/atoms/_cursor.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
// Zoom cursor
|
||||
.cursor-zoom {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: url(#{$dir-img}/icons/zoom.svg) 0 0 no-repeat;
|
||||
background-size: cover;
|
||||
transition: opacity 300ms ease, transform 300ms ease;
|
||||
filter: drop-shadow(1px 1px 4px rgba(#000, .7));
|
||||
|
||||
// By default
|
||||
&[aria-hidden="true"] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: scale3d(0.7, 0.7, 0.7);
|
||||
}
|
||||
}
|
||||
55
src/style/atoms/_link.scss
Normal file
55
src/style/atoms/_link.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
// Change link
|
||||
.link-change {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 6px;
|
||||
padding: 0 8px;
|
||||
color: $color-secondary;
|
||||
text-decoration: none;
|
||||
transition: color 200ms ease;
|
||||
|
||||
// Line
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background-color: rgba($color-secondary, .22);
|
||||
height: 14px;
|
||||
width: 100%;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
border-radius: 50vh;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
// Icon
|
||||
.icon {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
top: -3px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-left: 6px;
|
||||
background-color: #fff;
|
||||
border-radius: 50vh;
|
||||
|
||||
svg {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-text;
|
||||
|
||||
&:after {
|
||||
background-color: rgba($color-secondary, .4);
|
||||
}
|
||||
svg * {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
90
src/style/atoms/_switcher.scss
Normal file
90
src/style/atoms/_switcher.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
// Switcher
|
||||
.switcher {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #C78FEC;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Text
|
||||
&__text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
font-family: $font-serif;
|
||||
font-size: rem(30px);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
|
||||
em {
|
||||
margin-left: -2px;
|
||||
margin-right: 16px;
|
||||
font-size: rem(14px);
|
||||
text-transform: uppercase;
|
||||
color: $color-lightpurple;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&.same-line {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: block;
|
||||
color: $color-secondary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
&__icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: 4px;
|
||||
margin-left: -8px;
|
||||
|
||||
// Image
|
||||
// svg {
|
||||
// height: 28px;
|
||||
// width: auto;
|
||||
// }
|
||||
|
||||
// Dashed circle
|
||||
// svg {
|
||||
// width: 64px;
|
||||
// height: 64px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// Side version (smaller)
|
||||
&--side {
|
||||
.switcher {
|
||||
&__text {
|
||||
font-size: rem(22px);
|
||||
}
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #F4EDFB;
|
||||
|
||||
circle {
|
||||
stroke: #F4EDFB;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken(#F4EDFB, 7);
|
||||
}
|
||||
}
|
||||
}
|
||||
.top {
|
||||
color: $color-primary;
|
||||
}
|
||||
img, svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* ==========================================================================
|
||||
FOOTER
|
||||
========================================================================== */
|
||||
.footer {
|
||||
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* ==========================================================================
|
||||
HEADER
|
||||
========================================================================== */
|
||||
.header {
|
||||
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* ==========================================================================
|
||||
MAIN
|
||||
========================================================================== */
|
||||
.main {
|
||||
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* ==========================================================================
|
||||
NAVIGATION
|
||||
========================================================================== */
|
||||
.nav {
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
/* RULE
|
||||
========================================================================== */
|
||||
// @media only screen and (max-width: $screen-tab-port) {
|
||||
|
||||
// }
|
||||
83
src/style/molecules/_footer.scss
Normal file
83
src/style/molecules/_footer.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
/* ==========================================================================
|
||||
FOOTER
|
||||
========================================================================== */
|
||||
.footer {
|
||||
background-color: #2D0458;
|
||||
|
||||
.wrap {
|
||||
display: block;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Left part
|
||||
&__left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Right part
|
||||
&__right{
|
||||
font-size: 14px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Instagram
|
||||
.instagram {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0 40px 0 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
|
||||
span {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Collective
|
||||
.cetrucflotte {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
color: rgba(#fff, .4)
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
margin: 12px 0 0 12px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
src/style/molecules/_globe.scss
Normal file
17
src/style/molecules/_globe.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
// Globe
|
||||
.globe {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
|
||||
.wrap {
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Image (for now)
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
55
src/style/molecules/_pagination.scss
Normal file
55
src/style/molecules/_pagination.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
// Pagination
|
||||
.pagination {
|
||||
background-color: $color-tertiary;
|
||||
text-align: center;
|
||||
padding: 64px 0 72px;
|
||||
position: relative;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 16vw 0 7.5vw;
|
||||
margin-top: -64px;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
// Pages
|
||||
&__page {
|
||||
p {
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-text, .15);
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
font-size: rem(72px);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(160px);
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: $font-serif;
|
||||
color: #FF0536;
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -65%);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Caption
|
||||
&__caption {
|
||||
font-size: 10px;
|
||||
color: $color-lightgray;
|
||||
letter-spacing: 2px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
146
src/style/molecules/_photo.scss
Normal file
146
src/style/molecules/_photo.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
.photo {
|
||||
|
||||
// Location
|
||||
&__location {
|
||||
margin-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: left;
|
||||
white-space: pre-line;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
font-size: rem(40px);
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $color-lightgray;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Image container
|
||||
&__image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Alignment (left or right for list view)
|
||||
.align {
|
||||
position: relative;
|
||||
max-width: 1180px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Image container
|
||||
&--img {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 8px 18px rgba(#715E4E, .2);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Cursor
|
||||
.cursor {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: $color-primary;
|
||||
display: block;
|
||||
z-index: 3;
|
||||
transition: all 200ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
cursor: none;
|
||||
|
||||
.photo__image--img:after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Date (on the side)
|
||||
&--date {
|
||||
display: block;
|
||||
color: $color-lightgray;
|
||||
font-size: rem(14px);
|
||||
margin-top: 16px;
|
||||
padding: 0 8vw;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: calc(100% + 30px);
|
||||
bottom: 0;
|
||||
transform: rotate(270deg);
|
||||
transform-origin: 0 0;
|
||||
white-space: nowrap;
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo number
|
||||
&--number {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-tertiary, .5);
|
||||
font-size: rem(124px);
|
||||
bottom: -80px;
|
||||
right: 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: 18.75vw;
|
||||
left: 92%;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
190
src/style/organisms/_carousel.scss
Normal file
190
src/style/organisms/_carousel.scss
Normal file
@@ -0,0 +1,190 @@
|
||||
// Carousel
|
||||
.carousel {
|
||||
background-color: $color-primary;
|
||||
transform: translateZ(0);
|
||||
|
||||
.wrap {
|
||||
max-width: 1280px;
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint (1600px) {
|
||||
max-width: 1424px;
|
||||
}
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
// Images
|
||||
&__images {
|
||||
position: relative;
|
||||
height: 0;
|
||||
padding-bottom: calc(100% / 1.5);
|
||||
|
||||
// Photo
|
||||
&--photo {
|
||||
position: absolute;
|
||||
background-color: $color-secondary;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 15px 60px rgba(#000, .3);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
|
||||
// Specific
|
||||
.front {
|
||||
z-index: 10;
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.prev {
|
||||
@include breakpoint (sm) {
|
||||
top: 50%;
|
||||
transform: translate(-5%, -50%) rotate(-1deg);
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
.next {
|
||||
@include breakpoint (sm) {
|
||||
top: 50%;
|
||||
transform: translate(5%, -50%) rotate(1deg);
|
||||
width: 85%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Controls (arrows)
|
||||
&__controls {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
z-index: 11;
|
||||
|
||||
.prev {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.next {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
box-shadow: 0 2px 21px rgba(#000, .15);
|
||||
}
|
||||
}
|
||||
|
||||
// Information
|
||||
&__information {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
// Location
|
||||
&--location {
|
||||
.street {
|
||||
margin-top: 24px;
|
||||
color: #fff;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 5vw;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
.state {
|
||||
color: rgba($color-tertiary, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dots for slider (mobile)
|
||||
&__dots {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0 3px;
|
||||
|
||||
&.active a {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: $color-lightpurple;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoomer
|
||||
.zoomer {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// Image
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
overflow: auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Button
|
||||
.button-control {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
119
src/style/organisms/_locations.scss
Normal file
119
src/style/organisms/_locations.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
.browse {
|
||||
margin-top: 72px;
|
||||
margin-bottom: 72px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 120px;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
margin-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Continents
|
||||
&__continents {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0 4px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Locations
|
||||
&__locations {
|
||||
margin-top: 112px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-column-gap: 120px;
|
||||
grid-row-gap: 7.5vw;
|
||||
justify-content: center;
|
||||
margin-bottom: 14.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
// Location
|
||||
.location {
|
||||
position: relative;
|
||||
margin-bottom: 48px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Flag image
|
||||
img {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 50vh;
|
||||
}
|
||||
|
||||
// City
|
||||
&__city {
|
||||
margin: 24px 0 16px;
|
||||
font-family: $font-serif;
|
||||
font-size: rem(32px);
|
||||
color: $color-secondary;
|
||||
transition: color 85ms ease-in-out;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(48px);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// Shape on hover
|
||||
&:after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.94);
|
||||
display: block;
|
||||
width: 216px;
|
||||
height: 216px;
|
||||
background: rgba($color-lightpurple, .3);
|
||||
border-radius: 50vh;
|
||||
transition: all 85ms ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
.location__city {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
156
src/style/organisms/_photos.scss
Normal file
156
src/style/organisms/_photos.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
.photos {
|
||||
position: relative;
|
||||
margin-top: -22px;
|
||||
padding-bottom: 102px;
|
||||
background-color: #fff;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: -128px;
|
||||
padding-top: 72px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
&__side {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 40px;
|
||||
left: 24px;
|
||||
height: 96%;
|
||||
pointer-events: none;
|
||||
|
||||
// Sticky
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-end;
|
||||
transform: rotate(270deg) translate(-46%,-240%);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(12px);
|
||||
color: $color-lightgray;
|
||||
margin-right: 24px;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Each photo
|
||||
.photo {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
margin-bottom: 102px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
// Last photo doesn't need spacing
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// List view
|
||||
&--list {
|
||||
& > .wrap {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
// Even photos
|
||||
&:nth-child(even) {
|
||||
// Location
|
||||
.photo__location, h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Image
|
||||
.photo__image {
|
||||
justify-content: flex-end;
|
||||
|
||||
&--date {
|
||||
right: 100%;
|
||||
left: -30px;
|
||||
}
|
||||
&--number {
|
||||
right: 77%;
|
||||
left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid view
|
||||
&--grid {
|
||||
& > .wrap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-column-gap: 48px;
|
||||
grid-row-gap: 72px;
|
||||
padding-left: 192px;
|
||||
padding-right: 64px;
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Every second (on column 2)
|
||||
&:nth-child(2n+2) {
|
||||
transform: translateY(-64px);
|
||||
}
|
||||
|
||||
.wrap, .wrapper {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Location
|
||||
&__location {
|
||||
text-align: left;
|
||||
|
||||
h2 {
|
||||
font-size: rem(28px);
|
||||
margin-top: 28px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(12px);
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
&__image {
|
||||
&--number {
|
||||
font-size: rem(96px);
|
||||
bottom: -88px;
|
||||
right: 24px;
|
||||
z-index: 1;
|
||||
transform: none;
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
&--date {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
70
src/style/pages/_explore.scss
Normal file
70
src/style/pages/_explore.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
.explore {
|
||||
background-color: $color-primary;
|
||||
overflow-x: hidden;
|
||||
|
||||
// Explore section on the Homepage
|
||||
&--homepage {
|
||||
margin-top: 15.5vw;
|
||||
|
||||
.browse {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Top part
|
||||
&__top {
|
||||
margin-top: 96px;
|
||||
margin-bottom: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 120px;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
|
||||
@include breakpoint (sm){
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Homepage: Of text
|
||||
.of {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 14vw;
|
||||
font-family: $font-serif-extra;
|
||||
font-size: 15.5vw;
|
||||
line-height: 1;
|
||||
color: $color-lightpurple;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
max-width: 312px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 72px;
|
||||
color: $color-tertiary;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
max-width: 472px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
// Massive title
|
||||
.title-massive {
|
||||
margin-top: -22vw;
|
||||
margin-left: -60px;
|
||||
}
|
||||
}
|
||||
46
src/style/pages/_homepage.scss
Normal file
46
src/style/pages/_homepage.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
// Introduction
|
||||
.intro {
|
||||
background-color: $color-tertiary;
|
||||
overflow-x: hidden;
|
||||
|
||||
// Title
|
||||
.title-massive {
|
||||
margin-top: -10vw;
|
||||
margin-left: -10vw;
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
margin-bottom: 72px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0 auto 120px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 40px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel
|
||||
.carousel {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48vw;
|
||||
background-color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
106
src/style/pages/_place.scss
Normal file
106
src/style/pages/_place.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
// Place section
|
||||
.place {
|
||||
background-position: 50% 0;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
// Title
|
||||
&__title {
|
||||
padding: 14vw 0 15vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
pointer-events: none;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
.bottom {
|
||||
text-align: right;
|
||||
margin-left: 8vw;
|
||||
}
|
||||
}
|
||||
|
||||
// Switcher button
|
||||
.button-control--dashed {
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
|
||||
// Description
|
||||
&__description {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-top: 12.5vw;
|
||||
padding-bottom: 72px;
|
||||
background-color: $color-tertiary;
|
||||
border-radius: none;
|
||||
|
||||
@include breakpoint (m) {
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px 0 0 8px;
|
||||
padding-bottom: 15vw;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(18px);
|
||||
font-family: $font-sans-light;
|
||||
line-height: 1.64;
|
||||
color: $color-text;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Updated notice
|
||||
.updated {
|
||||
font-size: rem(12px);
|
||||
margin-top: 32px;
|
||||
|
||||
strong {
|
||||
font-family: $font-sans-sb;
|
||||
color: rgba($color-text, .4);
|
||||
}
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: none;;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle
|
||||
.toggle {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -49.9vw;
|
||||
width: 50vw;
|
||||
height: 100%;
|
||||
background-color: $color-tertiary;
|
||||
}
|
||||
|
||||
&--wrap {
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
138
src/style/pages/_viewer.scss
Normal file
138
src/style/pages/_viewer.scss
Normal file
@@ -0,0 +1,138 @@
|
||||
// Viewer
|
||||
.viewer {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
min-height: 560px;
|
||||
padding-top: 24px;
|
||||
|
||||
// Top part
|
||||
&__top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 16px;
|
||||
padding-left: 24px;
|
||||
padding-right: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
position: static;
|
||||
justify-content: center;
|
||||
margin: 24px 0 48px;
|
||||
}
|
||||
|
||||
// Tip message
|
||||
.tip {
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(10px);
|
||||
text-transform: uppercase;
|
||||
color: rgba($color-tertiary, .4);
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.buttons {
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel
|
||||
.carousel {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translate3d(0, -37%, 0);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
position: static;
|
||||
transform: none;
|
||||
margin-bottom: 88px;
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Information
|
||||
&__information {
|
||||
margin-top: 24px;
|
||||
padding: 0 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Location
|
||||
&--location {
|
||||
text-align: left;
|
||||
|
||||
.street {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Date
|
||||
&--date {
|
||||
color: rgba($color-tertiary, .5);
|
||||
font-size: rem(12px);
|
||||
margin-top: 16px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(14px);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Photo number
|
||||
&__number {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
transform: translate3d(0, 0%, 0);
|
||||
width: 100%;
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-tertiary, .4);
|
||||
font-size: 42vw;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
top: auto;
|
||||
right: 250px;
|
||||
bottom: -19vw;
|
||||
width: auto;
|
||||
font-size: rem(300px);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Dots
|
||||
&__dots {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@charset "utf-8";
|
||||
@charset "UTF-8";
|
||||
|
||||
// Tools
|
||||
@import "variables";
|
||||
@@ -8,27 +8,33 @@
|
||||
|
||||
// Dependencies
|
||||
@import "normalize.css/normalize";
|
||||
// @import "bulma/css/bulma.min";
|
||||
// @import "@fortawesome/fontawesome-free/css/all.min";
|
||||
|
||||
// Base
|
||||
@import "base";
|
||||
@import "fonts";
|
||||
|
||||
// Layout
|
||||
@import "layout/header";
|
||||
@import "layout/nav";
|
||||
@import "layout/main";
|
||||
@import "layout/footer";
|
||||
// Atoms
|
||||
@import "atoms/button";
|
||||
@import "atoms/link";
|
||||
@import "atoms/switcher";
|
||||
@import "atoms/cursor";
|
||||
|
||||
// Modules
|
||||
// @import "modules/module";
|
||||
// Molecules
|
||||
@import "molecules/photo";
|
||||
@import "molecules/pagination";
|
||||
@import "molecules/globe";
|
||||
@import "molecules/footer";
|
||||
|
||||
// Components
|
||||
// @import "components/component";
|
||||
// Organisms
|
||||
@import "organisms/locations";
|
||||
@import "organisms/carousel";
|
||||
@import "organisms/photos";
|
||||
|
||||
// Pages
|
||||
@import "pages/homepage";
|
||||
@import "pages/viewer";
|
||||
@import "pages/place";
|
||||
@import "pages/explore";
|
||||
|
||||
// Animations
|
||||
// @import "animations/animation";
|
||||
|
||||
// Responsive
|
||||
// @import "layout/responsive";
|
||||
@import "animations";
|
||||
|
||||
@@ -20,9 +20,30 @@
|
||||
|
||||
/* Containers
|
||||
========================================================================== */
|
||||
.container {
|
||||
|
||||
}
|
||||
// Wrap (global)
|
||||
.wrap {
|
||||
max-width: 1424px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 0 60px;
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
padding: 0 128px;
|
||||
}
|
||||
@include breakpoint (1600px) {
|
||||
padding: 0 48px;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper (inside and more spaced)
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: calc(892px + 28vw);
|
||||
padding: 0 8vw;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 0 14vw;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
// Reponsive breakpoints
|
||||
@mixin breakpoint ($size) {
|
||||
@if ($size == m) {
|
||||
@media (min-width: $screen-m) { @content; }
|
||||
@media (min-width: $screen-mob) { @content; }
|
||||
}
|
||||
@else if ($size == xs) {
|
||||
@media (max-width: $screen-xs) { @content; }
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="shortcut icon" type="image/png" href="/img/favicon.png">
|
||||
|
||||
%sapper.base%
|
||||
%sapper.styles%
|
||||
|
||||
Reference in New Issue
Block a user