WIP

package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "animejs": "^3.1.0",
-    "basicscroll": "^3.0.2",
+    "aos": "^2.3.4",
     "compression": "^1.7.4",
     "dayjs": "^1.8.20",
     "normalize.css": "^8.0.1",
@@ -26,8 +26,6 @@
     "sirv": "^0.4.2"
   },
   "devDependencies": {
-    "sapper": "^0.27.9",
-    "svelte": "github:rixo/svelte#hmr-capture-state-dist",
     "@babel/core": "^7.8.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.8.3",
@@ -37,6 +35,7 @@
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",
     "autoprefixer": "^9.7.4",
+    "basicscroll": "^3.0.2",
     "eslint-config-standard": "^14.1.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-node": "^11.0.0",
@@ -55,6 +54,8 @@
     "rollup-plugin-svelte": "^5.1.1",
     "rollup-plugin-svelte-hot": "^0.2.0-0",
     "rollup-plugin-terser": "^5.2.0",
+    "sapper": "^0.27.9",
+    "svelte": "github:rixo/svelte#hmr-capture-state-dist",
     "svelte-preprocess": "^3.4.0"
   },
   "browserslist": [

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 dependencies:
   animejs: 3.1.0
-  basicscroll: 3.0.2
+  aos: 2.3.4
   compression: 1.7.4
   dayjs: 1.8.20
   normalize.css: 8.0.1
@@ -17,6 +17,7 @@ devDependencies:
   '@rollup/plugin-node-resolve': 7.1.1_rollup@1.31.0
   '@rollup/plugin-replace': 2.3.1_rollup@1.31.0
   autoprefixer: 9.7.4
+  basicscroll: 3.0.2
   eslint-config-standard: 14.1.0_13a54f81caffeb9134dc06c172bdde71
   eslint-plugin-import: 2.20.1
   eslint-plugin-node: 11.0.0
@@ -1052,6 +1053,14 @@ packages:
     optional: true
     resolution:
       integrity: sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
+  /aos/2.3.4:
+    dependencies:
+      classlist-polyfill: 1.2.0
+      lodash.debounce: 4.0.8
+      lodash.throttle: 4.1.1
+    dev: false
+    resolution:
+      integrity: sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==
   /aproba/1.2.0:
     dev: true
     resolution:
@@ -1248,7 +1257,7 @@ packages:
     dependencies:
       eases: 1.0.8
       parse-unit: 1.0.1
-    dev: false
+    dev: true
     resolution:
       integrity: sha512-xMSBINspbWYZ3tMCqjSxTWDKWPgvje2f2Ob+bGJ2qTOfinZzIsLbWOdwT7b1q0irtqp2eqzdqGMuqAFceM0muw==
   /bcrypt-pbkdf/1.0.2:
@@ -1520,6 +1529,10 @@ packages:
     optional: true
     resolution:
       integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
+  /classlist-polyfill/1.2.0:
+    dev: false
+    resolution:
+      integrity: sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=
   /clean-css/4.2.1:
     dependencies:
       source-map: 0.6.1
@@ -1888,7 +1901,7 @@ packages:
     resolution:
       integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
   /eases/1.0.8:
-    dev: false
+    dev: true
     resolution:
       integrity: sha1-8fUGmmtu0upRD5xhEDmNY+/pruY=
   /ecc-jsbn/0.1.2:
@@ -3342,6 +3355,10 @@ packages:
     dev: true
     resolution:
       integrity: sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+  /lodash.debounce/4.0.8:
+    dev: false
+    resolution:
+      integrity: sha1-gteb/zCmfEAF/9XiUVMArZyk168=
   /lodash.template/4.5.0:
     dependencies:
       lodash._reinterpolate: 3.0.0
@@ -3355,6 +3372,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
+  /lodash.throttle/4.1.1:
+    dev: false
+    resolution:
+      integrity: sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
   /lodash/4.17.15:
     dev: true
     resolution:
@@ -3966,7 +3987,7 @@ packages:
     resolution:
       integrity: sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
   /parse-unit/1.0.1:
-    dev: false
+    dev: true
     resolution:
       integrity: sha1-fhu21b7zh0wo45JSaiVBFwKR7s8=
   /parseurl/1.3.3:
@@ -5839,6 +5860,7 @@ specifiers:
   '@rollup/plugin-node-resolve': ^7.1.1
   '@rollup/plugin-replace': ^2.3.1
   animejs: ^3.1.0
+  aos: ^2.3.4
   autoprefixer: ^9.7.4
   basicscroll: ^3.0.2
   compression: ^1.7.4

rollup.config.js

@@ -1,12 +1,12 @@
 import resolve from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
 import commonjs from '@rollup/plugin-commonjs'
-import svelte from 'rollup-plugin-svelte-hot'
+// import svelte from 'rollup-plugin-svelte-hot'
-// import svelte from 'rollup-plugin-svelte'
+import svelte from 'rollup-plugin-svelte'
 import babel from 'rollup-plugin-babel'
 // import { eslint } from 'rollup-plugin-eslint'
 // import browsersync from 'rollup-plugin-browsersync'
-import hmr from 'rollup-plugin-hot'
+// import hmr from 'rollup-plugin-hot'
 import sveltePreprocess from 'svelte-preprocess'
 import { terser } from 'rollup-plugin-terser'
 import config from 'sapper/config/rollup.js'
@@ -36,30 +36,26 @@ export default {
 		input: config.client.input(),
 		output: {
 			...config.client.output(),
-			...dev && { exports: 'named' }
+			// ...dev && { exports: 'named' }
 		},
-		experimentalCodeSplitting: true,
+		// experimentalCodeSplitting: true,
 		plugins: [
 			// Javascript
 			svelte({
 				dev,
 				preprocess,
 				hydratable: true,
-				emitCss: !hot,
+				// emitCss: true,
 				// css: css => css.write('public/bundle.css'),
-				...(!hot && {
+				css: css => css.write('static/bundle.css', dev),
-					css: css => {
+				// hot: hot && {
-						css.write('public/bundle.css')
+				// 	// sapper-dev-client expects either webpack or rollup with no HMR, so
-					},
+				// 	// we need to prevent it from doing full reloads with rollup
-				}),
+				// 	patchSapperDevClient: true,
-				hot: hot && {
+				// 	// optimistic will try to recover from runtime errors during
-					// sapper-dev-client expects either webpack or rollup with no HMR, so
+				// 	// component init (instead of doing a full reload)
-					// we need to prevent it from doing full reloads with rollup
+				// 	optimistic: true,
-					patchSapperDevClient: true,
+				// }
-					// optimistic will try to recover from runtime errors during
-					// component init (instead of doing a full reload)
-					optimistic: true,
-				}
 			}),
 			replace({
 				'process.browser': true,
@@ -72,15 +68,15 @@ export default {
 			}),
 			commonjs(),
 			// dev && eslint(),
-			legacy && !hot && babel({
+			!dev && babel({
 				extensions: ['.js', '.mjs', '.html', '.svelte'],
 				exclude: ['node_modules/@babel/**'],
 				runtimeHelpers: true
 			}),
-			hot && hmr({
+			// hot && hmr({
-				public: '__sapper__/dev',
+			// 	public: '__sapper__/dev',
-				inMemory: true,
+			// 	inMemory: true,
-			}),
+			// }),
 
 			// Compress Javascript
 			!dev && terser({

src/animations.js

@@ -9,7 +9,7 @@ export const zoomFadeIn = (node, { targets, duration }) => {
                 duration,
                 easing: 'easeInOutCirc',
                 opacity: [0, 1],
-                scale: [.9, 1],
+                scale: [0.9, 1],
                 delay: anime.stagger(100)
             })
         }
@@ -23,7 +23,7 @@ export const zoomFadeOut = (node, { targets, duration }) => {
                 duration,
                 easing: 'easeInOutCirc',
                 opacity: [1, 0],
-                scale: [1, .9],
+                scale: [1, 0.9],
                 delay: anime.stagger(100)
             })
         }

src/atoms/Button.svelte

@@ -1,15 +1,24 @@
 <script>
-    export let href
+    export let href = '#'
-    export let type
+    export let type = 'a'
+    export let className = 'button'
     export let text = ''
 
-    // Transformed text into spans
+    // Wrap string's each letters into a span
-    const textSpans = text
+    // const textSpans = text
-        .replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '<span>$&</span>'))
+    //     .replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '<span>$&</span>'))
-        .replace(/ /g, '\u00a0')
+    //     .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}

src/atoms/Cursor.svelte

@@ -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>

src/atoms/IconArrow.svelte

@@ -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>

src/atoms/IconCross.svelte

@@ -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>

src/atoms/IconGlobe.svelte

@@ -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_">
+    <clipPath id={randomId2}>
-        <use overflow="visible" xlink:href="#planet_2_"/>
+        <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"/>

src/atoms/IconGlobeSmall.svelte

@@ -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">
+    <clipPath id={randomId2}>
-        <use overflow="visible" xlink:href="#planet"/>
+        <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"/>

src/atoms/LinkChange.svelte

@@ -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>

src/atoms/ToggleLayout.svelte

@@ -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>

src/functions.js

@@ -0,0 +1,66 @@
+import { apiEndpoints } from './store'
+
+
+/*
+** Debounce function with a delay
+** (For scrolling or other resource demanding behaviors)
+*/
+export const debounce = (callback, wait) => {
+    // let timeout
+    // return (...args) => {
+    //     const context = this
+    //     clearTimeout(timeout)
+    //     timeout = setTimeout(() => callback.apply(context, args), wait)
+    // }
+}
+
+
+/*
+** Wrap string's each letters into a span
+*/
+export const lettersToSpan = string => {
+    return string
+        .replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '<span>$&</span>'))
+        .replace(/ /g, '\u00a0')
+}
+
+
+/*
+** Check if element is in viewport
+*/
+export const isInViewport = element => {
+    const bounding = element.getBoundingClientRect()
+    return (
+        bounding.top >= 0 &&
+        bounding.left >= 0 &&
+        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+    )
+}
+
+
+/*
+** Random String Generator
+*/
+export const randomString = (length = 6, type = 'A') => {
+    type = type && type.toLowerCase()
+    let str = ''
+    let i = 0
+    const min = type == 'a' ? 10 : 0
+    const max = type == 'n' ? 10 : 62
+    for (; i++ < length;) {
+        let r = Math.random() * (max - min) + min << 0
+        str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48)
+    }
+    return str
+}
+
+
+/*
+** Get thumbnail from API
+*/
+export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => {
+    const ratio = 1.5
+    height = !height ? Math.round(width / ratio) : height
+    return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}`
+}

src/molecules/Photo.svelte

@@ -1,6 +1,6 @@
 <script>
-    // Svelte
     import { site, currentLocation } from '../store'
+    import * as fn from '../functions'
 
     // Dependencies
     import dayjs from 'dayjs'
@@ -14,9 +14,6 @@
     // 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">
@@ -32,40 +29,17 @@
             <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
                 <div class="photo__image--img">
                     <img
-                        src={thumbnail.url}
+                        src="{fn.getThumbnail(photo.image.private_hash, 800)}"
-                        width={thumbnail.width} height={thumbnail.height}
+                        srcset="{fn.getThumbnail(photo.image.private_hash, 1200)} 1200w, {fn.getThumbnail(photo.image.private_hash, 1600)} 1600w"
+                        width="600" height="400"
                         alt="{photo.name}, {location.region}, {location.country.name}"
                     >
                 </div>
-                <time class="photo__image--date">{dayjs(photo.date).format('MMM Do, YYYY')}</time>
+                <time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
+                    {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> -->

src/molecules/Switcher.svelte

@@ -35,7 +35,10 @@
         </div>
 
         <div class="button-control button-control--dashed switcher__icon">
-            <IconGlobe color="#fff" width="24" />
+            <IconGlobe
+                color={type.includes('side') ? '#333' : '#fff'}
+                width={type.includes('side') ? 18 : 24}
+            />
             <svg>
                 <circle cx="50%" cy="50%" r="{type.includes('side') ? 24 : radius}px"></circle>
             </svg>

src/organisms/Carousel.svelte

@@ -1,46 +1,123 @@
+<script>
+    import { onMount } from 'svelte'
+    import * as fn from '../functions'
+
+    // Components
+    import IconArrow from '../atoms/IconArrow'
+
+    // Props and variables
+    export let viewer = false
+    export let photos = []
+    let hover
+    let photoPrev
+    let photoNext
+
+
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        // Hover function
+        hover = event => {
+            const to = event.currentTarget.dataset.to
+            const photoActive = document.querySelector('.gallery .active')
+            const photoToHover = (to === 'prev') ? photoActive.previousSibling : photoActive.nextSibling
+            if (event.type === 'mouseenter') {
+                photoToHover.classList.add('hover')
+            } else {
+                photoToHover.classList.remove('hover')
+            }
+        }
+
+        // Go to previous photo
+        photoPrev = () => {
+            console.log('previous photo')
+        }
+
+        // Go to next photo
+        photoNext = () => {
+            console.log('next photo')
+        }
+    })
+
+</script>
+
 <div class="carousel">
     <div class="wrap">
         <div class="gallery">
             <div class="gallery__images">
-                <div class="gallery__images--photo prev">
+                {#each photos as photo, index}
-                    <img src="/img/RyanStreet58.jpg" alt="">
+                <div class="gallery__images--photo"
-                </div>
+                    class:prev={index === 0}
-                <div class="gallery__images--photo front">
+                    class:active={index === 1}
-                    <img src="/img/TurinStreet33.jpg" alt="">
+                    class:next={index === 2}
-                </div>
+                >
-                <div class="gallery__images--photo next">
+                    <img
-                    <img src="/img/GrayRoad15.jpg" alt="">
+                        src="{fn.getThumbnail(photo.image.private_hash, 800)}"
+                        srcset="{fn.getThumbnail(photo.image.private_hash, 1200)} 1200w, {fn.getThumbnail(photo.image.private_hash, 1600)} 1600w"
+                        alt="{photo.name}, {photo.location.name}, {photo.location.country.name}"
+                    />
                 </div>
+                {/each}
             </div>
 
             <div class="carousel__controls">
-                <button class="button-control button-control--white prev">
+                <button class="button-control button-control--white dir-left" data-to="prev" aria-label="Previous"
-                    <img src="/img/icons/arrow-pink.svg" alt="">
+                    on:click={photoPrev}
+                    on:mouseenter={hover}
+                    on:mouseleave={hover}
+                >
+                    <IconArrow direction="left" color="#ff6c89" className="icon" />
+                    <IconArrow direction="left" color="#fff" className="icon" hidden="true" />
                 </button>
-                <button class="button-control button-control--white next">
+                <button class="button-control button-control--white dir-right" data-to="next" aria-label="Next"
-                    <img src="/img/icons/arrow-pink.svg" alt="">
+                    on:mouseenter={hover}
+                    on:mouseleave={hover}
+                    on:click={photoNext}
+                >
+                    <IconArrow direction="right" color="#ff6c89" className="icon" />
+                    <IconArrow direction="right" color="#fff" className="icon" hidden="true" />
                 </button>
             </div>
+
+            {#if viewer}
+            <div class="carousel__number">05</div>
+            {/if}
         </div>
 
         <div class="carousel__information">
-            <div class="carousel__information--location location">
+            <div class="carousel__information--location style-location">
-                <p class="street">Rogers Street, West End</p>
+                <!-- <p class="street">{photos[0].name}</p>
-                <p class="style-caps state">Queensland, Australia</p>
+                <p class="style-caps state">{photos[0].location.region}, {photos[0].location.country.name}</p> -->
             </div>
-            <!-- {viewer &&
+            <!-- <div class="carousel__information--location style-location" aria-hidden="true">
-                <p class="carousel__information--date">
+                <p class="street">{photos[1].name}</p>
-                    Apr 6th, 2019
+                <p class="style-caps state">{photos[1].location.region}, {photos[1].location.country.name}</p>
-                </p>
+            </div> -->
-            } -->
+            {#if viewer}
+            <p class="carousel__information--date">Apr 6th, 2019</p>
+            {/if}
         </div>
 
-        <!-- {viewer &&
+        {#if !viewer}
-            <div class="carousel__number">
+        <ol class="carousel__dots">
-                05
+            {#each photos as page, index}
+            <li class:active={index === 0}>
+                <button></button>
+            </li>
+            {/each}
+        </ol>
+        {/if}
     </div>
-        } -->
 
-        <!-- {!viewer && pagination} -->
+    {#if viewer}
-    </div>
+    <ol class="carousel__dots">
+        {#each photos as page}
+        <li class:active={false}>
+            <button></button>
+        </li>
+        {/each}
+    </ol>
+    {/if}
 </div>
+

src/organisms/Locations.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-    import Shuffle from 'shufflejs'
+    // import Shuffle from 'shufflejs'
 </script>
 
 <script>
@@ -8,15 +8,38 @@
     // import { zoomFadeIn, zoomFadeOut } from '../animations'
 
     // Components
+    import Button from '../atoms/Button'
     import Location from '../molecules/Location'
 
-    // Define continents to show
+    // Variables
+    let filterLocations
     let continentsToShow = []
+
+    // Define continents to show
     $continents.forEach(cont => !!cont.countries && continentsToShow.push(cont))
 
-    // Create the filterable list of locations
+   // On click on continents
-    let filterLocations
+   const toggleContinents = (event, continent) => {
+       // Change the filter
+       // filterLocations.filter(continent)
+
+       // Change active classes
+       document.querySelectorAll('#continents button').forEach(button => {
+           if (!continent) {
+               button.classList.remove('disabled')
+           } else {
+               button.classList.add('disabled')
+               event.currentTarget.querySelector('button').classList.remove('disabled')
+           }
+       })
+   }
+
+
+    /*
+    ** Run code on browser only
+    */
     onMount(() => {
+        // Create the filterable list of locations
         // filterLocations = new Shuffle(document.getElementById('continents'), {
         //     itemSelector: '.location',
         //     // sizer: '#locations_list',
@@ -25,36 +48,22 @@
         // })
     })
 
-    // // 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">
+    <div class="browse__description style-description">
         <p>Browse all the cities and countries</p>
     </div>
 
     <ul class="browse__continents" id="continents">
-        <li>
+        {#if continentsToShow.length > 1}
-            <button class="button-outline" on:click|preventDefault={e => toggleContinents(e)}>All</button>
+        <li on:click={e => toggleContinents(e)}>
+            <Button type="button" className="button-outline" text="All" />
         </li>
+        {/if}
         {#each continentsToShow as continent}
-        <li>
+        <li on:click={e => toggleContinents(e, continent.id)}>
-            <button class="button-outline" on:click|preventDefault={e => toggleContinents(e, continent)}>
+            <Button type="button" className="button-outline" text={continent.name} />
-                <span>{continent.name}</span>
-            </button>
         </li>
         {/each}
     </ul>

src/routes/_layout.svelte

@@ -69,8 +69,9 @@
 	$locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
 </script>
 
+<!-- <style src="../style/style.scss" global></style> -->
 <style lang="scss" global>
-	@import "style/style.scss";
+	@import "./style/style.scss";
 </style>
 
 <slot></slot>

src/routes/choose.svelte

@@ -1,7 +1,11 @@
 <script>
+    import { onMount } from 'svelte'
     import { site, currentLocation } from '../store'
+    import * as fn from '../functions'
+    import AOS from 'aos'
 
     // Components
+    import IconArrow from '../atoms/IconArrow'
     import Globe from '../molecules/InteractiveGlobe'
     import Footer from '../molecules/Footer'
     import Locations from '../organisms/Locations'
@@ -10,6 +14,20 @@
     $: if ($currentLocation) {
         currentLocation.set()
     }
+
+
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        const titleHouses = document.getElementById('title-houses')
+        const titleWorld = document.getElementById('title-world')
+
+        // Scroll apparitions
+        if (process.browser) {
+            AOS.init()
+        }
+    })
 </script>
 
 <svelte:head>
@@ -19,13 +37,29 @@
 <section class="explore">
     <div class="wrap">
         <div class="explore__top">
-            <a href="/" class="button-control button-control--pink">
+            <a href="/" class="button-control button-control--pink dir-left">
-                <img src="/img/icons/arrow-white.svg" alt="">
+                <IconArrow direction="left" color="#fff" className="icon" />
+                <IconArrow direction="left" color="#fff" className="icon" hidden="true" />
             </a>
-            <h1 class="title-location">Houses <em>of the</em> World</h1>
+
+            <div class="title-location title-location--inline">
+                <div aria-label="Houses" data-aos="letters-translate-bottom">
+                    <div class="anim-mask">
+                        {@html fn.lettersToSpan('Houses')}
+                    </div>
                 </div>
 
-        <div class="description">
+                <em>of the</em>
+
+                <div aria-label="World" data-aos="letters-translate-bottom">
+                    <div class="anim-mask">
+                        {@html fn.lettersToSpan('World')}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="explore__description style-description">
             <p>{$site.explore_globe}</p>
         </div>
     </div>
@@ -36,28 +70,3 @@
 </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>
-        </div>
-    </div>
-</section>
-
-<div class="container">
-    <section class="section">
-        <h2 class="title is-4">Choose on globe</h2>
-		<div class="content">
-			<p>{$site.explore_globe}</p>
-			<p>[globe]</p>
-		</div>
-
-        <h2 class="title is-4">Choose from list</h2>
-        <div class="content">
-			<p>{$site.explore_list}</p>
-		</div>
-
-        <Locations />
-    </section>
-</div> -->

src/routes/index.svelte

@@ -1,11 +1,27 @@
+<script context="module">
+	import { apiEndpoints } from '../store'
+
+	// Preload data
+	export async function preload (page, session) {
+        // Load random photos
+        const limit = 5
+		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,image.*,location.*,location.country.name&sort=?&limit=${limit}`)
+        const photos = await req.json()
+		if (req.status === 200) {
+			return { photos: photos.data }
+		}
+		this.error(404, 'Not found')
+	}
+</script>
+
 <script>
-    // Svelte
+    import { onMount } from 'svelte'
-    import { fade, slide } from 'svelte/transition'
     import { site, currentLocation } from '../store'
+    import * as fn from '../functions'
 
     // Dependencies
-    // import anime from 'animejs/lib/anime.es.js'
+    import * as basicScroll from 'basicscroll'
-    // import * as basicScroll from 'basicscroll'
+    import AOS from 'aos'
 
     // Components
     import Button from '../atoms/Button'
@@ -20,6 +36,50 @@
     $: if ($currentLocation) {
         currentLocation.set()
     }
+
+    // Props and variables
+    export let photos
+    let appearing
+
+
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        // Scroll apparitions
+        if (process.browser) {
+            AOS.init()
+        }
+
+        // Parallax titles
+        const titleHouses = document.getElementById('title-houses')
+        const scrollTitleHouses = basicScroll.default.create({
+            elem: titleHouses,
+            direct: true,
+            from: '0',
+            to: window.innerHeight * 0.6,
+            props: {
+                '--translateX': {
+                    from: '-7vw',
+                    to: '-20vw'
+                }
+            }
+        }).start()
+
+        const titleWorld = document.getElementById('title-world')
+        const scrollTitleWorld = basicScroll.default.create({
+            elem: titleWorld,
+            direct: true,
+            from: document.querySelector('.explore__description').getBoundingClientRect().top,
+            to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
+            props: {
+                '--translateX': {
+                    from: '-1vw',
+                    to: '-14vw'
+                }
+            }
+        }).start()
+    })
 </script>
 
 <svelte:head>
@@ -27,75 +87,47 @@
 </svelte:head>
 
 <section class="intro">
-    <h1 class="title-massive title-parallax">Houses</h1>
+    <div class="anim-mask">
-    <!-- <MassiveTitle
+        <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top">
-        text="Houses"
+            <h1 class="title-massive" aria-label="Houses">
-        scrollFrom="0" scrollTo={window.innerHeight * 0.6}
+                {@html fn.lettersToSpan('Houses')}
-        effectFrom="-5vw" effectTo="-20vw"
+            </h1>
-    /> -->
+        </div>
+    </div>
 
     <div class="wrap">
-        <div class="description">
+        <div class="intro__description style-description">
             <p>{$site.description}</p>
 
-            <Button href="/choose" type="button" text="Explore locations">
+            <Button href="#choose" type="a" className="button" text="Explore locations">
                 <IconGlobeSmall width="22" color="#666" />
             </Button>
         </div>
     </div>
 
-    <Carousel />
+    <Carousel {photos} />
 </section>
 
 <section class="explore explore--homepage">
-    <p class="of">of</p>
+    <div class="of" aria-label="of" data-aos="letters-translate-bottom">
+        <div class="anim-mask">
+            {@html fn.lettersToSpan('of')}
+        </div>
+    </div>
 
-    <div class="description">
+    <div class="explore__description style-description" id="choose">
-        <p>{$site.explore_list}</p>
+        <p>{$site.explore_globe}</p>
     </div>
 
     <InteractiveGlobe />
 
-    <!-- <MassiveTitle
+    <div class="anim-mask anim-title">
-        text="World"
+        <h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom">
-        scrollFrom="0" scrollTo={window.innerHeight * 0.6}
+            {@html fn.lettersToSpan('World')}
-        effectFrom="-5vw" effectTo="-20vw"
+        </h1>
-    /> -->
+    </div>
-    <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>
-            <h2 class="subtitle">{$site.description}</h2>
-        </div>
-    </div>
-</section>
-
-<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>
-        </div>
-
-        <h2 class="title is-4">Choose from list</h2>
-        <div class="content">
-            <p>{$site.explore_list}</p>
-        </div>
-
-        <Locations />
-    </div>
-</div>
-
-<!-- <Footer /> -->

src/routes/location/[country]/[location].svelte

@@ -6,7 +6,7 @@
 	// Preload data
 	export async function preload (page, session) {
 		// 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 req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`)
 		const photos = await req.json()
 		if (req.status === 200) {
 			return { photos: photos.data }
@@ -16,26 +16,29 @@
 </script>
 
 <script>
+	import { onMount } from 'svelte'
+
 	// Dependencies
 	import dayjs from 'dayjs'
 	import advancedFormat from 'dayjs/plugin/advancedFormat'
 	import relativeTime from 'dayjs/plugin/relativeTime'
+	dayjs.extend(advancedFormat)
+	dayjs.extend(relativeTime)
 
 	// Components
 	import IconGlobe from '../../../atoms/iconGlobe'
 	import IconGlobeSmall from '../../../atoms/iconGlobeSmall'
-	import Cursor from '../../../atoms/Cursor'
+	import LinkChange from '../../../atoms/LinkChange'
+	import ToggleLayout from '../../../atoms/ToggleLayout'
 	import Photo from '../../../molecules/Photo'
 	import Switcher from '../../../molecules/Switcher'
 	import Footer from '../../../molecules/Footer'
 
-	// Props
+	// Props and variables
 	export let photos
-
-	// Setup
 	const { page } = stores()
-	dayjs.extend(advancedFormat)
+	let layoutSetting
-	dayjs.extend(relativeTime)
+	let pagesTotal = 3
 
 	// Update current location
 	const location = $locations.find(loc => loc.slug === $page.params.location)
@@ -46,8 +49,18 @@
 
 	// Define dates
 	const dateUpdatedFull = photos.length ? dayjs(photos[0].modified_on).format('MMM Do, YYYY') : ''
+	const dateUpdatedDatetime = photos.length ? dayjs(photos[0].modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
 	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 : ''
+
+
+	/*
+	** Run code on browser only
+	*/
+	onMount(() => {
+		// Get layout setting from storage
+		layoutSetting = localStorage.getItem('photosLayout')
+	})
 </script>
 
 <svelte:head>
@@ -67,7 +80,7 @@
 				<span>Change</span>
 			</span>
 			<svg>
-				<circle cx="50%" cy="50%" r="43%"></circle>
+				<circle cx="50%" cy="50%" r="43%" />
 			</svg>
 		</a>
 	</div>
@@ -77,101 +90,56 @@
 			<div class="wrapper">
 				<p>{$site.description}</p>
 				<p>
-					Houses Of
+					Houses on:eventname
-					<a href="/choose" class="link-change">
+					<LinkChange href="/choose" text={location.name}>
-						{location.name}
-						<span class="icon">
 						<IconGlobeSmall width="14" color="#999" />
-						</span>
+					</LinkChange>
-					</a>
 					{location.description}
 				</p>
 				<p class="updated style-caps">
 					<strong>Updated</strong>
-					<time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time>
+					<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
 				</p>
 
-				<div class="toggle">
+				<ToggleLayout />
-					<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">
+<section class="photos photos--{layoutSetting || 'list'}">
+	<div class="photos__side--wrap wrap">
 		<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>
+				<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
 			</p>
-		</div>
 		</aside>
+	</div>
 
-	<Cursor type="zoom" />
+	<div class="photos__view wrap">
-
-	<div class="wrap">
 		{#each photos as photo, index}
 		<Photo {photo} index={index + 1} />
 		{/each}
 	</div>
 
+	{#if photos.length}
 	<section class="pagination">
-		<button>
 		<div class="pagination__page">
-				<p><span>page</span> 1/3</p>
+			<div class="pagination__page--info">page</div>
+			<div class="pagination__page--numbers">
+				<div class="scroll">
+					<span>3</span>
+					<span>2</span>
+					<span>1</span>
+				</div>
+			</div>
+			/{pagesTotal}
 		</div>
 		<p class="style-caps pagination__caption">See more photos</p>
-		</button>
 	</section>
-
+	{/if}
-	<Footer />
 </section>
 
-<!-- <div class="section container">
+<Footer />
-	<div class="nav content">
-		<Switcher />
-	</div>
-
-	<div class="content">
-		<h1 class="title is-2">{locationFull}</h1>
-		{#if location && location.description}
-		<p>
-			{$site.description}<br>
-			Houses Of <a href="/choose">{location.name}</a> {location.description}
-		</p>
-		{/if}
-		{#if photos.length}
-		<p><strong>Updated</strong> <time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time></p>
-		{/if}
-	</div>
-
-	{#if photos.length}
-	<div class="columns is-multiline">
-		{#each photos as photo, index}
-		<div class="column is-one-third">
-			<Photo {photo} index={index + 1} />
-		</div>
-		{/each}
-	</div>
-	{:else}
-	<div class="message is-danger">
-		<div class="message-body">
-			<p>No photos for {locationFull}</p>
-		</div>
-	</div>
-	{/if}
-</div> -->

src/routes/viewer/[country]/[location]/[photo].svelte

@@ -10,7 +10,7 @@
 	export async function preload (page, session) {
 		// 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 req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.*,image.data,location.*,location.country.*,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
 			const photos = await req.json()
 			return {
 				photos: photos.data
@@ -24,23 +24,36 @@
 </script>
 
 <script>
-	const { page, session, preloading } = stores()
+	import { onMount } from 'svelte'
+	import * as fn from '../../../../functions'
 
 	// Dependencies
     import dayjs from 'dayjs'
 	import advancedFormat from 'dayjs/plugin/advancedFormat'
 	dayjs.extend(advancedFormat)
 
+	// Components
+	import IconGlobe from '../../../../atoms/IconGlobe'
+	import IconCross from '../../../../atoms/IconCross'
+	import Carousel from '../../../../organisms/Carousel'
+
 	// Props and variables
+	const { page } = stores()
 	export let photos
 	let currentIndex
 	let indexFormated
 	let viewerPhotos
+	let windowWidth
+	let changeWindowWidth
 
 	// Define current location
 	const location = $locations.find(loc => loc.slug === $page.params.location)
+	const locationFull = `${location.name}, ${location.country.name}`
 	$currentLocation == undefined && currentLocation.set({ location, photos })
 
+	// Define path
+	const path = `/viewer/${location.country.slug}/${location.slug}/`
+
 	// Set current photo, index and siblings
 	const setCurrentPhotos = () => {
 		// Define index and prev/next photos
@@ -62,18 +75,6 @@
 		}
 	})
 
-	// Define values
-	const locationFull = `${location.name}, ${location.country.name}`
-	const path = `/viewer/${location.country.slug}/${location.slug}/`
-
-	// Get thumbnail
-	const getThumb = (photo, size) => {
-		if (photo) {
-			const thumbnail = photo.image.data.thumbnails.find(thumb => thumb.url.includes(`key=${size}`))
-			return thumbnail.url
-		}
-	}
-
 	// Keyboard navigation
 	const keyboardNav = event => {
 		const keyCode = event.keyCode
@@ -85,13 +86,48 @@
 		// Close
 		else if ([27,67].includes(keyCode)) document.getElementById('photo_close').click()
 	}
+
+
+	/*
+	** Run code on browser only
+	*/
+	onMount(() => {
+		changeWindowWidth = () => {
+			windowWidth = window.innerWidth
+		}
+		changeWindowWidth()
+	})
 </script>
 
-<!-- <pre>{JSON.stringify(viewerPhotos, null, 2)}</pre> -->
+<svelte:head>
+	<title>Houses Of - photoName photoCountryName</title>
+</svelte:head>
 
-<svelte:window on:keydown={keyboardNav} />
+<svelte:window on:keydown={keyboardNav} on:resize={changeWindowWidth} />
 
-<div class="container">
+<section class="viewer">
+	<div class="viewer__top">
+		<p class="tip">Tap for fullscreen</p>
+
+		<div class="buttons">
+			<a href="/choose" class="button-control button-control--dashed">
+				<IconGlobe color="#fff" width="18" />
+				<svg>
+					<circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
+				</svg>
+			</a>
+			<a href="/location/{location.country.slug}/{location.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
+				<IconCross color="#fff" width="18" className="icon" />
+				<IconCross color="#fff" width="18" className="icon" hidden="true" />
+			</a>
+		</div>
+	</div>
+
+	<Carousel viewer={true} {photos} />
+</section>
+
+
+<!-- <div class="container">
 	<div class="nav content">
 		<a href="/choose" class="button is-info" id="photo_close">Change location</a>
 		<a href="/location/{location.country.slug}/{location.slug}" class="button is-dark" id="photo_close">Close</a>
@@ -140,4 +176,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div> -->

src/style/_animations.scss

@@ -1,6 +1,54 @@
 /* ==========================================================================
-   GLOBAL
+   PARALLAX EFFECTS
 ========================================================================== */
+// Parallax title: Translate X
+.title-parallax {
+    transform: translate3d(var(--translateX), 0, 0);
+    will-change: transform;
+}
+
+
+
+/* ==========================================================================
+   REVEAL ANIMATIONS
+========================================================================== */
+.anim-mask {
+    display: block;
+    overflow: hidden;
+}
+
+// Translate each letter from top/bottom
+[data-aos="letters-translate-top"],
+[data-aos="letters-translate-bottom"] {
+    white-space: nowrap;
+
+    span {
+        display: inline-block;
+        transition: all 1000ms $ease-quart;
+
+        @for $i from 1 to 8 {
+            &:nth-child(#{$i}) {
+                transition-delay: $i * 40ms;
+            }
+        }
+    }
+
+    &.aos-animate {
+        span {
+            transform: translate3d(0, 0, 0);
+        }
+    }
+}
+[data-aos="letters-translate-top"] {
+    span {
+        transform: translate3d(0, -100%, 0);
+    }
+}
+[data-aos="letters-translate-bottom"] {
+    span {
+        transform: translate3d(0, 100%, 0);
+    }
+}
 
 
 
@@ -33,19 +81,22 @@
     animation-play-state: paused;
 }
 
+// Layout: List
+@keyframes layoutListOdd {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(4px); }
+}
+@keyframes layoutListEven {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-4px); }
+}
 
-
+// Layout: Grid
-
+@keyframes layoutGridOdd {
-
+    0% { transform: translateY(0); }
-/* ==========================================================================
+    100% { transform: translateY(3px); }
-   HEADER
+}
-========================================================================== */
+@keyframes layoutGridEven {
-
+    0% { transform: translateY(0); }
-
+    100% { transform: translateY(-3px); }
-
+}
-
-
-
-/* ==========================================================================
-   MAIN
-========================================================================== */

src/style/_base.scss

@@ -1,6 +1,11 @@
 html {
     font: #{$base-font-size} $font-sans;
     color: $color-text;
+    scroll-behavior: smooth;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+		scroll-behavior: auto;
+    }
 }
 body {
     @include font-smooth;
@@ -50,30 +55,42 @@ button {
 
 // Title: Massive
 .title-massive {
-    font-size: 50.25vw;
-    letter-spacing: -2vw;
     font-family: $font-serif-extra;
-    color: $color-secondary;
+    font-size: pxVW(800);
     line-height: 1;
+    color: $color-secondary;
+    letter-spacing: -2vw;
+    pointer-events: none;
+    user-select: none;
+
+    @include breakpoint (xxl) {
+        font-size: rem(900px);
+    }
 }
 
 // Title: Locations
 .title-location {
-    font-size: rem(68px);
     font-family: $font-serif;
-    color: $color-secondary;
+    font-size: rem(68px);
     line-height: 1;
+    color: $color-secondary;
     text-align: center;
 
     @include breakpoint (sm) {
+        font-size: rem(64px);
+    }
+    @include breakpoint (lg) {
+        font-size: rem(72px);
+    }
+    @include breakpoint (xl) {
         font-size: rem(96px);
     }
 
     em {
         display: block;
         font-size: rem(18px);
-        text-transform: uppercase;
         color: $color-lightpurple;
+        text-transform: uppercase;
         letter-spacing: 1px;
 
         @include breakpoint (sm) {
@@ -101,26 +118,30 @@ button {
             }
         }
     }
+
+    // Inline version
+    &--inline {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+
+        em {
+            margin: 0 16px 0 24px;
+        }
+    }
 }
 
-// Parallax title: Translate X
-.title-parallax {
-    transform: translate3d(var(--translateX), 0, 0);
-    will-change: transform;
-    pointer-events: none;
-    user-select: none;
-}
 
 
 /* Text Styles
 ========================================================================== */
-.location {
+.style-location {
     text-align: center;
 
     .street {
+        margin-bottom: 8px;
         font-family: $font-serif;
         font-size: rem(24px);
-        margin-bottom: 8px;
 
         @include breakpoint (sm) {
             font-size: rem(28px);
@@ -130,20 +151,20 @@ button {
 
 .style-caps {
     font-size: rem(14px);
+    color: $color-tertiary;
     text-transform: uppercase;
     letter-spacing: 1px;
-    color: $color-tertiary;
 }
 
-.description {
+.style-description {
     font-family: $font-sans-light;
     font-size: rem(18px);
     line-height: 1.55;
     text-align: center;
 
     @include breakpoint (sm) {
+        max-width: 572px;
         font-size: rem(28px);
         line-height: 1.64;
-        max-width: 572px;
     }
 }

src/style/_variables.scss

@@ -1,6 +1,7 @@
 // Colors
 $color-primary: #3C0576;
 $color-secondary: #FF6C89;
+$color-secondary-bright: #FF0536;
 $color-text: #333;
 $color-tertiary: #FFE0C5;
 $color-lightpurple: #8B50B2;
@@ -37,6 +38,8 @@ $font-serif-extra: "M-Extralight", #{$replacement-serif};
 
 /* Sizes, margins and spacing
 ====================================================================== */
+$base-width: 1600;
+
 // Blocks
 
 
@@ -62,3 +65,4 @@ $screen-sm: 768px;
 $screen-md: 992px;
 $screen-lg: 1200px;
 $screen-xl: 1440px;
+$screen-xxl: 1600px;

src/style/atoms/_button-control.scss

@@ -0,0 +1,245 @@
+// Button: Control
+.button-control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+    padding-top: 2px;
+    pointer-events: auto;
+    border-radius: 50vh;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 350ms $ease-quart;
+
+    @include breakpoint (sm) {
+        width: 56px;
+        height: 56px;
+    }
+
+    // Icon
+    .icon {
+        display: block;
+        width: 13px;
+        height: auto;
+        transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
+        overflow: hidden;
+
+        @include breakpoint (sm) {
+            width: 20px;
+        }
+    }
+    .icon[aria-hidden] {
+        opacity: 0;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+    }
+
+
+    /*
+    ** Variants
+    */
+    &--white {
+        background-color: #fff;
+
+        &:hover {
+            background-color: $color-secondary;
+        }
+    }
+    &--pink {
+        background-color: rgba($color-secondary, 0.4);
+
+        &:hover {
+            background-color: rgba($color-secondary, 0.75);
+        }
+    }
+    &--gray {
+        background-color: $color-gray;
+
+        &:hover {
+            background-color: $color-text;
+        }
+    }
+
+
+    /*
+    ** Directions
+    */
+    // To left
+    &.dir-left {
+        .icon[aria-hidden] {
+            transform: translate3d(100%, -50%, 0);
+        }
+
+        &:hover {
+            .icon:not([aria-hidden]) {
+                opacity: 0;
+                transform: translate3d(-100%, 0, 0);
+            }
+            .icon[aria-hidden] {
+                opacity: 1;
+                transform: translate3d(-50%, -50%, 0);
+            }
+        }
+    }
+    // To right
+    &.dir-right {
+        .icon[aria-hidden] {
+            transform: translate3d(-150%, -50%, 0);
+        }
+
+        &:hover {
+            .icon:not([aria-hidden]) {
+                opacity: 0;
+                transform: translate3d(100%, 0, 0);
+            }
+            .icon[aria-hidden] {
+                opacity: 1;
+                transform: translate3d(-50%, -50%, 0);
+            }
+        }
+    }
+    // From top
+    &.dir-top {
+        .icon[aria-hidden] {
+            left: auto;
+            transform: translate3d(0, -150%, 0);
+        }
+
+        &:hover {
+            .icon:not([aria-hidden]) {
+                opacity: 0;
+                transform: translate3d(0, 100%, 0);
+            }
+            .icon[aria-hidden] {
+                opacity: 1;
+                transform: translate3d(0, -50%, 0);
+            }
+        }
+    }
+    // From bottom
+    &.dir-bottom {
+        .icon[aria-hidden] {
+            left: auto;
+            transform: translate3d(0, 150%, 0);
+        }
+
+        &:hover {
+            .icon:not([aria-hidden]) {
+                opacity: 0;
+                transform: translate3d(0, -100%, 0);
+            }
+            .icon[aria-hidden] {
+                opacity: 1;
+                transform: translate3d(0, -50%, 0);
+            }
+        }
+    }
+
+
+    /*
+    ** Dashed style
+    */
+    &--dashed {
+        position: relative;
+        overflow: visible;
+        background-color: rgba($color-lightpurple, 0.5);
+        transition: background-color 150ms $ease-inout;
+
+        // Icon
+        svg[fill] {
+            height: auto;
+        }
+
+        // Dashed circle
+        svg:not([fill]) {
+            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, 0.35);
+            fill: none;
+            transform-origin: 50% 50%;
+            animation: rotateDashes 5s linear infinite;
+            animation-play-state: paused;
+            animation-delay: 50ms;
+            transition: stroke 150ms $ease-inout;
+        }
+
+        // Hover
+        &:hover {
+            background-color: rgba($color-lightpurple, 0.65);
+
+            * {
+                animation-play-state: running;
+            }
+        }
+    }
+
+
+    /*
+    ** Big version
+    */
+    &--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, 0.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;
+                }
+            }
+        }
+    }
+}

src/style/atoms/_button-outline.scss

@@ -0,0 +1,66 @@
+// Button: Outline
+.button-outline {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: 32px;
+    padding: 1px 16px 0;
+    font-family: $font-sans-sb;
+    font-size: rem(14px);
+    color: #fff;
+    background: none;
+    border: 2px solid #fff;
+    border-radius: 50vh;
+    overflow: hidden;
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+    transition: all 275ms $ease-cubic;
+
+    @include breakpoint (sm) {
+        height: 40px;
+        font-size: rem(18px);
+    }
+
+    span {
+        display: block;
+    }
+
+    // Second text
+    &:after {
+        opacity: 0;
+        content: attr(data-text);
+        position: absolute;
+        display: block;
+        text-align: center;
+        top: 50%;
+        left: 0;
+        right: 0;
+        transform: translate3d(0, -120%, 0);
+    }
+
+    span, &:after {
+        transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
+    }
+
+    // Disabled
+    &.disabled {
+        color: $color-lightpurple;
+        border-color: $color-lightpurple;
+    }
+
+    // Hover
+    &:hover {
+        color: $color-tertiary;
+        border-color: $color-tertiary;
+
+        span {
+            opacity: 0;
+            transform: translate3d(0, 100%, 0);
+        }
+        &:after {
+            opacity: 1;
+            transform: translate3d(0, -50%, 0);
+        }
+    }
+}

src/style/atoms/_button.scss

@@ -4,6 +4,7 @@
     display: inline-flex;
     align-items: center;
     height: 40px;
+    overflow: hidden;
     padding: 0 16px;
     background: #fff;
     font-family: $font-sans-sb;
@@ -11,11 +12,10 @@
     color: $color-gray;
     border-radius: 50vh;
     text-decoration: none;
-    overflow: hidden;
     border: none;
     outline: none;
     cursor: pointer;
-    transition: background-color 250ms, color 350ms;
+    transition: background-color 250ms $ease-cubic, color 350ms $ease-cubic;
 
     @include breakpoint (sm) {
         height: 48px;
@@ -39,37 +39,35 @@
         }
     }
     svg {
-        transition: all 350ms;
+        transition: all 350ms $ease-cubic;
+
+        .anim {
+            animation-delay: 100ms;
+        }
     }
 
     // Text
-    &:before {
+    span {
+        display: block;
+    }
+    &:after {
+        opacity: 0;
         content: attr(data-text);
         position: absolute;
+        display: block;
         top: 50%;
         left: calc(50% + 19px);
         width: 100%;
-        transform: translate3d(-50%, -50%, 0);
+        transform: translate3d(-50%, -120%, 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; }
     }
+    span, &:after {
+        transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
     }
 
     // Hover
     &:hover {
-        background-color: $color-primary;
         color: #fff;
+        background-color: $color-secondary;
 
         svg {
             fill: #fff !important;
@@ -77,260 +75,13 @@
         .anim {
             animation-play-state: running;
         }
-        &:before {
+        span {
             opacity: 0;
-            transform: translate3d(-50%, 75%, 0);
+            transform: translate3d(0, 100%, 0);
         }
-        span {
+        &:after {
             opacity: 1;
-            transform: translate3d(0, 0, 0);
+            transform: translate3d(-50%, -50%, 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;
-            }
         }
     }
 }

src/style/atoms/_cursor.scss

@@ -1,18 +0,0 @@
-// 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);
-    }
-}

src/style/atoms/_link.scss

@@ -6,20 +6,21 @@
     padding: 0 8px;
     color: $color-secondary;
     text-decoration: none;
-    transition: color 200ms ease;
+    transition: color 200ms $ease-cubic;
 
     // Line
     &:after {
         content: "";
         position: absolute;
         z-index: -1;
-        background-color: rgba($color-secondary, .22);
+        background-color: rgba($color-secondary, 0.22);
         height: 14px;
         width: 100%;
         bottom: 5px;
         left: 0;
         border-radius: 50vh;
-        transition: all 200ms ease;
+        transition: all 200ms $ease-cubic;
+        transition-delay: 50ms;
     }
 
     // Icon
@@ -46,7 +47,7 @@
         color: $color-text;
 
         &:after {
-            background-color: rgba($color-secondary, .4);
+            background-color: rgba($color-secondary, 0.4);
         }
         svg * {
             animation-play-state: running;

src/style/atoms/_switcher.scss

@@ -29,6 +29,7 @@
                 margin-right: 0;
             }
         }
+
         .bottom {
             display: block;
             color: $color-secondary;
@@ -46,26 +47,17 @@
         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 version (smaller)
+    */
     &--side {
         .switcher {
             &__text {
                 font-size: rem(22px);
+                pointer-events: none;
             }
             &__icon {
                 width: 40px;
@@ -75,16 +67,20 @@
                 circle {
                     stroke: #F4EDFB;
                 }
+                img, svg[fill] {
+                    transform: rotate(90deg);
+                }
                 &:hover {
                     background-color: darken(#F4EDFB, 7);
+
+                    circle {
+                        stroke: darken(#F4EDFB, 7);
+                    }
                 }
             }
         }
         .top {
             color: $color-primary;
         }
-        img, svg {
-            transform: rotate(90deg);
-        }
     }
 }

src/style/atoms/_toggle.scss

@@ -0,0 +1,90 @@
+// Toggle Button
+.toggle {
+    position: relative;
+    margin-top: 58px;
+    background-color: rgba($color-secondary, 0.25);
+    display: inline-flex;
+    border-radius: 50vh;
+
+    button, .pill {
+        position: relative;
+        z-index: 2;
+        color: $color-secondary;
+        border-radius: 50vh;
+        padding: 12px 24px;
+        font-family: $font-sans-sb;
+        font-size: rem(18px);
+        line-height: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        outline: none;
+        transition: color 150ms $ease-inout;
+    }
+    button {
+        span {
+            margin-left: 16px;
+        }
+        svg {
+            fill: $color-secondary;
+            * {
+                transition: fill 150ms $ease-inout;
+                transition-delay: 0ms;
+            }
+        }
+
+        // Active button
+        &.active {
+            color: #fff;
+
+            svg * {
+                fill: #C78FEC;
+            }
+        }
+
+        // Hover
+        &:hover:not(.active) {
+            color: $color-secondary-bright;
+
+            svg {
+                fill: $color-secondary-bright;
+            }
+        }
+        // List icon
+        &[data-layout="list"]:hover {
+            rect:nth-of-type(even) {
+                animation: layoutListEven 400ms $ease-cubic infinite alternate forwards;
+            }
+            rect:nth-of-type(odd) {
+                animation: layoutListOdd 400ms $ease-cubic infinite alternate forwards;
+            }
+        }
+        // Grid icon
+        &[data-layout="grid"]:hover {
+            rect:nth-of-type(even) {
+                animation: layoutGridEven 400ms $ease-cubic infinite alternate forwards;
+            }
+            rect:nth-of-type(odd) {
+                animation: layoutGridOdd 400ms $ease-cubic infinite alternate forwards;
+            }
+        }
+    }
+
+    // Pill (active)
+    .pill {
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: auto;
+        height: 100%;
+        background-color: $color-primary;
+        transition: all 500ms $ease-quart;
+
+        span {
+            content: attr(data-text);
+            display: block;
+            margin: 0;
+        }
+    }
+}

src/style/molecules/_footer.scss

@@ -31,7 +31,7 @@
     }
 
     // Right part
-    &__right{
+    &__right {
         font-size: 14px;
 
         @include breakpoint (sm) {
@@ -67,7 +67,7 @@
             justify-content: center;
 
             span {
-                color: rgba(#fff, .4)
+                color: rgba(#fff, 0.4)
             }
 
             img {

src/style/molecules/_pagination.scss

@@ -1,44 +1,77 @@
 // Pagination
 .pagination {
+    position: relative;
+    padding: 64px 0 72px;
     background-color: $color-tertiary;
     text-align: center;
-    padding: 64px 0 72px;
-    position: relative;
 
     @include breakpoint (sm) {
-        padding: 16vw 0 7.5vw;
+        padding: pxVW(176) 0 pxVW(120);
-        margin-top: -64px;
     }
     @include breakpoint (xl) {
-        padding-top: 200px;
+        padding: 176px 0 120px;
     }
 
     // Pages
     &__page {
-        p {
-            font-family: $font-serif-extra;
-            color: rgba($color-text, .15);
         position: relative;
-            line-height: 1;
+        display: inline-block;
+        margin: 0 auto;
+        padding-left: 72px;
+        font-family: $font-serif-extra;
         font-size: rem(72px);
+        color: rgba($color-text, 0.15);
+        line-height: 1;
+        cursor: pointer;
+        transition: color 250ms $ease-cubic;
 
         @include breakpoint (sm) {
             font-size: rem(160px);
         }
 
-            span {
+        // Numbers
-                font-family: $font-serif;
+        &--numbers {
-                color: #FF0536;
+            position: absolute;
+            top: 0;
+            left: -32px;
+            height: 136px;
+            overflow: hidden;
+
+            .scroll {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                text-align: right;
+                line-height: 0.85;
+                transform: translate3d(0, -190%, 0);
+                transition: transform 250ms $ease-cubic;
+            }
+        }
+
+        // Info
+        &--info {
             position: absolute;
-                font-size: 18px;
             top: 50%;
             left: 50%;
-                transform: translate(-50%, -65%);
+            transform: translate(-50%, -72%);
+            font-family: $font-serif;
+            font-size: 18px;
+            color: $color-secondary-bright;
 
             @include breakpoint (sm) {
                 font-size: rem(40px);
             }
         }
+
+        // Hover
+        &:hover {
+            color: rgba($color-text, 0.25);
+
+            .pagination__page--numbers {
+                .scroll {
+                    transform: translate3d(0, -135%, 0);
+                }
+            }
         }
     }
 

src/style/molecules/_photo.scss

@@ -1,13 +1,14 @@
 .photo {
 
-    // Location
+    /*
+    ** Location
+    */
     &__location {
         margin-bottom: 32px;
 
         @include breakpoint (sm) {
             margin-bottom: 56px;
         }
-
         @include breakpoint (xs) {
             padding: 0;
         }
@@ -26,7 +27,10 @@
         }
     }
 
-    // Image container
+
+    /*
+    ** Image
+    */
     &__image {
         position: relative;
         display: flex;
@@ -40,17 +44,18 @@
         .align {
             position: relative;
             max-width: 1180px;
-            padding: 0;
             margin: 0;
+            padding: 0;
         }
 
         // Image container
         &--img {
+            overflow: hidden;
             position: relative;
             z-index: 2;
-            overflow: hidden;
             border-radius: 0;
-            box-shadow: 0 8px 18px rgba(#715E4E, .2);
+            box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
+            user-select: none;
 
             @include breakpoint (sm) {
                 border-radius: 8px;
@@ -62,14 +67,6 @@
                 height: auto;
             }
 
-            // Cursor
-            .cursor {
-                position: absolute;
-                z-index: 4;
-                top: 0;
-                left: 0;
-            }
-
             // Overlay
             &:after {
                 content: "";
@@ -84,7 +81,7 @@
                 background-color: $color-primary;
                 display: block;
                 z-index: 3;
-                transition: all 200ms ease-in-out;
+                transition: all 150ms ease-in-out;
             }
         }
 
@@ -94,7 +91,7 @@
 
             // Hover
             &:hover {
-                cursor: none;
+                cursor: url(#{$dir-img}/icons/zoom.svg) 0 0, pointer;
 
                 .photo__image--img:after {
                     opacity: 0.6;
@@ -105,10 +102,10 @@
         // Date (on the side)
         &--date {
             display: block;
-            color: $color-lightgray;
-            font-size: rem(14px);
             margin-top: 16px;
-            padding: 0 8vw;
+            padding: 0 pxVW(128);
+            font-size: rem(14px);
+            color: $color-lightgray;
 
             @include breakpoint (sm) {
                 position: absolute;
@@ -126,20 +123,23 @@
         // 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;
+            font-family: $font-serif-extra;
+            color: rgba($color-tertiary, 0.5);
+            font-size: rem(124px);
+            pointer-events: none;
+            user-select: none;
 
             @include breakpoint (sm) {
-                font-size: 18.75vw;
+                font-size: pxVW(300);
                 left: 92%;
                 top: 50%;
                 z-index: 1;
                 transform: translate(-50%, -50%);
-
+            }
+            @include breakpoint (xxl) {
+                font-size: rem(300px);
             }
         }
     }

src/style/organisms/_carousel.scss

@@ -16,6 +16,14 @@
     .gallery {
         position: relative;
         z-index: 2;
+        margin: 0 auto;
+
+        @include breakpoint (sm) {
+            max-width: 85%;
+        }
+        @include breakpoint (xl) {
+            max-width: 100%;
+        }
 
         // Images
         &__images {
@@ -26,9 +34,10 @@
             // Photo
             &--photo {
                 position: absolute;
-                background-color: $color-secondary;
+                background-color: $color-primary;
                 overflow: hidden;
-                box-shadow: 0 15px 60px rgba(#000, .3);
+                box-shadow: 0 16px 56px rgba(#2E025C, 0.7);
+                transition: transform 600ms $ease-quart;
 
                 @include breakpoint (sm) {
                     border-radius: 8px;
@@ -39,30 +48,66 @@
                     height: auto;
                     width: 100%;
                     opacity: 0.55;
+                    transition: opacity 600ms $ease-quart;
+                }
+
+                // Temp hiding
+                &:nth-of-type(4), &:nth-of-type(5) {
+                    display: none;
                 }
             }
 
-            // Specific
+            // Active photo
-            .front {
+            .active {
                 z-index: 10;
+                top: 50%;
+                left: 50%;
+                width: 100%;
+                transform: translate3d(-50%, -50%, 0);
 
                 img {
                     opacity: 1;
                 }
             }
+
+            // Variables
+            $hoverAngle: 1.25deg;
+            $hoverDistance: 7%;
+
+            // Previous photo
             .prev {
                 @include breakpoint (sm) {
                     top: 50%;
-                    transform: translate(-5%, -50%) rotate(-1deg);
+                    transform: translate3d(-6%, -50%, 0) rotate(-1deg);
                     width: 85%;
                 }
+
+                // Hover
+                &.hover {
+                    transform: translate3d(-$hoverDistance, -50%, 0) rotate(-$hoverAngle);
+
+                    img {
+                        opacity: 0.8;
                     }
+                }
+            }
+
+            // Next photo
             .next {
                 @include breakpoint (sm) {
                     top: 50%;
-                    transform: translate(5%, -50%) rotate(1deg);
-                    width: 85%;
                     right: 0;
+                    transform: translate3d(6%, -50%, 0) rotate(1deg);
+                    width: 85%;
+                }
+
+                // Hover
+                &.hover {
+                    transform: translate3d($hoverDistance, -50%, 0) rotate($hoverAngle);
+
+                    img {
+                        opacity: 0.8;
+                    }
                 }
             }
         }
@@ -82,16 +127,16 @@
             width: 100%;
             z-index: 11;
 
-            .prev {
+            .dir-left {
                 transform: translateX(-50%);
             }
-            .next {
+            .dir-right {
                 transform: translateX(50%);
             }
         }
 
         a {
-            box-shadow: 0 2px 21px rgba(#000, .15);
+            box-shadow: 0 2px 21px rgba(#000, 0.15);
         }
     }
 
@@ -107,14 +152,15 @@
                 color: #fff;
 
                 @include breakpoint (sm) {
-                    margin-top: 5vw;
+                    margin-top: pxVW(80);
                 }
                 @include breakpoint (xl) {
                     margin-top: 72px;
                 }
             }
             .state {
-                color: rgba($color-tertiary, .5);
+                margin-top: 4px;
+                color: rgba($color-tertiary, 0.5);
             }
         }
     }
@@ -131,16 +177,24 @@
 
             li {
                 display: block;
-                margin: 0 3px;
+                padding: 0 4px;
+                cursor: pointer;
 
-                &.active a {
+                &.active button {
                     background-color: $color-secondary;
                 }
+
+                &:hover {
+                    button {
+                        background-color: lighten($color-lightpurple, 10);
                     }
-            a {
+                }
+            }
+            button {
                 display: block;
                 width: 8px;
                 height: 8px;
+                padding: 0;
                 background-color: $color-lightpurple;
                 border-radius: 50vh;
                 text-decoration: none;
@@ -149,7 +203,10 @@
     }
 }
 
-// Zoomer
+
+/*
+** Zoomer
+*/
 .zoomer {
     opacity: 0;
     pointer-events: none;

src/style/organisms/_locations.scss

@@ -8,7 +8,9 @@
     }
 
     // Description
-    .description {
+    &__description {
+        margin-left: auto;
+        margin-right: auto;
         margin-bottom: 32px;
 
         @include breakpoint (sm) {
@@ -41,9 +43,12 @@
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             grid-column-gap: 120px;
-            grid-row-gap: 7.5vw;
+            grid-row-gap: pxVW(120);
             justify-content: center;
-            margin-bottom: 14.5vw;
+            margin-bottom: pxVW(232);
+        }
+        @include breakpoint (xl) {
+            margin-bottom: 232px;
         }
     }
 
@@ -101,7 +106,7 @@
             display: block;
             width: 216px;
             height: 216px;
-            background: rgba($color-lightpurple, .3);
+            background: rgba($color-lightpurple, 0.3);
             border-radius: 50vh;
             transition: all 85ms ease-in-out;
         }

src/style/organisms/_photos.scss

@@ -1,35 +1,44 @@
 .photos {
     position: relative;
     margin-top: -22px;
-    padding-bottom: 102px;
     background-color: #fff;
 
     @include breakpoint (sm) {
         margin-top: -128px;
+        padding-top: 88px;
+    }
+    @include breakpoint (xl) {
         padding-top: 72px;
-        padding-bottom: 0;
     }
 
     // Sidebar
     &__side {
+        display: none;
+
+        @include breakpoint (md) {
+            display: flex;
             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%;
         }
 
+        // Container
+        &--wrap {
+            @include breakpoint (md) {
+                position: sticky;
+                z-index: 10;
+                top: 16px;
+                height: 100%;
+            }
+            @include breakpoint (xl) {
+                top: 32px;
+            }
+        }
+
         p {
             font-size: rem(12px);
             color: $color-lightgray;
@@ -43,12 +52,11 @@
         }
     }
 
-
     // Each photo
     .photo {
         position: relative;
         z-index: 4;
-        margin-bottom: 102px;
+        margin-bottom: 104px;
 
         @include breakpoint (sm) {
             margin-bottom: 120px;
@@ -60,13 +68,19 @@
         }
     }
 
-    // List view
+
+    /*
+    ** List view
+    */
     &--list {
-        & > .wrap {
+        .photos__view {
+            max-width: 100%;
+            margin: 0;
             padding: 0;
         }
 
         // Photo
+        @include breakpoint (sm) {
             .photo {
                 // Even photos
                 &:nth-child(even) {
@@ -93,9 +107,23 @@
             }
         }
 
-    // Grid view
+        // Pagination
+        .pagination {
+            margin-top: 104px;
+
+            @include breakpoint (sm) {
+                margin-top: -64px;
+            }
+        }
+    }
+
+
+    /*
+    ** Grid view
+    */
     &--grid {
-        & > .wrap {
+        .photos__view {
+            @include breakpoint (md) {
                 display: grid;
                 grid-template-columns: repeat(2, 1fr);
                 grid-column-gap: 48px;
@@ -103,17 +131,30 @@
                 padding-left: 192px;
                 padding-right: 64px;
             }
+            @include breakpoint (xxl) {
+                padding-left: 192px;
+            }
+            @include breakpoint (1648px) {
+                padding-right: 0;
+            }
+        }
 
         // Photo
         .photo {
             display: flex;
             flex-direction: column-reverse;
+            margin-bottom: 72px;
+
+            @include breakpoint (md) {
                 margin-bottom: 0;
+            }
 
             // Every second (on column 2)
             &:nth-child(2n+2) {
+                @include breakpoint (md) {
                     transform: translateY(-64px);
                 }
+            }
 
             .wrap, .wrapper {
                 padding: 0;
@@ -152,5 +193,10 @@
                 }
             }
         }
+
+        // Pagination
+        .pagination {
+            margin-top: 64px;
+        }
     }
 }

src/style/pages/_explore.scss

@@ -2,15 +2,6 @@
     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;
@@ -37,20 +28,8 @@
         }
     }
 
-    // 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 {
+    &__description {
         max-width: 312px;
         margin: 0 auto;
         margin-bottom: 72px;
@@ -61,10 +40,4 @@
             margin-bottom: 120px;
         }
     }
-
-    // Massive title
-    .title-massive {
-        margin-top: -22vw;
-        margin-left: -60px;
-    }
 }

src/style/pages/_homepage.scss

@@ -1,16 +1,16 @@
 // Introduction
 .intro {
     background-color: $color-tertiary;
-    overflow-x: hidden;
 
     // Title
-    .title-massive {
+    .title-parallax {
-        margin-top: -10vw;
+        margin-top: -#{pxVW(160)};
-        margin-left: -10vw;
+        margin-left: -#{pxVW(160)};
     }
 
+
     // Description
-    .description {
+    &__description {
         margin-bottom: 72px;
 
         @include breakpoint (sm) {
@@ -26,6 +26,7 @@
         }
     }
 
+
     // Carousel
     .carousel {
         position: relative;
@@ -39,8 +40,68 @@
             right: 0;
             display: block;
             width: 100%;
-            height: 48vw;
+            height: pxVW(768);
             background-color: $color-tertiary;
+
+            @include breakpoint (xxl) {
+                height: 820px;
+            }
+        }
+
+        // Gallery
+        .gallery {
+            &__images--photo {
+                background-color: $color-secondary;
+                box-shadow: 0 15px 60px rgba(#000, 0.3);
+            }
+        }
+    }
+}
+
+
+// Explore
+.explore--homepage {
+    margin-top: pxVW(248);
+
+    @include breakpoint (lg) {
+        margin-top: 248px;
+    }
+
+    .style-description {
+        color: $color-tertiary;
+    }
+
+    // Browse
+    .browse {
+        margin-top: 0;
+    }
+
+    // Of text
+    .of {
+        display: flex;
+        justify-content: center;
+        margin-bottom: pxVW(224);
+        font-family: $font-serif-extra;
+        font-size: pxVW(248);
+        line-height: 1;
+        color: $color-lightpurple;
+        text-transform: uppercase;
+        user-select: none;
+        pointer-events: none;
+
+        @include breakpoint (lg) {
+            margin-bottom: 200px;
+            font-size: rem(248px);
+        }
+    }
+
+    // Massive title
+    .anim-title {
+        margin-top: -#{pxVW(352)};
+        margin-left: -60px;
+
+        span:nth-of-type(1) {
+            letter-spacing: -6vw;
         }
     }
 }

src/style/pages/_place.scss

@@ -6,11 +6,16 @@
 
     // Title
     &__title {
-        padding: 14vw 0 15vw;
+        padding: pxVW(224) 0 pxVW(240);
         display: flex;
         justify-content: center;
         align-items: flex-end;
 
+        @include breakpoint (xxl) {
+            padding-top: 240px;
+            padding-bottom: 280px;
+        }
+
         h1 {
             position: relative;
             z-index: 2;
@@ -22,7 +27,7 @@
             }
             .bottom {
                 text-align: right;
-                margin-left: 8vw;
+                margin-left: pxVW(128);
             }
         }
 
@@ -38,17 +43,27 @@
     &__description {
         position: relative;
         z-index: 2;
-        padding-top: 12.5vw;
+        padding-top: pxVW(200);
         padding-bottom: 72px;
         background-color: $color-tertiary;
-        border-radius: none;
 
         @include breakpoint (m) {
             padding-bottom: 96px;
         }
         @include breakpoint (sm) {
+            padding-bottom: pxVW(240);
+        }
+        @include breakpoint (md) {
             border-radius: 8px 0 0 8px;
-            padding-bottom: 15vw;
+        }
+        @include breakpoint (xxl) {
+            padding-top: 200px;
+            padding-bottom: 240px;
+        }
+
+        .wrapper {
+            margin: 0;
+            max-width: 1280px;
         }
 
         p {
@@ -58,6 +73,9 @@
             color: $color-text;
 
             @include breakpoint (sm) {
+                font-size: rem(22px);
+            }
+            @include breakpoint (lg) {
                 font-size: 1rem;
             }
         }
@@ -69,23 +87,22 @@
 
             strong {
                 font-family: $font-sans-sb;
-                color: rgba($color-text, .4);
+                color: rgba($color-text, 0.4);
             }
 
             @include breakpoint (sm) {
-                display: none;;
+                display: none;
             }
         }
 
         // Toggle
         .toggle {
+            @include breakpoint (xs) {
                 display: none;
-
-            @include breakpoint (sm) {
-                display: inline-flex;
             }
         }
 
+        // Right side background completion
         &:after {
             content: "";
             display: block;
@@ -97,9 +114,12 @@
             background-color: $color-tertiary;
         }
 
+        // Wrap
         &--wrap {
-            @include breakpoint (xs) {
             padding: 0;
+
+            @include breakpoint (md) {
+                padding-left: 128px;
             }
         }
     }

src/style/pages/_viewer.scss

@@ -5,9 +5,18 @@
     min-height: 560px;
     padding-top: 24px;
 
+    @include breakpoint (sm) {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
     // Top part
     &__top {
         position: absolute;
+        z-index: 10;
         top: 0;
         left: 0;
         right: 0;
@@ -22,7 +31,7 @@
         @include breakpoint (sm) {
             position: static;
             justify-content: center;
-            margin: 24px 0 48px;
+            margin: 24px 0 0;
         }
 
         // Tip message
@@ -30,7 +39,7 @@
             font-family: $font-sans-sb;
             font-size: rem(10px);
             text-transform: uppercase;
-            color: rgba($color-tertiary, .4);
+            color: rgba($color-tertiary, 0.4);
             letter-spacing: 1px;
 
             @include breakpoint (sm) {
@@ -55,11 +64,15 @@
         left: 0;
         right: 0;
         transform: translate3d(0, -37%, 0);
+        margin: 0;
 
         @include breakpoint (sm) {
             position: static;
             transform: none;
-            margin-bottom: 88px;
+            margin-top: auto;
+            margin-bottom: auto;
+            width: 85%;
+            min-height: 500px;
         }
 
         // Gallery
@@ -90,7 +103,7 @@
 
             // Date
             &--date {
-                color: rgba($color-tertiary, .5);
+                color: rgba($color-tertiary, 0.5);
                 font-size: rem(12px);
                 margin-top: 16px;
 
@@ -103,27 +116,31 @@
 
         // Photo number
         &__number {
-            display: none;
             position: absolute;
             z-index: 1;
-            top: 50%;
+            left: 0;
-            transform: translate3d(0, 0%, 0);
+            top: -33.5vw;
             width: 100%;
             font-family: $font-serif-extra;
-            color: rgba($color-tertiary, .4);
+            font-size: pxVW(672);
-            font-size: 42vw;
+            color: rgba($color-tertiary, 0.4);
             text-align: center;
             pointer-events: none;
             user-select: none;
 
             @include breakpoint (sm) {
+                display: block;
                 top: auto;
-                right: 250px;
+                right: 112px;
-                bottom: -19vw;
+                bottom: -240px;
                 width: auto;
-                font-size: rem(300px);
+                font-size: rem(250px);
                 text-align: right;
             }
+            @include breakpoint (md) {
+                bottom: -288px;
+                font-size: rem(300px);
+            }
         }
 
         // Dots

src/style/style.scss

@@ -15,9 +15,11 @@
 
 // Atoms
 @import "atoms/button";
+@import "atoms/button-outline";
+@import "atoms/button-control";
+@import "atoms/toggle";
 @import "atoms/link";
 @import "atoms/switcher";
-@import "atoms/cursor";
 
 // Molecules
 @import "molecules/photo";

src/style/tools/_functions.scss

@@ -7,6 +7,22 @@
 }
 
 
+/* PX to VW
+========================================================================== */
+@function pxVW ($value, $base: $base-width) {
+    @if $value == 0 { @return 0; }
+    @return ($value / $base) * 100 + vw;
+}
+
+
+/* VW to PX
+========================================================================== */
+@function vwPX ($value, $base: $base-width) {
+    @if $value == 0 { @return 0; }
+    @return ($value * $base) / 100 + px;
+}
+
+
 /* Headings
 ========================================================================== */
 @function headings ($from: 1, $to: 6) {

src/style/tools/_helpers.scss

@@ -22,7 +22,7 @@
 ========================================================================== */
 // Wrap (global)
 .wrap {
-    max-width: 1424px;
+    max-width: 1648px;
     margin: 0 auto;
     padding: 0 24px;
 
@@ -32,18 +32,21 @@
     @include breakpoint (md) {
         padding: 0 128px;
     }
-    @include breakpoint (1600px) {
+    @include breakpoint (xxl) {
-        padding: 0 48px;
+        // padding: 0 48px;
     }
 }
 
 // Wrapper (inside and more spaced)
 .wrapper {
-    margin: 0 auto;
     max-width: calc(892px + 28vw);
-    padding: 0 8vw;
+    margin: 0 auto;
+    padding: 0 pxVW(128);
 
     @include breakpoint (sm) {
-        padding: 0 14vw;
+        padding: 0 pxVW(224);
+    }
+    @include breakpoint (xxl) {
+        padding: 0 224px;
     }
 }

src/style/tools/_mixins.scss

@@ -69,6 +69,9 @@
     @else if ($size == xl) {
         @media (min-width: $screen-xl) { @content; }
     }
+    @else if ($size == xxl) {
+        @media (min-width: $screen-xxl) { @content; }
+    }
     @else {
         @media (min-width: $size) { @content; }
     }

src/template.html

@@ -5,9 +5,9 @@
 	<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">
+	<link rel="stylesheet" href="/bundle.css">
 
 	%sapper.base%
-	%sapper.styles%
 	%sapper.head%
 </head>
 

static/img/icons/arrow-pink.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-  <path d="M.257 10.85c-.024-.036-.04-.075-.06-.112-.029-.05-.059-.099-.08-.152-.021-.05-.033-.102-.048-.153-.014-.044-.03-.087-.04-.133a1.541 1.541 0 0 1 0-.6c.01-.046.026-.089.04-.133.015-.051.027-.103.047-.153.022-.053.052-.102.08-.151.02-.038.037-.077.06-.112.057-.085.121-.164.193-.236L8.915.449a1.532 1.532 0 1 1 2.167 2.167l-5.85 5.851h12.625a1.533 1.533 0 0 1 0 3.065H5.23l5.851 5.852a1.532 1.532 0 1 1-2.167 2.167L.449 11.085a1.497 1.497 0 0 1-.192-.236" fill="#FF6C89" fill-rule="evenodd"/>
-</svg>

static/img/icons/arrow-white.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M.205 8.68c-.019-.03-.032-.06-.048-.09-.023-.04-.046-.078-.064-.121-.016-.04-.026-.082-.038-.123-.011-.035-.024-.07-.031-.106a1.233 1.233 0 0 1 0-.48c.007-.037.02-.07.031-.106.012-.041.022-.083.038-.123.018-.042.041-.081.064-.121.016-.03.03-.06.048-.09a1.22 1.22 0 0 1 .155-.188L7.132.359a1.226 1.226 0 1 1 1.734 1.734l-4.68 4.68h10.1a1.226 1.226 0 0 1 0 2.453h-10.1l4.68 4.681a1.226 1.226 0 1 1-1.734 1.734L.36 8.868a1.197 1.197 0 0 1-.155-.188" fill="#FFF" fill-rule="evenodd"/>
-</svg>

static/img/icons/ctf.svg

@@ -1,12 +0,0 @@
-<svg width="139" height="24" xmlns="http://www.w3.org/2000/svg">
-  <g fill="none" fill-rule="evenodd">
-    <path d="M46.024 6.672c2.605 0 4.2 1.624 4.283 3.618h-2.888c-.134-1.162-.712-1.594-1.46-1.594-.996 0-1.544.846-1.544 2.556 0 1.892.564 2.721 1.577 2.721.68 0 1.245-.505 1.41-1.46h2.937c-.33 2.289-2.107 3.484-4.514 3.484-2.54 0-4.464-1.642-4.464-4.563 0-3.054 2.059-4.762 4.663-4.762zm9.82 0c2.961 0 4.447 2.256 4.447 4.547a7.435 7.435 0 0 1-.061.862h-6.167c.15 1.478.796 1.892 1.642 1.892.847 0 1.362-.432 1.478-1.112h2.943c-.505 2.009-2.175 3.136-4.449 3.136-2.538 0-4.562-1.516-4.562-4.629 0-2.59 1.768-4.696 4.73-4.696zm9.317-1.98v2.29h1.958v1.86h-1.958V12.1c0 .298 0 .629.015.861.069.897.35 1.096 1.769 1.03v1.858a9.933 9.933 0 0 1-1.769.149c-2.205 0-2.87-.68-2.97-2.042-.033-.505-.033-.927-.033-1.427V8.842h-1.41v-1.86h1.41v-2.29h2.988zm24.811 1.98c2.605 0 4.199 1.624 4.282 3.618h-2.887c-.134-1.162-.715-1.594-1.46-1.594-.996 0-1.544.846-1.544 2.556 0 1.892.563 2.721 1.576 2.721.68 0 1.246-.505 1.41-1.46h2.938c-.33 2.289-2.107 3.484-4.514 3.484-2.54 0-4.464-1.642-4.464-4.563 0-3.054 2.059-4.762 4.663-4.762zm21.077 0c2.903 0 4.765 1.809 4.765 4.664 0 2.837-1.86 4.66-4.765 4.66-2.905 0-4.762-1.823-4.762-4.66s1.86-4.664 4.762-4.664zm9.643-1.98v2.29h2.994v-2.29h2.986v2.29h1.958v1.86h-1.958l-.005 3.257c0 .298 0 .629.018.861.065.897.348 1.096 1.768 1.03v1.858a9.926 9.926 0 0 1-1.768.149c-2.208 0-2.873-.68-2.971-2.042-.025-.379-.031-.71-.033-1.064V8.842h-2.989V12.1c0 .298 0 .629.018.861.066.897.349 1.096 1.768 1.03v1.858a9.926 9.926 0 0 1-1.768.149c-2.208 0-2.873-.68-2.971-2.042-.025-.379-.03-.71-.032-1.064V8.842h-1.413v-1.86h1.412v-2.29h2.986zm13.162 1.98c2.961 0 4.447 2.256 4.447 4.547 0 .288-.017.576-.05.862h-6.173c.15 1.478.796 1.892 1.642 1.892.847 0 1.362-.432 1.478-1.112h2.938c-.505 2.009-2.175 3.136-4.448 3.136-2.527 0-4.563-1.516-4.563-4.629 0-2.59 1.768-4.696 4.73-4.696zm-55.846.232v4.512c-.003.406.016.812.055 1.216.099.846.505 1.344 1.443 1.344.937 0 1.515-.88 1.515-2.06V6.905h2.99l.004 8.86h-2.988v-1.493l-.796 1.213a3.709 3.709 0 0 1-1.991.505c-1.827 0-2.938-1.028-3.138-2.238a11.79 11.79 0 0 1-.083-1.678V6.904h2.989zm26.635-3.135v8.812c-.01.272 0 .544.032.814.069.512.316.629.98.596v1.841c-.633.067-1.27.1-1.907.099-1.212 0-1.993-.548-2.059-1.726a18.441 18.441 0 0 1-.032-1.304V5.394a3.054 3.054 0 0 0-.996-.117c-1.263 0-1.842.316-1.91.963-.01.155-.013.302-.014.447l-.001.283h1.811v1.872H98.74v6.922h-2.992V8.842h-.778v-1.86h.778v-.065c0-.265 0-.505.018-.798.134-1.66 1.329-2.855 4.896-2.855a13.15 13.15 0 0 1 3.982.505zM73.569 6.672c.23-.003.46.013.687.048v2.44c-2.24-.149-3.054.68-3.054 3.353v3.251H68.21v-8.86h2.986v1.792l.631-1.246a2.428 2.428 0 0 1 1.74-.778zm37.48 2.024c-1.063 0-1.708.864-1.708 2.64 0 1.776.647 2.637 1.708 2.637s1.71-.88 1.71-2.637c0-1.769-.646-2.64-1.71-2.64zm-55.354 0c-.796 0-1.339.464-1.538 1.56h3.014c-.167-1.045-.68-1.56-1.476-1.56zm78.02 0c-.795 0-1.336.464-1.538 1.56h3.014c-.164-1.045-.68-1.56-1.476-1.56zM30.856 15.807V5.627L12.34 13.798v10.18z" fill="#FF5A27" fill-rule="nonzero"/>
-    <path fill="#A0220D" fill-rule="nonzero" d="M12.339 13.799v10.18L.063 18.537V8.408z"/>
-    <path d="M.063 8.408L18.558.225"/>
-    <path d="M15.979 8.56L11.62 6.676l-.073-.028v3.456l.717.311c.758.328 2.196.177 3.219-.336 1.023-.513 1.248-1.192.495-1.52z" fill="#A0220D" fill-rule="nonzero"/>
-    <path d="M8.41 7.013c-1.01.505-1.24 1.198-.487 1.516l3.632 1.576V6.65c-.77-.288-2.152-.134-3.145.364z" fill="#FF5A27" fill-rule="nonzero"/>
-    <path d="M23.133 5.379l-4.35-1.883-.07-.027v3.458l.717.31c.758.33 2.193.178 3.216-.335 1.023-.513 1.243-1.195.487-1.523z" fill="#A0220D" fill-rule="nonzero"/>
-    <path d="M15.567 3.832c-1.023.506-1.24 1.198-.487 1.516l3.632 1.572V3.469c-.775-.288-2.152-.134-3.145.363z" fill="#FF5A27" fill-rule="nonzero"/>
-    <path d="M18.558.225L.063 8.408l12.276 5.39 18.517-8.182L18.558.225zm-3.067 9.852c-1.01.506-2.463.665-3.218.336l-.718-.308-3.632-1.571c-.758-.326-.534-1.01.487-1.516 1.02-.505 2.375-.652 3.145-.364l.074.028 4.35 1.882c.753.324.533 1.006-.488 1.519v-.006zm7.155-3.18c-1.01.505-2.463.664-3.216.336l-.718-.31L15.08 5.35c-.758-.326-.536-1.01.487-1.516 1.023-.505 2.375-.652 3.145-.364l.071.028 4.35 1.882c.756.326.536 1.008-.487 1.52v-.004z" fill="#FFB68D" fill-rule="nonzero"/>
-  </g>
-</svg>

static/img/icons/planet.svg

@@ -1,3 +0,0 @@
-<svg width="13" height="13" xmlns="http://www.w3.org/2000/svg">
-  <path d="M1.93 2.867c.169-.212.351-.41.547-.596a.276.276 0 0 1-.054.145c.217-.124.528.182.08.148.164.143.122.217.115.45.074.227.38.752.63.513.13-.131.062-.329.236-.474.28-.038.398-.262.677-.339.16-.013.504-.121.365-.381-.092-.15.042-.259.08-.45.019-.161-.025-.303.093-.452.057-.144.398-.174.275-.346-.152-.083-.375.162-.476-.073A5.811 5.811 0 0 1 6.5.658c1.304 0 2.51.43 3.483 1.155a1.836 1.836 0 0 0-.087.04c-.294.02-.876.557-.336.667-.052-.307.094-.413.356-.535.019-.01.016-.01.08-.062a.298.298 0 0 1 .026-.012.751.751 0 0 0 .08-.005c.247.194.478.407.69.637a.289.289 0 0 1-.07.02c-.405-.38-.28-.405-.7.05-.248-.022-.395.034-.63.191-.407.021-.607.127-.98.388-.13.106-.433-.113-.274-.25.125-.043.238.066.378-.068.123-.556-1.072-.388-1.314-.194-1.236.644-.6 1.48-.178 1.231.086-.202-.02-.48.208-.656.39-.368.137.06.118.266.13.204.075.32-.122.486-.411.338-1.096.058-1.373.624.013.455-.188.273-.42.447-.232.35.14.596.462.413.35-.289.43-.694.93-.313.025.021.013.007.083.057a.186.186 0 0 1 .042.052c-.214.276.296.104.056-.125-.173-.13-.197-.464.108-.123.103.092.093.332.254.308.268-.207.187.091.445.178.463-.057.528.22.14.39-.18.059-.382-.037-.6-.061-.202.072-.448.133-.603-.061-.184-.513-.781-.172-1.197-.105-.241.097-.171.365-.363.547-.441.37-.303 1.241.28 1.422 1.06.153.965-.42 1.337.783-.098 1.1.437 2.736 1.287 1.103.123-.116.098-.2.188-.367.142-.15.267-.27.214-.515-.209-.738.473-.893.54-1.368-.437.091-1.072-.862-.971-1.174.348.126.589 1.044.874.964.194-.113.945-.435.65-.65-.658.071-.912-.81-.2-.243 1.652.197.992 1.056 1.563 1.163.162-.371.8-1.365.898-.379.273-.263.242.008.279.322-.03.064.043.186.114.255a5.977 5.977 0 0 1-.04.205c-.338-.295-.3.001-.076.302A5.851 5.851 0 0 1 6.5 12.342a5.824 5.824 0 0 1-4.239-1.829c.021-.012.042-.024.06-.037.187-.294.422-.459.606-.81.19-.249.456-.209.575-.58-.057-.311.445-.573.1-.807-.532-.23-.52.062-.822-.501-.246-.062-.364-.228-.633-.282-.098-.068-.073-.18-.246-.176-.192-.065-.397.135-.565-.041-.085.048-.178.14-.317.124-.073-.038-.216-.005-.306-.113l-.001-.01a.502.502 0 0 0-.027-.233A5.863 5.863 0 0 1 .678 6.04c.05.036.088.094.103.186.005.025.033.1.102.06l.017.004-.004-.018c.028-.007-.048-.227-.057-.257-.034-.195.296-.252.307-.463-.101-.167-.046-.166.134-.276.18-.129.264-.357.542-.3-.006.085.232 0 .35-.092-.013-.099-.036-.08-.23-.03-.222-.184.053-.353-.407-.105.071-.421.92-.13.822-.547-.279-.122-.318-.284-.443-.56-.097.012-.251.223-.323.044a.911.911 0 0 0-.118-.159l.091-.147c.062.041.133.064.219.034-.005-.01-.012-.085-.075-.148l.137-.059c-.025-.006-.066-.053-.096-.101.02-.027.038-.055.058-.081l.006.003c.184.102.241-.041.118-.162m10.365 4.351c-.007.06-.014.122-.024.182-.027-.145-.013-.187.024-.182M1.508 9.531a5.845 5.845 0 0 1-.402-.79c.174.21.434.335.419.663a2.005 2.005 0 0 0-.017.127M.899 8.158a5.809 5.809 0 0 1-.161-.7c.06.031.127.045.202.039.006 0 0 0 .04.019.146.183-.018.415-.08.642M0 6.5C0 10.084 2.916 13 6.5 13S13 10.084 13 6.5 10.084 0 6.5 0A6.507 6.507 0 0 0 0 6.5" fill="#999" fill-rule="evenodd"/>
-</svg>

static/img/icons/toggle-bars.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19" height="17" viewBox="0 0 19 17">
-  <path fill="#C78FEC" fill-rule="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>

static/img/icons/toggle-grid.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20">
-  <path fill="#FF6C89" fill-rule="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>