flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix some responsive and style
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- Fullscreen: center image + add a background color
- Carousel: don't cut informations
- Title location font size
- Style location line height
- Photo reveal effect
- Photo has now a transparent png
This commit is contained in:
Félix Péault
2020-04-04 19:10:40 +02:00
parent 7601fe8b44
commit bdc305a77a
12 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/animations/Photo.js
View File

@@ -24,26 +24,33 @@ export const animateIn = scope => {
}
})
// Photo (reveal on scroll)
imagesLoaded(scope.querySelector('.photo__image'), instance => {
const image = instance.elements[0]
const photoImage = scope.querySelector('.photo__image')
const photoAnim = anime.timeline({
easing: 'easeOutQuart',
duration: 2000,
autoplay: false
})
photoAnim.add({
targets: scope.querySelector('.photo__picture'),
opacity: [0, 1]
}, 50)
photoAnim.add({
targets: scope.querySelector('.photo__picture img'),
scale: [1.12, 1]
}, 50)
// Show photo when image is loaded
imagesLoaded(photoImage, instance => {
const photoReveal = ScrollOut({
once: true,
targets: image,
onShown (el) {
// Load the photo then reveal it
anime({
targets: el.querySelector('img'),
scale: [1.12, 1],
opacity: [0, 1],
easing: 'easeOutQuart',
duration: 2000,
delay: 50
})
}
targets: photoImage,
onShown: el => photoAnim.restart()
})
})
// Number parallax on scroll
const nbParallaxMedia = window.matchMedia('(min-width: 768px)')
const nbParallax = matchMedia => {

2
src/molecules/Photo.svelte
View File

@@ -53,7 +53,7 @@
<source media="(min-width: 500px)" data-srcset={getThumbnail(private_hash, 650)}>
<source media="(min-width: 300px)" data-srcset={getThumbnail(private_hash, 400)}>
{#if layout === 'list'}
<img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
alt={imgAlt}
width={defaultWidth} height={defaultHeight}
class="lazyload">

2
src/organisms/Carousel.svelte
View File

@@ -148,7 +148,7 @@
on:click={openFullscreen}
>
<picture class="gallery__picture">
<source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
<source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1200)}>
<source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
<source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
<source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>

3
src/routes/_layout.svelte
View File

@@ -1,6 +1,4 @@
<script context="module">
import { apiEndpoints } from 'utils/store'
export async function preload (page, session) {
const req = await this.fetch(apiEndpoints.gql, {
method: 'post',
@@ -68,6 +66,7 @@
import { fade } from 'svelte/transition'
import { stores } from '@sapper/app'
import {
apiEndpoints,
site,
continents,
countries,

5
src/style/_base.scss
View File

@@ -2,6 +2,7 @@ html {
font: #{$base-font-size} $font-sans;
color: $color-text;
min-width: 320px;
overflow-x: hidden;
}
body {
@include font-smooth;
@@ -80,7 +81,7 @@ button {
// Title: Locations
.title-location {
font-family: $font-serif;
font-size: rem(68px);
font-size: rem(48px);
line-height: 1;
color: $color-secondary;
text-align: center;
@@ -165,7 +166,7 @@ button {
font-family: $font-serif;
font-size: rem(24px);
color: #fff;
line-height: 1;
line-height: 1.15;
text-align: center;
a {

1
src/style/layouts/_main.scss
View File

@@ -1,6 +1,5 @@
// Main page
.housesof {
overflow: hidden;
position: absolute;
top: 0;
left: 0;

4
src/style/molecules/_location.scss
View File

@@ -36,7 +36,7 @@
font-size: rem(32px);
color: $color-secondary;
@include breakpoint (sm) {
@include breakpoint (md) {
font-size: rem(48px);
}
}
@@ -44,7 +44,7 @@
height: 40px;
margin: 24px 0 16px;
@include breakpoint (sm) {
@include breakpoint (md) {
height: 64px;
margin-bottom: 24px;
}

6
src/style/organisms/_carousel.scss
View File

@@ -210,13 +210,12 @@
*/
&__infos {
position: relative;
z-index: 3;
z-index: 2;
}
// Locations
&__locations {
position: relative;
overflow: hidden;
min-height: 80px;
@include breakpoint (sm) {
@@ -236,6 +235,7 @@
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
margin-top: 32px;
padding-bottom: 4px;
@include breakpoint (sm) {
margin-top: pxVW(80);
@@ -268,6 +268,8 @@
*/
&__dots {
display: none;
position: relative;
z-index: 3;
@include breakpoint (xs) {
display: flex;

2
src/style/organisms/_fullscreen.scss
View File

@@ -15,6 +15,7 @@
overflow-x: auto;
opacity: 0;
transform: scale(1.1);
background: $color-primary;
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
will-change: transform, opacity;
@@ -24,6 +25,7 @@
display: block;
height: 100%;
width: auto;
margin: 0 auto;
}
// Open

8
src/style/organisms/_locations.scss
View File

@@ -39,20 +39,24 @@
// Locations
&__locations {
min-height: 200px;
min-height: 120px;
margin-top: 72px;
@include breakpoint (sm) {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: pxVW(232);
min-height: 200px;
margin-top: 112px;
margin-bottom: pxVW(120);
// display: grid;
// grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
// grid-column-gap: 120px;
// grid-row-gap: pxVW(120);
}
@include breakpoint (md) {
margin-bottom: pxVW(232);
}
@include breakpoint (xl) {
margin-bottom: 232px;
}

2
src/style/organisms/_photos.scss
View File

@@ -45,7 +45,7 @@
position: sticky;
z-index: 10;
top: 32px;
height: 100%;
width: 100%;
}
}

1
src/style/pages/_homepage.scss
View File

@@ -1,6 +1,7 @@
// Introduction
.intro {
background-color: $color-tertiary;
overflow: hidden;
// Title
.title-parallax {