From 4d8493e407e2f802d3026216e7a5214f28494069 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 29 Feb 2020 10:47:01 +0100
Subject: [PATCH] Credits: Add temporary globe at bottom

---
 src/molecules/InteractiveGlobe.svelte | 23 ++++++++++++++++++++++-
 src/routes/credits.svelte             |  3 +++
 src/style/molecules/_globe.scss       | 16 ++++++++++++++--
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/molecules/InteractiveGlobe.svelte b/src/molecules/InteractiveGlobe.svelte
index 803ab5c..a6d6923 100644
--- a/src/molecules/InteractiveGlobe.svelte
+++ b/src/molecules/InteractiveGlobe.svelte
@@ -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>
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index 700d379..5674634 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -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 />
diff --git a/src/style/molecules/_globe.scss b/src/style/molecules/_globe.scss
index c544d67..5792018 100644
--- a/src/style/molecules/_globe.scss
+++ b/src/style/molecules/_globe.scss
@@ -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;
 }
\ No newline at end of file