WIP
This commit is contained in:
@@ -1,15 +1,24 @@
|
||||
<script>
|
||||
export let href
|
||||
export let type
|
||||
export let href = '#'
|
||||
export let type = 'a'
|
||||
export let className = 'button'
|
||||
export let text = ''
|
||||
|
||||
// Transformed text into spans
|
||||
const textSpans = text
|
||||
.replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '<span>$&</span>'))
|
||||
.replace(/ /g, '\u00a0')
|
||||
// Wrap string's each letters into a span
|
||||
// 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}>
|
||||
{#if type === 'button'}
|
||||
<button class={className} data-text={text}>
|
||||
<slot></slot>
|
||||
{@html textSpans}
|
||||
<span>{text}</span>
|
||||
</button>
|
||||
|
||||
{:else}
|
||||
<a {href} class={className} data-text={text}>
|
||||
<slot></slot>
|
||||
<span>{text}</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
<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>
|
||||
14
src/atoms/IconArrow.svelte
Normal file
14
src/atoms/IconArrow.svelte
Normal file
@@ -0,0 +1,14 @@
|
||||
<script>
|
||||
export let direction = 'left'
|
||||
export let color = '#fff'
|
||||
export let className
|
||||
export let hidden = undefined
|
||||
</script>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill={color} class={className} aria-hidden={hidden}>
|
||||
{#if direction === 'left'}
|
||||
<path d="M.26 10.85l-.06-.11-.08-.15-.05-.16-.04-.13a1.5 1.5 0 010-.6c0-.05.03-.09.04-.13l.05-.16.08-.15.06-.1c.06-.1.13-.17.2-.25L9.2.45c.61-.6 1.61-.6 2.23 0 .62.6.62 1.57 0 2.17L5.4 8.47h13.02c.87 0 1.58.68 1.58 1.53s-.7 1.53-1.58 1.53H5.4l6.03 5.85c.62.6.62 1.57 0 2.17-.3.3-.71.45-1.12.45-.4 0-.8-.15-1.11-.45L.46 11.08a1.5 1.5 0 01-.2-.23"/>
|
||||
{:else if direction === 'right'}
|
||||
<path d="M19.74 10.85l.06-.11.08-.15.05-.16.04-.13c.04-.2.04-.4 0-.6 0-.05-.03-.09-.04-.13l-.05-.16-.08-.15-.06-.1a1.53 1.53 0 00-.2-.25L10.8.45c-.61-.6-1.61-.6-2.23 0a1.5 1.5 0 000 2.17l6.03 5.85H1.58C.71 8.47 0 9.15 0 10s.7 1.53 1.58 1.53H14.6l-6.03 5.85a1.5 1.5 0 000 2.17c.3.3.71.45 1.12.45.4 0 .8-.15 1.11-.45l8.74-8.47.2-.23"/>
|
||||
{/if}
|
||||
</svg>
|
||||
10
src/atoms/IconCross.svelte
Normal file
10
src/atoms/IconCross.svelte
Normal file
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
export let width = 18
|
||||
export let color = '#fff'
|
||||
export let className
|
||||
export let hidden = undefined
|
||||
</script>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" {width} fill={color} class={className} aria-hidden={hidden}>
|
||||
<path fill-rule="nonzero" d="M16.63.37c.47.47.5 1.2.09 1.7l-.09.1-6.32 6.33 6.32 6.32a1.28 1.28 0 01-1.7 1.9l-.1-.09-6.33-6.32-6.32 6.32a1.28 1.28 0 01-1.9-1.7l.09-.1L6.69 8.5.37 2.18a1.28 1.28 0 011.7-1.9l.1.09L8.5 6.69 14.82.37c.5-.5 1.31-.5 1.81 0z"/>
|
||||
</svg>
|
||||
@@ -1,6 +1,11 @@
|
||||
<script>
|
||||
import * as fn from '../functions'
|
||||
|
||||
export let width = 56
|
||||
export let color = '#000'
|
||||
|
||||
const randomId1 = fn.randomString(6, 'A')
|
||||
const randomId2 = fn.randomString(6, 'A')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -15,15 +20,15 @@
|
||||
}
|
||||
</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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} fill={color} viewBox="0 0 56 75">
|
||||
<defs>
|
||||
<ellipse id="planet_2_" cx="31.5" cy="60.6" rx="24.5" ry="24.4"/>
|
||||
<ellipse id={randomId1} 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 id={randomId2}>
|
||||
<use overflow="visible" xlink:href="#{randomId1}"/>
|
||||
</clipPath>
|
||||
<g transform="translate(0,-32)">
|
||||
<g clip-path="url(#planet_3_)">
|
||||
<g clip-path="url(#{randomId2})">
|
||||
<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"/>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<script>
|
||||
import * as fn from '../functions'
|
||||
|
||||
export let width = 56
|
||||
export let color = '#000'
|
||||
|
||||
const randomId1 = fn.randomString(6, 'A')
|
||||
const randomId2 = fn.randomString(6, 'A')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -15,14 +20,14 @@
|
||||
}
|
||||
</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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} fill={color} viewBox="0 0 56 56">
|
||||
<defs>
|
||||
<circle id="planet" cx="28.1" cy="28" r="26.6"/>
|
||||
<circle id={randomId1} cx="28.1" cy="28" r="26.6"/>
|
||||
</defs>
|
||||
<clipPath id="continents">
|
||||
<use overflow="visible" xlink:href="#planet"/>
|
||||
<clipPath id={randomId2}>
|
||||
<use overflow="visible" xlink:href="#{randomId1}"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#continents)">
|
||||
<g clip-path="url(#{randomId2})">
|
||||
<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"/>
|
||||
|
||||
11
src/atoms/LinkChange.svelte
Normal file
11
src/atoms/LinkChange.svelte
Normal file
@@ -0,0 +1,11 @@
|
||||
<script>
|
||||
export let href = '#'
|
||||
export let text = ''
|
||||
</script>
|
||||
|
||||
<a href={href} class="link-change">
|
||||
{text}
|
||||
<span class="icon">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</a>
|
||||
85
src/atoms/ToggleLayout.svelte
Normal file
85
src/atoms/ToggleLayout.svelte
Normal file
@@ -0,0 +1,85 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
// Variables
|
||||
let toggleLayout
|
||||
let layoutSetting
|
||||
|
||||
|
||||
/*
|
||||
** Run code on browser only
|
||||
*/
|
||||
onMount(() => {
|
||||
// Get layout setting from storage
|
||||
layoutSetting = (localStorage.getItem('photosLayout')) ? localStorage.getItem('photosLayout') : 'list'
|
||||
|
||||
// Variables
|
||||
const layoutGridClass = 'photos--grid'
|
||||
const layoutListClass = 'photos--list'
|
||||
const grid = document.querySelector('.photos')
|
||||
const toggle = document.querySelector('.toggle')
|
||||
const pill = toggle.querySelector('.pill')
|
||||
const activeButton = document.querySelector(`.toggle [data-layout="${layoutSetting}"]`)
|
||||
|
||||
// Init of first option
|
||||
pill.style.width = activeButton.getBoundingClientRect().width + 'px'
|
||||
pill.style.left = activeButton.getBoundingClientRect().left - toggle.getBoundingClientRect().left + 'px'
|
||||
|
||||
// Toggle layout
|
||||
toggleLayout = event => {
|
||||
const clicked = event.currentTarget
|
||||
const type = clicked.dataset.layout
|
||||
|
||||
// Change the layout
|
||||
switch (type) {
|
||||
case 'grid':
|
||||
grid.classList.add(layoutGridClass)
|
||||
grid.classList.remove(layoutListClass)
|
||||
break;
|
||||
case 'list':
|
||||
grid.classList.add(layoutListClass)
|
||||
grid.classList.remove(layoutGridClass)
|
||||
break;
|
||||
default: break;
|
||||
}
|
||||
|
||||
// Animate the active pill
|
||||
pill.style.width = clicked.getBoundingClientRect().width + 'px'
|
||||
pill.style.left = clicked.getBoundingClientRect().left - toggle.getBoundingClientRect().left + 'px'
|
||||
|
||||
// Add/Remove active classes
|
||||
document.querySelectorAll('.toggle button').forEach(button => button.classList.remove('active'))
|
||||
clicked.classList.add('active')
|
||||
|
||||
// Remember this setting
|
||||
localStorage.setItem('photosLayout', type)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="toggle">
|
||||
<button data-layout="list" class:active={layoutSetting === 'list'} on:click={toggleLayout}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="17" viewBox="0 0 19 17">
|
||||
<g class="anim">
|
||||
<rect width="15" height="3"/>
|
||||
<rect width="15" height="3" x="4" y="7"/>
|
||||
<rect width="15" height="3" y="14"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span>List</span>
|
||||
</button>
|
||||
|
||||
<button data-layout="grid" class:active={layoutSetting === 'grid'} on:click={toggleLayout}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20">
|
||||
<g class="anim">
|
||||
<rect width="7" height="7"/>
|
||||
<rect width="7" height="7" x="11" y="2"/>
|
||||
<rect width="7" height="7" y="11"/>
|
||||
<rect width="7" height="7" x="11" y="13"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span>Grid</span>
|
||||
</button>
|
||||
|
||||
<div class="pill" aria-hidden="true" role="presentation"></div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user