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

Globe: Temporary fix for responsive sizing, Add correct margins top/bottom
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- Ideally the globe would have to get the size within its container (.globe), set via CSS and not on the window
This commit is contained in:
Félix Péault
2020-04-19 20:13:01 +02:00
parent 9220e6cf8d
commit 1cddc26625
7 changed files with 68 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/style/molecules/_globe.scss
View File

@@ -3,33 +3,35 @@
position: relative;
z-index: 2;
width: 100vw;
height: 100vh;
height: 800px;
overflow: hidden;
cursor: grab;
// pointer-events: none;
user-select: none;
@include breakpoint (sm) {
height: 1280px;
}
@include breakpoint (md) {
height: 1340px;
}
@include breakpoint (xl) {
height: 1670px;
}
////DEBUG////
// background: rgba(255,0,0,0.2);
// DEBUG //
// background: rgba(red, 0.2);
// &:after {
// content: "";
// display: block;
// background: blue;
// position: absolute;
// left: 0; top: 50%;
// top: 50%;
// left: 0;
// background: blue;
// width: 100%;
// height: 2px;
// margin-top:-1px;
// margin-top: -1px;
// }
////END DEBUG////
@include breakpoint (sm) {
height: 140vw;
}
@include breakpoint (xl) {
height: 2000px;
}
// END DEBUG //
/*
@@ -70,7 +72,7 @@
will-change: transform;
span {
transition: color 0.4s $ease-quart, opacity 0.4s $ease-quart;
transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
}
// Hover glow effect
@@ -88,17 +90,25 @@
// Location city
&__city {
font-family: $font-serif;
font-size: rem(24px);
font-size: rem(18px);
line-height: 1;
@include breakpoint (sm) {
font-size: rem(24px);
}
}
// Location country
&__country {
display: block;
opacity: 0.8;
font-family: $font-sans;
font-size: rem(10px);
font-size: rem(8px);
line-height: 1;
text-transform: uppercase;
@include breakpoint (sm) {
font-size: rem(10px);
}
}
// Active
@@ -134,14 +144,12 @@
&.is-close {
.marker__label {
opacity: 0;
pointer-events: none;
}
// Show labels on hover
&:hover {
.marker__label {
opacity: 1;
pointer-events: auto;
}
}
}