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

Adapt Globe responsive and disable scroll on touch devices for now

Browse Source 
Disabling scroll while finding a solution to only scroll horizontally on mobile
This commit is contained in:
Félix Péault
2022-09-27 09:13:10 +02:00
parent d921f699b2
commit aa857e3531
2 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/organisms/InteractiveGlobe.svelte
View File

@@ -151,13 +151,13 @@
animation: { y: ['110%', 0] }, animation: { y: ['110%', 0] },
options: { options: {
stagger: 0.04, stagger: 0.04,
duration: 1, duration: 0.85,
threshold: 0, threshold: 0,
}, },
}} }}
> >
<SplitText text={hoveredMarker.name} mode="chars" class="name" /> <SplitText text={hoveredMarker.name} mode="chars" class="name" />
<p class="country" in:flySvelte={{ y: 16, duration: 800, easing: quartOut, delay: 900 }}> <p class="country" in:flySvelte={{ y: 16, duration: 800, easing: quartOut, delay: 700 }}>
{hoveredMarker.country} {hoveredMarker.country}
</p> </p>
</div> </div>

41
src/style/modules/_globe.scss
View File

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