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

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