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

Credits: Add temporary globe at bottom

Browse Source
This commit is contained in:
Félix Péault
2020-02-29 10:47:01 +01:00
parent 631a3e6ccb
commit 4d8493e407
3 changed files with 39 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/molecules/InteractiveGlobe.svelte
View File

@@ -1,11 +1,32 @@
<script>
export let type
// Lead 1: https://codepen.io/edankwan/pen/emqgpr
// Lead 2: ThreeJS globe: https://github.com/vasturiano/globe.gl
// Lead 3: https://www.bypeople.com/css-js-webgl-rotating-3d-globe-effect/
</script>
<div class="globe">
<div class="globe" class:globe--part={type === 'part'}>
<div class="wrap">
<div class="pin-place">
<a href="/location/australia/brisbane" rel="prefetch" class="pinplace__name">
<span>Brisbane</span>
</a>
<a href="/location/australia/brisbane" rel="prefetch" class="">
<i class="pin-place__dot"></i>
</a>
</div>
<div class="pin-place">
<a href="/location/australia/brisbane" rel="prefetch" class="pinplace__name">
<span>Montpellier</span>
</a>
<a href="/location/australia/brisbane" rel="prefetch" class="">
<i class="pin-place__dot"></i>
</a>
</div>
<span class="pin-country">France</span>
<img src="/img/globe.png" alt="">
</div>
</div>

3
src/routes/credits.svelte
View File

@@ -9,6 +9,7 @@
import IconArrow from '../atoms/IconArrow'
import TitleSite from '../atoms/TitleSite'
import LinkTranslate from '../atoms/LinkTranslate'
import InteractiveGlobe from '../molecules/InteractiveGlobe'
import Footer from '../molecules/Footer'
// Categories
@@ -64,6 +65,8 @@
</div>
{/each}
</div>
<InteractiveGlobe type="part" />
</div>
<Footer />

16
src/style/molecules/_globe.scss
View File

@@ -11,7 +11,19 @@
// Image (for now)
img {
display: block;
width: 100%;
display: inline-block;
margin: 0 auto;
pointer-events: none;
user-select: none;
}
}
// Pin
// Part globe
.globe--part {
overflow: hidden;
height: 30vw;
min-height: 300px;
opacity: 0.5;
}