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

Tabs to spaces and code cleaning

Browse Source
This commit is contained in:
Félix Péault
2020-02-27 23:08:13 +01:00
parent b5369b66a8
commit a73d9ff71c
7 changed files with 248 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/routes/index.svelte
View File

@@ -1,5 +1,7 @@
<script context="module">
import { apiEndpoints } from '../store'
import {
apiEndpoints,
} from '../store'
// Preload data
export async function preload (page, session) {
@@ -7,9 +9,9 @@
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 }
}
if (req.ok) {
return { photos: photos.data }
}
this.error(404, 'Not found')
}
</script>
@@ -52,36 +54,36 @@
// Scroll apparitions
if (process.browser) {
AOS.init()
// Parallax titles
const titleHouses = document.getElementById('title-houses')
const scrollTitleHouses = basicScroll.default.create({
elem: titleHouses,
direct: titleHouses,
from: 0,
to: window.innerHeight * 0.6,
props: {
'--translateX': {
from: '-3%',
to: '-20%'
}
}
}).start()
const titleWorld = document.getElementById('title-world')
const scrollTitleWorld = basicScroll.default.create({
elem: titleWorld,
direct: titleWorld,
from: document.querySelector('.explore__description').getBoundingClientRect().top,
to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
props: {
'--translateX': {
from: '4%',
to: '-4%'
}
}
}).start()
}
// Parallax titles
const titleHouses = document.getElementById('title-houses')
const scrollTitleHouses = basicScroll.default.create({
elem: titleHouses,
direct: titleHouses,
from: 0,
to: window.innerHeight * 0.6,
props: {
'--translateX': {
from: '-3%',
to: '-20%'
}
}
}).start()
const titleWorld = document.getElementById('title-world')
const scrollTitleWorld = basicScroll.default.create({
elem: titleWorld,
direct: titleWorld,
from: document.querySelector('.explore__description').getBoundingClientRect().top,
to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
props: {
'--translateX': {
from: '4%',
to: '-4%'
}
}
}).start()
})
</script>
@@ -89,50 +91,48 @@
<title>Houses Of - Beautiful houses of planet Earth</title>
</svelte:head>
<div in:fade out:fade>
<section class="intro">
<div class="anim-mask" in:fade out:fade>
<div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
<h1 class="title-massive" aria-label="Houses">
{@html fn.lettersToSpan('Houses')}
</h1>
</div>
</div>
<div class="wrap" in:fade out:fade>
<div class="intro__description style-description">
<p>{$site.description}</p>
<Button type="a" href="#choose" class="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
<IconGlobeSmall width="22" color="#666" />
</Button>
</div>
</div>
<Carousel {photos} />
</section>
<section class="explore explore--homepage">
<div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
<div class="anim-mask">
{@html fn.lettersToSpan('of')}
</div>
</div>
<div class="explore__description style-description" id="choose">
<p>{$site.explore_globe}</p>
</div>
<InteractiveGlobe />
<div class="anim-mask anim-title">
<h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
{@html fn.lettersToSpan('World')}
<section class="intro">
<div class="anim-mask">
<div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
<h1 class="title-massive" aria-label="Houses">
{@html fn.lettersToSpan('Houses')}
</h1>
</div>
</div>
<Locations />
</section>
<div class="wrap">
<div class="intro__description style-description">
<p>{$site.description}</p>
<Footer />
</div>
<Button type="a" href="#choose" class="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
<IconGlobeSmall width="22" color="#666" />
</Button>
</div>
</div>
<Carousel {photos} />
</section>
<section class="explore explore--homepage">
<div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
<div class="anim-mask">
{@html fn.lettersToSpan('of')}
</div>
</div>
<div class="explore__description style-description" id="choose">
<p>{$site.explore_globe}</p>
</div>
<InteractiveGlobe />
<div class="anim-mask anim-title">
<h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
{@html fn.lettersToSpan('World')}
</h1>
</div>
<Locations />
</section>
<Footer />