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

[wip] Make About page Process step a component

Browse Source 
Also an attempt to manage the stacking effect of the steps but still not good 🙃 tricky shit
This commit is contained in:
Félix Péault
2022-08-11 23:07:50 +02:00
parent 4f75c5a4a0
commit 0c82464a98
4 changed files with 218 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/style/molecules/_process-step.scss Normal file
View File

@@ -0,0 +1,118 @@
// About page Step
.step {
position: sticky;
top: var(--offset-top);
// Card
&__card {
display: block;
overflow: hidden;
padding: 56px 32px 32px;
background: $color-primary-darker;
border-radius: 12px;
transform-origin: top center;
transition: transform 0.8s var(--ease-quart);
@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;
}
// Overlay
&:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.8s var(--ease-quart);
transform: translateZ(0);
}
}
// Image
:global(.image) {
display: block;
overflow: hidden;
width: 70%;
margin: 0 auto 64px;
border-radius: 6px;
@include bp (sm) {
grid-column: 11 / -2;
grid-row: 1 / -1;
width: 100%;
height: 100%;
margin-bottom: 0;
}
:global(img) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
// Content
.content {
@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;
}
}
// Alternate content order
&:nth-child(even) {
:global(.image) {
@include bp (sm) {
grid-column: 2 / span 7;
}
}
.content {
@include bp (sm) {
grid-column: 11 / -2;
}
}
}
/*
** States
*/
// Is pinned
&:global(.is-pinned) {
.step__card {
transform: scale(var(--scale)) translateZ(0);
&:before {
opacity: var(--opacity-index);
}
}
}
}

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

@@ -104,162 +104,44 @@
@include bp (sm) {
grid-column: 4 / -4;
margin-bottom: 120px;
}
& > * {
& > :global(*) {
margin-top: var(--offset-top);
margin-bottom: calc(-1 * var(--offset-top) + 8px);
@include bp (sm) {
margin-bottom: 48px;
margin-bottom: calc(-1 * var(--offset-top) * var(--scale) + 36px);
}
}
}
// Each Step
.step {
// Intention
.intention {
grid-column: 1 / -1;
position: relative;
display: block;
overflow: hidden;
padding: 56px 32px 32px;
background: $color-primary-darker;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: min(45vw, 720px);
margin-top: 20px;
padding: 56px 32px;
border-radius: 12px;
transform-origin: top center;
transition: transform 0.8s var(--ease-quart);
background: $color-primary-darker;
color: $color-tertiary;
text-align: center;
@include bp (sm) {
--columns: 18;
display: grid;
grid-template-rows: repeat(2, 1fr);
padding: 5.5% 0;
min-height: min(45vw, 720px);
grid-column: 4 / -4;
border-radius: 16px;
}
// Image
:global(.image) {
display: block;
overflow: hidden;
width: 70%;
margin: 0 auto 64px;
border-radius: 6px;
@include bp (sm) {
grid-column: 11 / -2;
grid-row: 1 / -1;
width: 100%;
height: 100%;
margin-bottom: 0;
}
:global(img) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
// Text
&__text {
@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
&:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.8s var(--ease-quart);
}
// Alternate content order
&:nth-child(even) {
:global(.image) {
@include bp (sm) {
grid-column: 2 / span 7;
}
}
.step__text {
@include bp (sm) {
grid-column: 11 / -2;
}
}
}
// Stacking
&:global(.is-stacked) {
position: sticky;
margin-bottom: calc(-1 * var(--offset-top) + 52px);
@include bp (sm) {
margin-bottom: calc(-1 * var(--offset-top) + 30px);
}
&:not(:first-child) {
margin-top: var(--offset-top);
}
}
// Is pinned
&:global(.is-pinned) {
transform: scale(var(--scale)) translateZ(0);
top: var(--offset-top);
&:before {
opacity: var(--opacity-index);
}
}
// Intention block
&--intention {
grid-column: 1 / -1;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
color: $color-tertiary;
text-align: center;
@include bp (sm, max) {
padding-top: 56px;
padding-bottom: 56px;
}
@include bp (sm) {
grid-column: 4 / -4;
}
&__text {
width: 75%;
max-width: 512px;
}
&__content {
width: clamp(250px, 75%, 562px);
margin: 0 auto;
}
}
}