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

Fix style and responsive issues

Browse Source
This commit is contained in:
Félix Péault
2021-12-14 23:19:46 +01:00
parent 2f7082fd9d
commit ac03348349
10 changed files with 45 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/style/pages/_homepage.scss
View File

@@ -4,15 +4,18 @@
&__title {
// Houses
&--houses {
margin: -20px 0 0;
display: flex;
margin: -28px 0 0;
color: $color-secondary;
text-align: center;
@include bp (sm) {
margin-top: -100px;
margin-left: calc(-1 * clamp(24px, 6vw, 64px));
margin-top: calc(-1 * clamp(24px, 5vw, 104px));
}
.text-split {
margin-left: calc(-1 * clamp(24px, 5vw, 64px));
}
span {
transition: none;
letter-spacing: -0.06em;
@@ -35,11 +38,11 @@
// Intro Section
&__intro {
overflow: hidden;
padding-bottom: calc(96px + 20vw);
background: linear-gradient(180deg, $color-tertiary 85%, $color-primary 100%), $color-tertiary;
color: $color-text;
text-align: center;
overflow: hidden;
padding-bottom: calc(96px + 5vw);
@include bp (sm) {
padding-bottom: calc(280px + 10vw);
@@ -77,11 +80,11 @@
// Headline
&__headline {
max-width: 350px;
margin: 100px auto 0;
margin: clamp(24px, 10vw, 96px) auto 0;
@include bp (sm) {
max-width: 524px;
margin-top: 20px;
margin-top: 24px;
}
p {
@@ -97,7 +100,7 @@
&__photos {
position: relative;
max-width: 2000px;
margin: calc(-1 * 96px + 5vw) 0 80px;
margin: calc(-1 * 96px - 4vw) 0 80px;
@include bp (sm) {
margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px);