Tweaks and fixes

src/animations.js

@@ -1,31 +1,2 @@
-import anime from 'animejs/lib/anime.es.js'
+// import anime from 'animejs'
 
-// Appear/Disappear
-export const zoomFadeIn = (node, { targets, duration }) => {
-    return {
-        css: t => {
-            anime({
-                targets,
-                duration,
-                easing: 'easeInOutCirc',
-                opacity: [0, 1],
-                scale: [0.9, 1],
-                delay: anime.stagger(100)
-            })
-        }
-    }
-}
-export const zoomFadeOut = (node, { targets, duration }) => {
-    return {
-        css: t => {
-            anime({
-                targets,
-                duration,
-                easing: 'easeInOutCirc',
-                opacity: [1, 0],
-                scale: [1, 0.9],
-                delay: anime.stagger(100)
-            })
-        }
-    }
-}

src/atoms/Button.svelte

@@ -8,13 +8,13 @@
 </script>
 
 {#if type === 'button'}
-<button class={className} class:button-icon={hasSlot} data-text={text}>
+<button class={className} class:button-icon={hasSlot} data-text={text} on:click>
     <slot></slot>
     <span>{text}</span>
 </button>
 
 {:else}
-<a {href} class={className} class:button-icon={hasSlot} data-text={text}>
+<a {href} class={className} class:button-icon={hasSlot} data-text={text} on:click>
     <slot></slot>
     <span>{text}</span>
 </a>

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.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`)
+		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.*,location.*,location.country.*,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 }

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

@@ -75,33 +75,12 @@
 		}
 	})
 
-	// Keyboard navigation
-	const keyboardNav = event => {
-		const keyCode = event.keyCode
-
-		switch (event.keyCode) {
-			case 37: case 80: case 74:
-				document.querySelector('.carousel__controls--area.prev').click()
-				break
-			case 39: case 78: case 75:
-				document.querySelector('.carousel__controls--area.next').click()
-				break
-			case 27: case 67:
-				document.getElementById('photo_close').click()
-				break
-			default: break
-		}
-	}
-
 
 	/*
 	** Run code on browser only
 	*/
 	onMount(() => {
-		changeWindowWidth = () => {
+
-			windowWidth = window.innerWidth
-		}
-		changeWindowWidth()
 	})
 </script>
 
@@ -109,7 +88,7 @@
 	<title>Houses Of - photoName photoCountryName</title>
 </svelte:head>
 
-<svelte:window on:keydown={keyboardNav} on:resize={changeWindowWidth} />
+<svelte:window bind:innerWidth={windowWidth} />
 
 <section class="viewer">
 	<div class="viewer__top">
@@ -129,7 +108,7 @@
 		</div>
 	</div>
 
-	<Carousel viewer={true} {photos} />
+	<Carousel {photos} viewer={true} />
 </section>
 
 

src/style/_base.scss

@@ -1,12 +1,7 @@
 html {
     font: #{$base-font-size} $font-sans;
     color: $color-text;
-    scroll-behavior: smooth;
     min-width: 320px;
-
-    @media screen and (prefers-reduced-motion: reduce) {
-		scroll-behavior: auto;
-    }
 }
 body {
     @include font-smooth;
@@ -64,7 +59,10 @@ button {
     pointer-events: none;
     user-select: none;
 
-    @include breakpoint (xxl) {
+    @include breakpoint (lg) {
+        font-size: pxVW(700);
+    }
+    @include breakpoint (1920px) {
         font-size: rem(900px);
     }
 }
@@ -158,6 +156,7 @@ button {
 }
 
 .style-description {
+    color: $color-tertiary;
     font-family: $font-sans-light;
     font-size: rem(18px);
     line-height: 1.55;

src/style/organisms/_photos.scss

@@ -22,8 +22,8 @@
             left: 24px;
             flex-direction: row-reverse;
             align-items: flex-end;
-            transform: rotate(270deg) translate(-46%,-240%);
+            transform-origin: left top;
-            transform-origin: 50% 50%;
+            transform: rotate(-90deg) translateX(-100%);
         }
 
         // Container
@@ -80,8 +80,8 @@
         }
 
         // Photo
-        @include breakpoint (sm) {
+        .photo {
-            .photo {
+            @include breakpoint (sm) {
                 // Even photos
                 &:nth-child(even) {
                     // Location
@@ -134,7 +134,7 @@
             @include breakpoint (xxl) {
                 padding-left: 192px;
             }
-            @include breakpoint (1648px) {
+            @include breakpoint (1776px) {
                 padding-right: 0;
             }
         }

src/style/pages/_homepage.scss

@@ -12,6 +12,7 @@
     // Description
     &__description {
         margin-bottom: 72px;
+        color: $color-text;
 
         @include breakpoint (sm) {
             margin: 0 auto 120px;
@@ -34,7 +35,7 @@
         &:after {
             content: "";
             position: absolute;
-            z-index: -1;
+            z-index: 0;
             top: 0;
             left: 0;
             right: 0;

src/style/tools/_helpers.scss

@@ -39,7 +39,7 @@
 
 // Wrapper (inside and more spaced)
 .wrapper {
-    max-width: calc(892px + 28vw);
+    max-width: calc(892px + 32vw);
     margin: 0 auto;
     padding: 0 pxVW(128);