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

Add responsive to location page

Browse Source
This commit is contained in:
Shelby Kay
2021-10-12 18:26:02 +02:00
parent 56c523679b
commit 9ba96efd6d
3 changed files with 149 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@
.location-page__intro {
position: relative;
background: $color-primary;
// padding-top: clamp(100px, 25vw, 400px);
@include bp (sm) {
padding-top: clamp(40px, 14vw, 320px);
@@ -16,21 +17,29 @@
// Houses Of Title
.title {
grid-column: 1 / span var(--columns);
position: relative;
z-index: 2;
display: flex;
flex-flow: row wrap;
align-items: baseline;
justify-content: flex-start;
max-width: clamp(300px, 80vw, 1120px);
grid-column: 1 / span var(--columns);
margin: 0 auto;
padding: 0 32px;
font-family: $font-serif;
line-height: 1;
text-transform: uppercase;
color: $color-lightpurple;
font-size: rem(56px);
font-size: rem(52px);
text-align: center;
margin: min(360px, 60vw) auto;
@include bp (sm) {
display: flex;
flex-flow: row wrap;
align-items: baseline;
justify-content: flex-start;
max-width: clamp(300px, 80vw, 1120px);
margin: 0 auto;
font-size: rem(56px);
text-align: left;
}
strong {
display: block;
@@ -42,11 +51,22 @@
.housesof {
grid-column: span var(--columns);
display: flex;
align-items: baseline;
@include bp (sm) {
display: flex;
align-items: baseline;
}
span {
margin: 0 24px;
display: block;
font-size: rem(24px);
margin-top: 8px;
@include bp (sm) {
display: inline;
font-size: rem(56px);
margin: 0 24px;
}
}
}
.city {
@@ -58,25 +78,47 @@
// Description
&__description {
--columns: 19;
grid-column: 6 / span 19;
grid-column: span var(--columns);
position: relative;
z-index: 2;
margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
margin-bottom: -8px;
background-color: $color-tertiary;
color: $color-text;
border-radius: 8px 0 0 8px;
border-radius: 8px;
@include bp (sm) {
--columns: 19;
grid-column: 4 / span 21;
margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
}
@include bp (md) {
grid-column: 6 / span 19;
}
.wrap {
grid-column: 3 / span 13;
grid-column: 2 / span 6;
max-width: 800px;
padding: 128px 0;
padding: 50px 0;
@include bp (sm) {
grid-column: 3 / span 13;
padding: 72px 0;
}
@include bp (md) {
padding: 128px 0;
}
}
.info {
$text-color: rgba($color-text, 0.5);
margin: 40px 0 64px;
margin: 32px 0 40px;
color: $text-color;
line-height: 0.8;
@include bp (sm) {
margin: 40px 0 64px;
line-height: 1.3;
}
a {
color: $text-color;
@@ -97,6 +139,13 @@
.button {
margin-right: 16px;
margin-bottom: 16px;
font-size: rem(16px);
@include bp (sm) {
margin-bottom: 0;
font-size: rem(18px);
}
}
}
}
@@ -108,7 +157,7 @@
z-index: 1;
top: 0;
left: 50%;
width: clamp(320px, 100vw, 1920px);
width: clamp(320px, 100vw, 2560px);
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
@@ -126,25 +175,33 @@
// Houses
&__houses {
background-color: #fff;
padding-top: 240px;
padding-top: 80px;
@include bp (sm) {
padding-top: 240px;
}
}
// House
.house {
&:not(:last-child) {
margin-bottom: 120px;
margin-bottom: 86px;
@include bp (sm) {
margin-bottom: 120px;
}
}
}
// Next photos section
&__next {
margin-top: 80px;
padding: 64px 0 48px;
margin-top: 135px;
padding: 72px 0 56px;
background-color: $color-tertiary;
text-align: center;
@include bp (sm) {
margin-top: -120px;
margin-top: calc(-1 * clamp(64px, 8vw, 120px));
padding-top: 240px;
padding-bottom: 104px;
}
@@ -170,13 +227,17 @@
&__progress {
position: relative;
display: inline-block;
font-size: clamp(80px, 16vw, #{rem(160px)});
font-size: rem(88px);
color: rgba($color-text, 0.2);
font-family: $font-serif;
font-weight: 200;
line-height: 1;
letter-spacing: -0.05em;
@include bp (sm) {
font-size: clamp(80px, 16vw, #{rem(160px)});
}
span {
display: inline-block;
margin: 0 -10px;
@@ -216,4 +277,4 @@
font-size: rem(28px);
}
}
}
}