diff --git a/src/routes/choose.svelte b/src/routes/choose.svelte
index e2352a1..46ace1e 100644
--- a/src/routes/choose.svelte
+++ b/src/routes/choose.svelte
@@ -60,7 +60,7 @@
-
diff --git a/src/style/layouts/_explore.scss b/src/style/layouts/_explore.scss
index 07baac3..da5ec64 100644
--- a/src/style/layouts/_explore.scss
+++ b/src/style/layouts/_explore.scss
@@ -1,24 +1,28 @@
.explore {
// Description
&__description {
+ position: relative;
+ z-index: 3;
max-width: 312px;
margin: 0 auto;
- margin-bottom: 72px;
@include breakpoint (sm) {
max-width: 472px;
- margin-bottom: 120px;
+ margin-bottom: 0 !important;
}
}
// Globe
.globe {
- margin-top: -25vw;
- margin-bottom: -18vw;
+ margin-top: -96px;
+ margin-bottom: -160px;
+ @include breakpoint (sm) {
+ margin-bottom: calc(-120px - 6vw);
+ }
@include breakpoint (xl) {
- margin-top: -320px;
- margin-bottom: -320px;
+ margin-top: -176px;
+ margin-bottom: -240px;
}
}
@@ -26,7 +30,7 @@
.browse {
position: relative;
z-index: 3;
- padding-left: 0;
- padding-right: 0;
+ margin-top: 72px;
+ margin-bottom: 72px;
}
}
diff --git a/src/style/molecules/_globe.scss b/src/style/molecules/_globe.scss
index b7db8e1..bc9d535 100644
--- a/src/style/molecules/_globe.scss
+++ b/src/style/molecules/_globe.scss
@@ -3,11 +3,18 @@
position: relative;
z-index: 2;
width: 100vw;
- height: 120vw;
+ height: 1040px;
overflow: hidden;
cursor: grab;
user-select: none;
+ @include breakpoint (sm) {
+ height: 140vw;
+ }
+ @include breakpoint (xl) {
+ height: 2000px;
+ }
+
// Cut
&__cut {
opacity: 0.5;
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index ba88f54..e5518b9 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -1,7 +1,5 @@
.browse {
width: 100%;
- margin-top: 72px;
- margin-bottom: 72px;
overflow: hidden;
@include breakpoint (sm) {
@@ -50,6 +48,7 @@
grid-template-columns: repeat(3, 1fr);
grid-column-gap: pxVW(96);
grid-row-gap: pxVW(120);
+ // TODO: center alone locations on a row?
min-height: 200px;
margin-top: 112px;
margin-bottom: pxVW(120);
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index d79f165..7531cca 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -9,14 +9,21 @@
margin-left: -#{pxVW(160)};
}
-
// Description
&__description {
+ margin-top: 14vw;
margin-bottom: 72px;
+ padding: 0 32px;
color: $color-text;
+ @include breakpoint (600px) {
+ margin-top: 72px;
+ }
@include breakpoint (sm) {
- margin: 0 auto 120px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 120px;
+ padding: 0;
}
p {
@@ -28,11 +35,11 @@
}
}
-
// Carousel
.carousel {
position: relative;
+ // Beige background under
&:after {
content: "";
position: absolute;
@@ -68,15 +75,16 @@
// Description
.style-description {
- position: relative;
- z-index: 3;
color: $color-tertiary;
}
// Globe
.globe {
- margin-bottom: -52vh;
+ margin-bottom: calc(-200px - 8vw);
+ @include breakpoint (sm) {
+ margin-bottom: calc(-100px - 28vw);
+ }
@include breakpoint (xl) {
margin-bottom: -550px;
}
@@ -84,7 +92,11 @@
// Browse
.browse {
- margin-top: 0;
+ margin-top: 4vw;
+
+ @include breakpoint (xl) {
+ margin-top: 72px;
+ }
}
// Of text