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

Fix responsive styling on About

Browse Source
This commit is contained in:
Félix Péault
2022-09-09 23:27:23 +02:00
parent 210164c06d
commit 77cff6b94f
1 changed files with 51 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/style/pages/_about.scss
View File

@@ -3,10 +3,10 @@
** Introduction
*/
&__introduction {
padding: clamp(48px, 10vw, 80px) 0 138px;
padding: clamp(48px, 10vw, 80px) 0 136px;
@include bp (sm) {
padding: clamp(80px, 7vw, 128px) 0 clamp(200px, 20vw, 360px);
padding: clamp(64px, 7vw, 128px) 0 clamp(200px, 20vw, 360px);
}
// Section title
@@ -27,6 +27,9 @@
margin-bottom: 48px;
@include bp (sm) {
grid-column: 3 / -3;
}
@include bp (md) {
grid-column: 3 / span 12;
grid-row: 2;
align-self: baseline;
@@ -46,6 +49,9 @@
color: $color-tertiary;
@include bp (sm) {
grid-column: 3 / span 14;
}
@include bp (md) {
grid-column: 17 / span 6;
grid-row: 2;
align-self: baseline;
@@ -71,10 +77,10 @@
*/
&__creation {
background: #fff;
padding-bottom: 160px;
padding-bottom: clamp(120px, 10vw, 160px);
@include bp (sm) {
padding-bottom: 240px;
padding-bottom: clamp(160px, 20vw, 240px);
}
// Figures
@@ -99,11 +105,10 @@
margin-top: 16px;
color: $color-gray;
text-align: right;
font-size: rem(12px);
line-height: 1.55;
@include bp (sm) {
margin-top: 24px;
font-size: rem(14px);
}
}
@@ -117,7 +122,6 @@
@include bp (sm) {
grid-column: 8 / -2;
margin: -10vw 0 clamp(48px, 7vw, 88px);
// margin: -10vw 0 clamp(80px, 10vw, 128px);
}
figcaption {
@@ -158,8 +162,8 @@
h2 {
grid-column: 1 / -2;
max-width: 240px;
line-height: 1.2;
margin-bottom: 16px;
line-height: 1.2;
@include bp (sm) {
grid-column: 3 / span 10;
@@ -170,8 +174,8 @@
// Large text
.heading {
grid-column: 1 / -1;
color: $color-primary-tertiary20;
margin-bottom: 72px;
color: $color-primary-tertiary20;
:global(strong) {
color: $color-lilas-bright;
@@ -191,6 +195,9 @@
align-self: center;
@include bp (sm) {
grid-column: 4 / span 8;
}
@include bp (md) {
grid-column: 9 / span 6;
}
}
@@ -202,24 +209,24 @@
grid-row: 4;
@include bp (sm) {
grid-column: 13 / -3;
}
@include bp (md) {
grid-column: 16 / span 7;
}
}
.portrait-photo__caption {
grid-column: 3 / -1;
grid-row: 5;
color: $color-gray;
margin-top: 16px;
margin-bottom: 40px;
text-align: right;
font-size: rem(12px);
margin-top: 16px;
color: $color-gray;
line-height: 1.55;
@include bp (md) {
@include bp (sm) {
grid-column: 16 / span 7;
margin: 0;
font-size: rem(16px);
margin-top: 24px;
margin: 24px 0 0;
}
}
}
@@ -233,17 +240,20 @@
// Poster image
:global(picture) {
height: auto;
overflow: hidden;
border-radius: 8px;
grid-column: 1 / -1;
height: 100vw;
max-height: 486px;
overflow: hidden;
margin-top: -64px;
height: 486px;
margin-bottom: 72px;
border-radius: 8px;
@include bp (sm) {
grid-column: 3 / -6;
margin-top: -100px;
height: auto;
max-height: none;
margin-top: -96px;
margin-bottom: clamp(56px, 7vw, 88px);
}
@include bp (md) {
border-radius: 12px;
@@ -260,11 +270,9 @@
h2 {
grid-column: 1 / -1;
line-height: 1;
margin-top: 72px;
@include bp (sm) {
grid-column: 3 / 7;
margin-top: 88px;
}
}
:global(p) {
@@ -310,13 +318,30 @@
// Showcase image
&__showcase {
padding: 0;
@include bp (sm) {
overflow: hidden;
height: 0;
padding-bottom: 120%;
}
:global(picture) {
grid-column: 1 / -1;
@include bp (sm) {
display: flex;
justify-content: center;
}
}
:global(img) {
display: block;
width: 100%;
height: auto;
@include bp (sm) {
width: 130%;
}
}
}
@@ -330,7 +355,7 @@
margin-top: 48px;
@include bp (sm) {
margin: 96px 0 0;
margin-top: clamp(48px, 7vw, 96px);
}
& > .container {
@@ -363,9 +388,9 @@
}
}
p {
max-width: 320px;
color: $color-tertiary;
font-weight: 300;
max-width: 320px;
@include bp (sm) {
max-width: none;
@@ -444,11 +469,6 @@
@include bp (sm) {
margin-bottom: clamp(80px, 10vw, 128px);
}
// margin-top: -64px;
@include bp (sm) {
// margin-top: -120px;
}
.container-wide {
overflow: hidden;