diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index 5f10962..adc121c 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -57,18 +57,20 @@
on:mouseleave={handleMouseLeave}
sveltekit-noscroll
>
-
-
- -
- {name}
-
- -
- {country.name}
-
-
- {#if isNew}
-
- {/if}
+
+
+
+ -
+ {name}
+
+ -
+ {country.name}
+
+
+ {#if isNew}
+
+ {/if}
+
{photoIndex}
diff --git a/src/style/_typography.scss b/src/style/_typography.scss
index d9cc634..856c210 100644
--- a/src/style/_typography.scss
+++ b/src/style/_typography.scss
@@ -34,10 +34,15 @@
line-height: 1.5;
}
.text-medium {
- font-size: rem(28px);
+ font-size: rem(20px);
font-family: $font-sans;
font-weight: 300;
- line-height: 1.5;
+ line-height: 1.4;
+
+ @include bp (sm) {
+ font-size: rem(28px);
+ line-height: 1.5;
+ }
}
.text-small {
font-size: rem(22px);
@@ -47,7 +52,7 @@
.text-label {
font-size: rem(12px);
- line-height: 1.5;
+ line-height: 1.4;
text-transform: uppercase;
letter-spacing: 1px;
}
diff --git a/src/style/atoms/_badge.scss b/src/style/atoms/_badge.scss
index 7faa5b2..490535f 100644
--- a/src/style/atoms/_badge.scss
+++ b/src/style/atoms/_badge.scss
@@ -11,7 +11,6 @@
letter-spacing: 1px;
line-height: 1;
min-height: 16px;
- margin-top: 20px;
// Small size
&--small {
diff --git a/src/style/atoms/_box-cta.scss b/src/style/atoms/_box-cta.scss
index 8318c27..52b2080 100644
--- a/src/style/atoms/_box-cta.scss
+++ b/src/style/atoms/_box-cta.scss
@@ -1,19 +1,31 @@
.box-cta {
display: flex;
- flex-direction: column;
- justify-content: center;
align-items: center;
- width: 144px;
- height: 176px;
- padding: 24px 16px;
+ margin: 0 auto;
+ width: 260px;
+ height: 88px;
+ padding: 24px 32px 24px 48px;
background-color: $color-primary-tertiary20;
border-radius: 12px;
text-decoration: none;
+ @include bp (sm) {
+ flex-direction: column;
+ width: 144px;
+ height: 176px;
+ padding: 24px 16px;
+ }
+
.icon {
- margin: auto 0;
- width: 48px;
- height: 48px;
+ width: 36px;
+ height: 36px;
+ flex-shrink: 0;
+
+ @include bp (sm) {
+ margin: auto 0;
+ width: 48px;
+ height: 48px;
+ }
img {
display: block;
@@ -25,5 +37,12 @@
span {
display: block;
color: $color-secondary-light;
+ text-align: left;
+ margin-left: 24px;
+
+ @include bp (sm) {
+ margin-left: 0;
+ text-align: center;
+ }
}
}
\ No newline at end of file
diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss
index 90d9024..b57fd7e 100644
--- a/src/style/molecules/_location.scss
+++ b/src/style/molecules/_location.scss
@@ -1,19 +1,27 @@
.location {
+ display: block;
position: relative;
- text-align: center;
+
+ @include bp (sm) {
+ text-align: center;
+ }
a {
display: flex;
- flex-direction: column;
- justify-content: center;
- padding: 24px;
+ align-items: center;
text-decoration: none;
+ @include bp (sm) {
+ flex-direction: column;
+ justify-content: center;
+ padding: 24px;
+ }
+
// Background circle
&:after {
+ display: none;
opacity: 0;
content: "";
- display: block;
position: absolute;
pointer-events: none;
top: 50%;
@@ -25,6 +33,10 @@
background-color: rgba($color-tertiary, 0.1);
border-radius: 100%;
transition: transform 0.75s var(--ease-quart), opacity 0.75s var(--ease-quart);
+
+ @include bp (sm) {
+ display: block;
+ }
}
// Hover
@@ -40,22 +52,34 @@
}
// Flag
- img {
- display: block;
- margin: 0 auto;
- border-radius: 100%;
+ &__flag {
+ img {
+ display: block;
+ margin: 0 auto;
+ border-radius: 100%;
+ margin-right: 24px;
+
+ @include bp (sm) {
+ margin-right: 0;
+ }
+ }
}
// Location name
&__name {
display: block;
color: $color-secondary;
- margin: 20px 0 8px;
- font-size: rem(48px);
+ margin: 0 0 4px;
+ font-size: rem(32px);
font-family: $font-serif;
font-weight: 300;
line-height: 1.2;
transition: color 0.75s var(--ease-quart);
+
+ @include bp (sm) {
+ margin: 20px 0 8px;
+ font-size: rem(48px);
+ }
}
// Country
@@ -65,14 +89,19 @@
// Badge
.badge {
- position: absolute;
- left: 50%;
- bottom: -8px;
- transform: translateX(-50%);
+ display: inline-flex;
+
+ @include bp (sm) {
+ position: absolute;
+ left: 50%;
+ bottom: -8px;
+ transform: translateX(-50%);
+ }
}
// Photos
&__photos {
+ display: none;
opacity: 0;
position: absolute;
z-index: 2;
@@ -87,6 +116,10 @@
box-shadow: 0 8px 8px rgba(#000, 0.1), 0 16px 28px rgba(#000, 0.12);
pointer-events: none;
transition: opacity 0.5s var(--ease-quart);
+
+ @include bp (sm) {
+ display: block;
+ }
}
&:hover {
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index 0d48e01..32ce9e9 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -1,9 +1,18 @@
.browse {
+ margin-top: 96px;
// Description
&__description {
+ font-size: rem(20px);
+ margin: 0 auto 32px;
+ max-width: 230px;
text-align: center;
- margin-bottom: 56px;
+
+ @include bp (sm) {
+ font-size: rem(28px);
+ margin-bottom: 56px;
+ max-width: none;
+ }
}
// Continents
@@ -17,15 +26,35 @@
// Locations
&__locations {
- display: flex;
- flex-flow: row wrap;
- justify-content: center;
+ width: 70%;
max-width: 1200px;
- margin: 104px auto 80px;
- justify-items: center;
+ margin: 88px auto 80px;
+ padding: 0 32px;
+
+ @include bp (mob-lg) {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ justify-content: center;
+ grid-gap: 40px 24px;
+ width: 85%;
+ padding: 0;
+ }
+ @include bp (sm) {
+ display: flex;
+ flex-flow: row wrap;
+ width: 100%;
+ margin: 104px auto 80px;
+ }
.location {
- margin: 0 22px 56px;
+ margin-bottom: 40px;
+
+ @include bp (mob-lg) {
+ margin-bottom: 0;
+ }
+ @include bp (sm) {
+ margin: 0 22px 56px;
+ }
}
}
}
\ No newline at end of file
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 2a97571..23a1a66 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -7,18 +7,27 @@
color: $color-text;
text-align: center;
overflow: hidden;
- padding-bottom: clamp(100px, 27vw, 600px);
+ padding-bottom: clamp(250px, 27vw, 600px);
// Title
h1 {
color: $color-secondary;
line-height: 1;
- margin-top: -100px;
+ margin-top: -20px;
+
+ @include bp (sm) {
+ margin-top: -100px;
+ }
}
// Text
p {
- max-width: 524px;
- margin: 0 auto 32px;
+ max-width: 350px;
+ margin: 100px auto 32px;
+
+ @include bp (sm) {
+ margin: 20px auto 32px;
+ max-width: 524px;
+ }
}
// Button
.button {
@@ -31,8 +40,12 @@
&__photos {
position: relative;
max-width: 2000px;
- height: clamp(500px, 45vw, 900px);
- margin: calc(-1 * clamp(300px, 20vw, 500px)) auto 0;
+ height: clamp(400px, 45vw, 900px);
+ margin: calc(-1 * clamp(200px, 20vw, 500px)) auto 0;
+
+ @include bp (sm) {
+ margin: calc(-1 * clamp(300px, 20vw, 500px)) auto 0;
+ }
}
&__collage {
display: grid;
@@ -137,10 +150,15 @@
p {
font-family: $font-sans;
- font-size: rem(32px);
+ font-size: rem(28px);
color: $color-tertiary;
font-weight: 300;
line-height: 1.5;
+ padding: 0 20px;
+
+ @include bp (sm) {
+ font-size: rem(32px);
+ }
strong {
font-weight: 300;
@@ -149,12 +167,20 @@
}
.cards {
- display: flex;
justify-content: center;
- margin-top: 72px;
+ margin-top: 48px;
+
+ @include bp (sm) {
+ display: flex;
+ margin-top: 72px;
+ }
& > * {
- margin: 0 16px;
+ margin: 20px auto 0;
+
+ @include bp (sm) {
+ margin: 0 16px;
+ }
}
}
}