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

22
src/style/_typography.scss
View File

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

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

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

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

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