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

Rework the Location page intro spacing on Desktop

Browse Source
This commit is contained in:
Félix Péault
2021-10-12 17:01:31 +02:00
parent b9b690cab2
commit 759dbaf7b3
1 changed files with 39 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/style/pages/_location.scss
View File

@@ -5,16 +5,26 @@
// Intro
.location-page__intro {
position: relative;
// height: 85vh;
background: $color-primary;
@include bp (sm) {
padding-top: clamp(40px, 14vw, 320px);
}
@include bp (lg) {
padding-top: clamp(40px, 18vw, 320px);
}
// Houses Of Title
.title {
grid-column: 1 / span var(--columns);
position: relative;
z-index: 2;
max-width: 1164px;
margin: clamp(80px, 10vw, 240px) auto clamp(60px, 6vw, 120px);
display: flex;
flex-flow: row wrap;
align-items: baseline;
justify-content: flex-start;
max-width: clamp(300px, 80vw, 1120px);
margin: 0 auto;
padding: 0 32px;
font-family: $font-serif;
line-height: 1;
@@ -24,7 +34,7 @@
strong {
display: block;
font-size: clamp(48px, 16vw, 160px);
font-size: clamp(48px, 12vw, 160px);
color: $color-secondary;
font-weight: 300;
text-transform: none;
@@ -34,49 +44,25 @@
grid-column: span var(--columns);
display: flex;
align-items: baseline;
// margin-left: -10vw;
span {
margin-left: 24px;
margin: 0 24px;
}
}
.city {
grid-row: 2;
// grid-column: 4 / span 13;
text-align: center;
margin-left: auto;
}
}
}
// Illustration
&__illustration {
pointer-events: none;
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: clamp(320px, 100vw, 1920px);
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
transform: translate3d(-50%, 0, 0);
@include bp (sm) {
background-image: var(--illus-desktop);
}
@include bp (xl) {
background-image: var(--illus-desktop-2x);
}
}
// Description
&__description {
--columns: 19;
grid-column: 6 / span 19;
position: relative;
z-index: 2;
margin-bottom: calc(-1 * clamp(60px, 6vw, 120px));
margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
background-color: $color-tertiary;
color: $color-text;
border-radius: 8px 0 0 8px;
@@ -115,6 +101,28 @@
}
}
// Illustration
&__illustration {
pointer-events: none;
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: clamp(320px, 100vw, 1920px);
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
transform: translate3d(-50%, 0, 0);
@include bp (sm) {
background-image: var(--illus-desktop);
}
@include bp (xl) {
background-image: var(--illus-desktop-2x);
}
}
// Houses
&__houses {
background-color: #fff;