From 4a83ade94b058696e582bddf3eeade704e66b5f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 11 Aug 2022 23:28:43 +0200
Subject: [PATCH] [wip] Create cropped version of Globe2?

Probably not ideal as the canvas is still bigger, mostly styling for now
---
 src/components/organisms/InteractiveGlobe2.svelte |  4 +++-
 src/style/modules/_globe2.scss                    |  7 ++++++-
 src/style/pages/_credits.scss                     | 12 ------------
 src/style/pages/_subscribe.scss                   |  2 +-
 4 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/organisms/InteractiveGlobe2.svelte b/src/components/organisms/InteractiveGlobe2.svelte
index 69e5282..86f5e6e 100644
--- a/src/components/organisms/InteractiveGlobe2.svelte
+++ b/src/components/organisms/InteractiveGlobe2.svelte
@@ -110,7 +110,9 @@
     on:resize={resize}
 />
 
-<div class="globe" bind:this={globeParentEl}>
+<div class="globe" bind:this={globeParentEl}
+    class:is-cropped={type === 'cropped'}
+>
     <div class="globe__inner">
         <div class="globe__canvas" bind:this={globeEl} />
     </div>
diff --git a/src/style/modules/_globe2.scss b/src/style/modules/_globe2.scss
index e3f1bc0..08d4039 100644
--- a/src/style/modules/_globe2.scss
+++ b/src/style/modules/_globe2.scss
@@ -241,12 +241,17 @@
     /*
     ** States and Variants
     */
+    // Cropped version
+    &.is-cropped {
+        overflow: hidden;
+        height: clamp(300px, 30vw, 500px);
+    }
+
     // When dragging
     :global(.is-grabbing) {
         cursor: grabbing;
     }
 
-
     // Tweakpane
     :global(.tp-rotv) {
         position: absolute;
diff --git a/src/style/pages/_credits.scss b/src/style/pages/_credits.scss
index c974544..e63e578 100644
--- a/src/style/pages/_credits.scss
+++ b/src/style/pages/_credits.scss
@@ -118,16 +118,4 @@
             }
         }
     }
-}
-
-:global(.credits) {
-    // Globe
-    :global(.globe) {
-        :global(*) {
-            pointer-events: none;
-        }
-        :global(canvas) {
-            opacity: 0.5;
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/style/pages/_subscribe.scss b/src/style/pages/_subscribe.scss
index bfd3748..29aa5af 100644
--- a/src/style/pages/_subscribe.scss
+++ b/src/style/pages/_subscribe.scss
@@ -60,7 +60,7 @@
 }
 
 // Globe
-:global(.subscribe .globe-cropped) {
+:global(.subscribe .globe) {
     margin-top: 96px;
 
     @include bp (sm) {