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

✨ Rework About page Process section

Browse Source
This commit is contained in:
Félix Péault
2022-09-07 22:47:00 +02:00
parent 46a78851ec
commit 351061dc61
5 changed files with 148 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/style/molecules/_process-step.scss
View File

@@ -1,23 +1,20 @@
// About page Step
.step {
// Card
&__card {
position: relative;
display: block;
overflow: hidden;
padding: 56px 32px 32px;
background: $color-primary-darker;
border-radius: 12px;
transform: translateZ(0);
position: relative;
display: block;
overflow: hidden;
padding: 56px 32px 32px;
background: $color-primary-darker;
border-radius: 12px;
transform: translateZ(0);
@include bp (sm) {
--columns: 18;
display: grid;
grid-template-rows: repeat(2, 1fr);
padding: 5.5% 0;
min-height: min(45vw, 720px);
border-radius: 16px;
}
@include bp (sm) {
--columns: 11;
display: grid;
grid-template-rows: repeat(2, 1fr);
padding: 8% 0;
min-height: clamp(400px, 75vh, 800px);
border-radius: 16px;
}
// Image
@@ -27,87 +24,36 @@
display: block;
overflow: hidden;
width: 70%;
max-height: 580px;
margin: 0 auto 64px;
max-height: 550px;
margin-bottom: 48px;
border-radius: 6px;
@include bp (sm) {
grid-column: 11 / -2;
grid-column: 2 / span 6;
grid-row: 1 / -1;
width: 100%;
height: 100%;
margin-bottom: 0;
height: auto;
}
video, :global(.image) {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
:global(.image) {
:global(img) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
// width: 100%;
// height: 100%;
}
:global(.image img), video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
// Content
.content {
.text {
position: relative;
z-index: 2;
@include bp (sm) {
grid-column: 2 / span 7;
grid-row: 2;
align-self: flex-end;
}
h3 {
margin-bottom: 8px;
color: #fff;
@include bp (sm) {
margin-bottom: 16px;
}
}
.text {
line-height: 1.5;
font-weight: 300;
color: $color-secondary-light;
}
}
// Overlay
.overlay {
content: "";
display: block;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
pointer-events: none;
transform: translateZ(0);
}
// Alternate content order
&:nth-child(even) {
.media {
@include bp (sm) {
grid-column: 2 / span 7;
}
}
.content {
@include bp (sm) {
grid-column: 11 / -2;
}
}
line-height: 1.5;
font-weight: 300;
color: $color-secondary-light;
grid-column: 2 / -2;
}
}

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

@@ -356,10 +356,10 @@
&__photos {
position: relative;
z-index: 1;
margin-top: -64px;
// margin-top: -64px;
@include bp (sm) {
margin-top: -120px;
// margin-top: -120px;
}
.container-wide {
@@ -434,41 +434,27 @@
}
}
/*
** Bottom
*/
&__bottom {
@include bp (sm) {
margin-top: calc(-1 * clamp(160px, 14vw, 240px));
}
// Modules
.grid-modules {
grid-column: 1 / -1;
@include bp (sm) {
grid-column: 2 / -2;
}
}
}
// Interest
&__interest {
position: relative;
z-index: 2;
display: block;
margin-bottom: 20px;
padding: 72px 32px;
background: $color-primary-tertiary20;
border-radius: 12px;
box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
margin-top: calc(-1 * clamp(160px, 14vw, 256px));
@include bp (sm) {
display: grid;
grid-column: 2 / -2;
margin-bottom: 48px;
padding: clamp(72px, 8vw, 160px) 0;
& > .container {
position: relative;
z-index: 2;
display: block;
margin-bottom: 20px;
padding: 72px 32px;
background: $color-primary-tertiary20;
border-radius: 12px;
box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
@include bp (sm) {
--columns: 22;
display: grid;
grid-column: 2 / -2;
margin-bottom: 64px;
padding: clamp(72px, 8vw, 160px) 0;
}
}
h2 {