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

[wip] Update About page with Stack of cards for Steps

Browse Source
This commit is contained in:
Félix Péault
2022-08-09 20:52:46 +02:00
parent 8f299ba3ef
commit 386670b5b6
5 changed files with 238 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,10 +3,10 @@
** Purpose
*/
&__purpose {
position: relative;
text-align: center;
.container-wide {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
@@ -14,7 +14,6 @@
min-height: calc(100vh - var(--sides));
color: #fff;
padding: 0 8%;
box-shadow: inset 0 0 0 2px $color-primary-tertiary20;
border-radius: 16px;
@include bp (sm) {
@@ -66,19 +65,32 @@
margin: 128px 0 0;
}
.container {
@include bp (mob-lg, max) {
padding: 0 8px;
}
}
.title {
grid-column: 1 / -1;
max-width: 400px;
margin: 0 auto 48px;
padding: 0 16px;
padding: 0 32px;
text-align: center;
@include bp (sm) {
grid-column: 1 / -1;
margin-bottom: 80px;
padding: 0 16px;
}
h2 {
margin-bottom: 24px;
margin-bottom: 16px;
color: $color-secondary;
@include bp (sm) {
margin-bottom: 24px;
}
}
p {
color: $color-tertiary;
@@ -88,77 +100,56 @@
// Steps grid
.steps {
// gap: 8px;
grid-column: 1 / -1;
@include bp (sm) {
display: grid;
grid-template-columns: repeat(16, 1fr);
gap: 12px;
grid-column: 4 / -4;
margin-bottom: 120px;
}
& > * {
--delay: 150ms;
opacity: 0;
transform: translate3d(0, 40px, 0);
transition-property: opacity, transform;
transition-duration: 1.6s;
transition-timing-function: var(--ease-quart);
// Add reveal delay for every second item
&:nth-child(2n) {
transition-delay: var(--delay);
@include bp (sm) {
margin-bottom: 48px;
}
}
// Visible step state
:global(.is-visible) {
opacity: 1;
transform: translate3d(0,0,0);
}
}
// Each Step
.step {
display: flex;
flex-direction: column;
padding: 48px;
position: relative;
display: block;
overflow: hidden;
padding: 56px 32px 32px;
background: $color-primary-darker;
border-radius: 8px;
border-radius: 12px;
transform-origin: top center;
transition: transform 0.8s var(--ease-quart);
@include bp (sm) {
min-height: 480px;
--columns: 18;
display: grid;
grid-template-rows: repeat(2, 1fr);
padding: 5.5% 0;
min-height: min(45vw, 720px);
border-radius: 16px;
}
&:nth-child(1) {
grid-column: span 10;
}
&:nth-child(2) {
grid-column: span 6;
}
&:nth-child(3) {
grid-column: span 6;
}
&:nth-child(4) {
grid-column: span 10;
}
&:nth-child(5) {
grid-column: span 8;
}
&:nth-child(6) {
grid-column: span 8;
}
// Image
:global(.image) {
display: block;
margin-right: auto;
width: 60%;
max-width: 600px;
max-height: 364px;
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%;
@@ -167,46 +158,108 @@
}
}
// Content
&__content {
max-width: 568px;
width: 80%;
margin-top: 40px;
// Text
&__text {
@include bp (sm) {
margin-top: auto;
padding-top: 40px;
grid-column: 2 / span 7;
grid-row: 2;
align-self: flex-end;
}
h3 {
margin-bottom: 8px;
color: #fff;
font-weight: 600;
}
.text {
line-height: 1.4;
font-weight: 300;
color: $color-secondary-light;
@include bp (sm) {
font-size: rem(18px);
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;
}
}
}
}
// Intention block
.intention {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: $color-tertiary;
text-align: center;
// Stacking
&:global(.is-stacked) {
position: sticky;
margin-bottom: calc(-1 * var(--offset-top) + 52px);
&__text {
width: 75%;
max-width: 512px;
@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;
}
}
}
}
@@ -218,10 +271,10 @@
&__photos {
position: relative;
z-index: 1;
margin-top: -32px;
margin-top: -64px;
@include bp (sm) {
margin-top: -80px;
margin-top: -120px;
}
.container-wide {
@@ -230,21 +283,31 @@
.photos-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin: -5% -5% 0;
transform: rotate(-6deg) translateY(var(--parallax-y)) translateZ(0);
transition: transform 0.8s var(--ease-quart);
@include bp (sm) {
grid-template-columns: repeat(7, 1fr);
gap: 12px;
margin: -5% -5% 0;
}
}
:global(picture) {
width: 100%;
height: auto;
border-radius: 8px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
transition: opacity 1s var(--ease-quart);
@include bp (sm) {
border-radius: 8px;
}
:global(img) {
display: block;
width: 100%;
@@ -293,6 +356,8 @@
// Modules
.grid-modules {
grid-column: 1 / -1;
@include bp (sm) {
grid-column: 2 / -2;
}
@@ -303,24 +368,28 @@
&__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);
@include bp (sm) {
display: grid;
grid-column: 2 / -2;
margin-bottom: 48px;
padding: 120px 0;
padding: clamp(72px, 8vw, 160px) 0;
}
h2 {
margin-bottom: 56px;
grid-column: 1 / -1;
margin-bottom: 64px;
color: #fff;
text-align: center;
@include bp (sm) {
margin-bottom: 88px;
margin-bottom: 104px;
}
}
.blocks {
@@ -334,14 +403,26 @@
.block {
text-align: center;
&:not(:last-child) {
margin-bottom: 64px;
@include bp (sm) {
margin-bottom: 0;
}
}
h3 {
margin-bottom: 12px;
color: $color-secondary-light;
font-weight: 600;
}
p {
margin-bottom: 32px;
margin-bottom: 24px;
font-weight: 300;
@include bp (sm) {
margin-bottom: 32px;
}
}
}
}