Fix Credits page spacing and border color + Add cropped Globe

src/routes/credits.svelte

@@ -2,6 +2,7 @@
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
 
     export let data: any
 </script>
@@ -77,8 +78,9 @@
                 </ul>
             </div>
         </div>
-
     </section>
+
+    <InteractiveGlobe type="cropped" />
 </main>
 
 

src/style/pages/_credits.scss

@@ -4,13 +4,12 @@
 
     // Intro Section
     &__heading {
-        overflow: hidden;
         margin: 56px 0 72px;
         color: $color-tertiary;
         text-align: center;
 
         @include bp (sm) {
-            margin: 160px 0 72px;
+            margin: 160px 0;
         }
 
         // Text
@@ -37,7 +36,7 @@
 
     &__category {
         display: block;
-        border-top: 1px solid $color-tertiary;
+        border-top: 1px solid $color-lightpurple;
         padding-top: 32px;
 
         @include bp (sm) {
@@ -82,6 +81,15 @@
             text-decoration: none;
             transition: color 0.2s;
         }
+        dt {
+            display: block;
+            line-height: 1;
+            margin-bottom: 12px;
+
+            a:hover {
+                color: $color-secondary;
+            }
+        }
         h3 {
             font-size: rem(24px);
             font-family: $font-serif;
@@ -90,15 +98,7 @@
                 font-size: rem(28px);
             }
         }
-        dt {
-            line-height: 1;
-
-            a:hover {
-                color: $color-secondary;
-            }
-        }
         dd {
-            margin-top: 6px;
             font-size: rem(14px);
 
             @include bp (sm) {
@@ -127,4 +127,14 @@
             }
         }
     }
+
+    // Globe
+    .globe {
+        * {
+            pointer-events: none;
+        }
+        canvas {
+            opacity: 0.5;
+        }
+    }
 }