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

Add responsive on Homepage elements

Browse Source
This commit is contained in:
Shelby Kay
2021-10-01 23:43:00 +02:00
parent f1ddc05d17
commit 57a12487a3
7 changed files with 169 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/molecules/Location.svelte
View File

@@ -57,7 +57,8 @@
on:mouseleave={handleMouseLeave}
sveltekit-noscroll
>
<Image id={country.flag.id} alt="Flag of {country.name}" width={32} height={32} />
<Image class="location__flag" id={country.flag.id} alt="Flag of {country.name}" width={32} height={32} />
<div class="text">
<dl>
<dt class="location__name">
{name}
@@ -69,6 +70,7 @@
{#if isNew}
<Badge text="New" />
{/if}
</div>
</a>
<div class="location__photos">
<span>{photoIndex}</span>

9
src/style/_typography.scss
View File

@@ -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.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;
}

1
src/style/atoms/_badge.scss
View File

@@ -11,7 +11,6 @@
letter-spacing: 1px;
line-height: 1;
min-height: 16px;
margin-top: 20px;
// Small size
&--small {

29
src/style/atoms/_box-cta.scss
View File

@@ -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 {
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;
}
}
}

41
src/style/molecules/_location.scss
View File

@@ -1,19 +1,27 @@
.location {
display: block;
position: relative;
@include bp (sm) {
text-align: center;
}
a {
display: flex;
align-items: center;
text-decoration: none;
@include bp (sm) {
flex-direction: column;
justify-content: center;
padding: 24px;
text-decoration: none;
}
// 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
&__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 {
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 {

35
src/style/organisms/_locations.scss
View File

@@ -1,9 +1,18 @@
.browse {
margin-top: 96px;
// Description
&__description {
font-size: rem(20px);
margin: 0 auto 32px;
max-width: 230px;
text-align: center;
@include bp (sm) {
font-size: rem(28px);
margin-bottom: 56px;
max-width: none;
}
}
// Continents
@@ -17,15 +26,35 @@
// Locations
&__locations {
width: 70%;
max-width: 1200px;
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;
justify-content: center;
max-width: 1200px;
width: 100%;
margin: 104px auto 80px;
justify-items: center;
}
.location {
margin-bottom: 40px;
@include bp (mob-lg) {
margin-bottom: 0;
}
@include bp (sm) {
margin: 0 22px 56px;
}
}
}
}

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

@@ -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: -20px;
@include bp (sm) {
margin-top: -100px;
}
}
// Text
p {
max-width: 350px;
margin: 100px auto 32px;
@include bp (sm) {
margin: 20px auto 32px;
max-width: 524px;
margin: 0 auto 32px;
}
}
// Button
.button {
@@ -31,9 +40,13 @@
&__photos {
position: relative;
max-width: 2000px;
height: clamp(500px, 45vw, 900px);
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;
grid-template-columns: repeat(32, 1fr);
@@ -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,13 +167,21 @@
}
.cards {
display: flex;
justify-content: center;
margin-top: 48px;
@include bp (sm) {
display: flex;
margin-top: 72px;
}
& > * {
margin: 20px auto 0;
@include bp (sm) {
margin: 0 16px;
}
}
}
}
}