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

26
src/style/_typography.scss
View File

@@ -14,21 +14,29 @@
// House Name
.title-image {
font-size: rem(88px);
font-size: rem(40px);
font-family: $font-serif;
line-height: 1;
color: $color-secondary;
@include bp (sm) {
font-size: clamp(#{rem(40px)}, 7vw, #{rem(88px)});
}
}
// House Number
.title-index {
font-size: rem(280px);
font-size: rem(80px);
font-family: $font-serif;
letter-spacing: -0.05em;
font-weight: 200;
line-height: 1;
color: rgba($color-tertiary, 0.6);
@include bp (sm) {
font-size: clamp(#{rem(80px)}, 24vw, #{rem(280px)});
}
}
// Medium
@@ -73,9 +81,12 @@
line-height: 1.4;
@include bp (sm) {
font-size: rem(28px);
font-size: rem(24px);
line-height: 1.5;
}
@include bp (md) {
font-size: rem(28px);
}
}
// Normal
@@ -94,8 +105,13 @@
// Photo date
.text-date {
font-size: rem(16px);
line-height: 1.4;
font-size: rem(14px);
line-height: 1.3;
@include bp (sm) {
font-size: rem(16px);
line-height: 1.4;
}
}
// Label

54
src/style/organisms/_house.scss
View File

@@ -1,22 +1,37 @@
.house {
--columns: 20;
grid-column-start: 3;
position: relative;
@include bp (sm) {
--columns: 20;
grid-column-start: 3;
}
a {
text-decoration: none;
}
// Information
&__info {
grid-column: 4 / span 14;
margin-bottom: 56px;
max-width: 800px;
grid-column: 2 / span var(--columns);
margin-bottom: 32px;
padding: 0 20px;
max-width: min(540px, 85vw);
@include bp (sm) {
grid-column: 4 / span 14;
margin-bottom: 56px;
padding: 0;
max-width: 800px;
}
time {
display: block;
margin-top: 24px;
margin-top: 16px;
color: $color-lightgray;
@include bp (sm) {
margin-top: 24px;
}
}
}
@@ -29,8 +44,11 @@
picture {
position: relative;
z-index: 3;
border-radius: 8px;
overflow: hidden;
@include bp (sm) {
border-radius: 8px;
}
}
img {
display: block;
@@ -42,12 +60,17 @@
// Photo number
&__index {
position: absolute;
z-index: 1;
bottom: -64px;
right: 20px;
text-align: right;
@include bp (sm) {
position: absolute;
z-index: 1;
left: 112.5%;
width: 400px;
top: 50%;
bottom: auto;
text-align: left;
transform: translate3d(-50%, -50%, 0);
}
@@ -57,13 +80,20 @@
&:nth-child(even) {
.house {
&__photo {
grid-column-start: 4;
@include bp (sm) {
grid-column-start: 4;
}
}
&__info {
margin-left: auto;
text-align: right;
@include bp (sm) {
margin-left: auto;
text-align: right;
}
}
&__index {
left: auto;
right: 20px;
@include bp (sm) {
right: auto;
left: -12%;

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);
}
}
}
}