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

fix merge

Browse Source
This commit is contained in:
Nicolas Riciotti
2020-04-18 23:24:43 +02:00
parent 50d36d4015 3c05d6d222
commit 10e32a1957
67 changed files with 558 additions and 7126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/style/layouts/_explore.scss
View File

@@ -14,16 +14,16 @@
// Globe
.globe {
margin-top: -96px;
margin-bottom: -160px;
// margin-top: -96px;
// margin-bottom: -160px;
@include breakpoint (sm) {
margin-bottom: calc(-120px - 6vw);
}
@include breakpoint (xl) {
margin-top: -176px;
margin-bottom: -240px;
}
// @include breakpoint (sm) {
// margin-bottom: calc(-120px - 6vw);
// }
// @include breakpoint (xl) {
// margin-top: -176px;
// margin-bottom: -240px;
// }
}
// Browse

2
src/style/layouts/_main.scss
View File

@@ -4,7 +4,7 @@
top: 0;
left: 0;
width: 100%;
transition: opacity 0.4s $ease-quart;
transition: opacity 0.3s $ease-quart;
will-change: opacity;
&.is-transitioning {

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

@@ -8,6 +8,21 @@
cursor: grab;
user-select: none;
////DEBUG////
background: rgba(255,0,0,0.2);
&:after {
content: "";
display: block;
background: blue;
position: absolute;
left: 0; top: 50%;
width: 100%;
height: 2px;
margin-top:-1px;
}
////END DEBUG////
@include breakpoint (sm) {
height: 140vw;
}
@@ -23,94 +38,93 @@
height: 35vw;
min-height: 400px;
padding: 0;
// Partial globe
.globe {
margin-top: -18vw;
}
}
// Marker
.marker {
position: absolute;
z-index: 2;
cursor: pointer;
display: block;
top: 0;
left: 0;
width: 8px;
height: 8px;
border-radius: 100%;
opacity: 1;
background: #ff6c89;
will-change: transform;
span {
transition: color 0.4s $ease-quart;
}
// Hover glow effect
&.hover {
animation: globeMarkerPulse 1s;
}
// Label
&__label {
position: absolute;
bottom: -230%;
left: 230%;
color: transparent;
}
// Location city
&__city {
font-family: $font-serif;
font-size: rem(24px);
line-height: 1;
}
// Location country
&__country {
display: block;
opacity: 0.8;
font-family: $font-sans;
font-size: rem(10px);
line-height: 1;
text-transform: uppercase;
}
// Active
&.is-active {
&, span {
opacity: 1;
}
.marker {
&__city {
color: #FF6C89;
}
&__country {
color: $color-text;
}
}
}
}
.marker.is-left {
.marker__label {
left: auto;
right: 360%;
}
.marker__country {
text-align: right;
}
}
// Grabbing
&.is-grabbing {
cursor: grabbing;
// .globe {
// margin-top: -18vw;
// }
}
}
// Marker
.marker {
position: absolute;
z-index: 2;
cursor: pointer;
display: block;
top: 0;
left: 0;
width: 8px;
height: 8px;
border-radius: 100%;
opacity: 1;
background: #ff6c89;
will-change: transform;
span {
transition: color 0.4s $ease-quart;
}
// Hover glow effect
&.hover {
animation: globeMarkerPulse 1s;
}
// Label
&__label {
position: absolute;
bottom: -230%;
left: 230%;
color: transparent;
}
// Location city
&__city {
font-family: $font-serif;
font-size: rem(24px);
line-height: 1;
}
// Location country
&__country {
display: block;
opacity: 0.8;
font-family: $font-sans;
font-size: rem(10px);
line-height: 1;
text-transform: uppercase;
}
// Active
&.is-active {
&, span {
opacity: 1;
}
.marker {
&__city {
color: #FF6C89;
}
&__country {
color: $color-text;
}
}
}
}
.marker.is-left {
.marker__label {
left: auto;
right: 360%;
}
.marker__country {
text-align: right;
}
}
// Grabbing
.markerWrapper.is-grabbing {
cursor: grabbing;
}
// Part globe
.globe--part {

18
src/style/pages/_homepage.scss
View File

@@ -79,16 +79,16 @@
}
// Globe
.globe {
margin-bottom: calc(-200px - 8vw);
// .globe {
// margin-bottom: calc(-200px - 8vw);
@include breakpoint (sm) {
margin-bottom: calc(-100px - 28vw);
}
@include breakpoint (xl) {
margin-bottom: -550px;
}
}
// @include breakpoint (sm) {
// margin-bottom: calc(-100px - 28vw);
// }
// @include breakpoint (xl) {
// margin-bottom: -550px;
// }
// }
// Browse
.browse {

6
src/style/pages/_page.scss
View File

@@ -92,7 +92,7 @@
}
// Globe
.globe__cut {
margin-top: 8vw;
}
// .globe__cut {
// margin-top: 8vw;
// }
}

34
src/style/pages/_place.scss
View File

@@ -165,24 +165,32 @@
position: absolute;
z-index: 0;
top: 0;
left: 50%;
left: 0;
width: 100%;
max-width: 1920px;
height: 100%;
transform: translateX(-50%);
transform-origin: 0 0;
background-image: var(--url-mobile);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
will-change: transform, opacity;
@include breakpoint (sm) {
background-image: var(--url-desktop);
}
@media (min-width: $screen-sm) and (-webkit-min-device-pixel-ratio: 2),
(min-width: $screen-sm) and (min-resolution: 192dpi) {
background-image: var(--url-desktop-2x);
div {
position: relative;
left: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%);
transform-origin: 0 0;
background-image: var(--url-mobile);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
@include breakpoint (sm) {
background-image: var(--url-desktop);
}
@media (min-width: $screen-sm) and (-webkit-min-device-pixel-ratio: 2),
(min-width: $screen-sm) and (min-resolution: 192dpi) {
background-image: var(--url-desktop-2x);
}
}
}
}