From 0174ba08f23842577571995ca83da57e25bd209b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 17 Feb 2020 22:36:36 +0100 Subject: [PATCH] Tweaks and fixes --- src/animations.js | 31 +------------------ src/atoms/Button.svelte | 4 +-- .../location/[country]/[location].svelte | 2 +- .../[country]/[location]/[photo].svelte | 27 ++-------------- src/style/_base.scss | 11 +++---- src/style/organisms/_photos.scss | 10 +++--- src/style/pages/_homepage.scss | 3 +- src/style/tools/_helpers.scss | 2 +- 8 files changed, 20 insertions(+), 70 deletions(-) diff --git a/src/animations.js b/src/animations.js index 80bb1b6..dcc629e 100644 --- a/src/animations.js +++ b/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) - }) - } - } -} diff --git a/src/atoms/Button.svelte b/src/atoms/Button.svelte index db01697..76ee32b 100644 --- a/src/atoms/Button.svelte +++ b/src/atoms/Button.svelte @@ -8,13 +8,13 @@ {#if type === 'button'} - {:else} - + {text} diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[location].svelte index a0c8e98..cf6155f 100644 --- a/src/routes/location/[country]/[location].svelte +++ b/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 } diff --git a/src/routes/viewer/[country]/[location]/[photo].svelte b/src/routes/viewer/[country]/[location]/[photo].svelte index ea55ad2..e04ceea 100644 --- a/src/routes/viewer/[country]/[location]/[photo].svelte +++ b/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() + }) @@ -109,7 +88,7 @@ Houses Of - photoName photoCountryName - +
@@ -129,7 +108,7 @@
- +
diff --git a/src/style/_base.scss b/src/style/_base.scss index 6b391a1..ee17e50 100644 --- a/src/style/_base.scss +++ b/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; diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss index 086da6e..2d6ed39 100644 --- a/src/style/organisms/_photos.scss +++ b/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: 50% 50%; + transform-origin: left top; + 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; } } diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index 46d1369..3280c92 100644 --- a/src/style/pages/_homepage.scss +++ b/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; diff --git a/src/style/tools/_helpers.scss b/src/style/tools/_helpers.scss index 1f026b6..4ef3273 100644 --- a/src/style/tools/_helpers.scss +++ b/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);