diff --git a/src/components/organisms/InteractiveGlobe.svelte b/src/components/organisms/InteractiveGlobe.svelte index 63ff01a..c8245bc 100644 --- a/src/components/organisms/InteractiveGlobe.svelte +++ b/src/components/organisms/InteractiveGlobe.svelte @@ -151,13 +151,13 @@ animation: { y: ['110%', 0] }, options: { stagger: 0.04, - duration: 1, + duration: 0.85, threshold: 0, }, }} > -

+

{hoveredMarker.country}

diff --git a/src/style/modules/_globe.scss b/src/style/modules/_globe.scss index 64b951e..dfd2758 100644 --- a/src/style/modules/_globe.scss +++ b/src/style/modules/_globe.scss @@ -13,6 +13,11 @@ left: 50%; transform: translateX(-50%) translateZ(0); width: var(--width); + pointer-events: none; + + @media (hover: hover) { + pointer-events: auto; + } // Responsive square padding &:after { @@ -62,6 +67,7 @@ top: 50%; left: 0; width: 100%; + padding-top: 0.25em; overflow: hidden; transform: translateY(-50%) translateZ(0); pointer-events: none; @@ -74,16 +80,22 @@ font-family: $font-serif; font-weight: 100; letter-spacing: -0.035em; + line-height: 0.75; color: $color-secondary; font-size: clamp(#{rem(88px)}, 20vw, #{rem(320px)}); } .country { display: block; text-transform: uppercase; + margin-top: 2em; font-size: rem(14px); color: $color-tertiary; letter-spacing: 0.1em; font-weight: 500; + + @include bp (md) { + margin-top: 4em; + } } } @@ -112,27 +124,38 @@ a { position: relative; - top: -10px; - left: -10px; - display: block; - width: 20px; - height: 20px; + top: -8px; + left: -8px; display: flex; + width: 16px; + height: 16px; align-items: center; justify-content: center; text-decoration: none; color: $color-secondary; pointer-events: auto; + @include bp (md) { + top: -10px; + left: -10px; + width: 20px; + height: 20px; + } + // Dot i { display: block; - width: 10px; - height: 10px; + width: 6px; + height: 6px; border-radius: 32px; background: $color-secondary; transition: box-shadow 0.4s var(--ease-quart), transform 0.4s var(--ease-quart); transform-origin: 50% 50%; + + @include bp (md) { + width: 10px; + height: 10px; + } } // Name span { @@ -142,7 +165,11 @@ // Hover: Grow marker outline &:hover { i { - box-shadow: 0 0 0 10px rgba($color-tertiary, 0.25); + box-shadow: 0 0 0 8px rgba($color-tertiary, 0.25); + + @include bp (md) { + box-shadow: 0 0 0 10px rgba($color-tertiary, 0.25); + } } } }