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

Integrate more section in About page

Browse Source
This commit is contained in:
Félix Péault
2022-08-03 10:13:32 +02:00
parent 42742bcba3
commit 7e43846a92
5 changed files with 178 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/style/molecules/_heading.scss
View File

@@ -20,7 +20,8 @@
// Text
.text {
max-width: 300px;
width: 75%;
max-width: 360px;
margin: 40px auto 0;
font-weight: 200;

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

@@ -59,6 +59,9 @@
** Process
*/
&__process {
position: relative;
z-index: 2;
@include bp (sm) {
margin: 128px 0 0;
}
@@ -83,44 +86,129 @@
}
}
// Steps grid
.steps {
display: grid;
gap: 8px;
// gap: 8px;
@include bp (sm) {
display: grid;
grid-template-columns: repeat(16, 1fr);
gap: 12px;
}
div {
background: $color-primary-darker;
border-radius: 8px;
height: 600px;
& > * {
--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);
}
}
// Visible step state
:global(.is-visible) {
opacity: 1;
transform: translate3d(0,0,0);
}
}
// Each Step
.step {
display: flex;
flex-direction: column;
padding: 48px;
background: $color-primary-darker;
border-radius: 8px;
@include bp (sm) {
min-height: 480px;
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;
border-radius: 6px;
:global(img) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
// Content
&__content {
max-width: 568px;
width: 80%;
margin-top: 40px;
@include bp (sm) {
border-radius: 16px;
margin-top: auto;
padding-top: 40px;
}
&:nth-child(1) {
grid-column: span 10;
h3 {
margin-bottom: 8px;
color: #fff;
font-weight: 600;
}
&: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;
.text {
line-height: 1.4;
font-weight: 300;
color: $color-secondary-light;
@include bp (sm) {
font-size: rem(18px);
}
}
}
}
// Intention block
.intention {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: $color-tertiary;
text-align: center;
&__text {
width: 75%;
max-width: 512px;
}
}
}
@@ -130,15 +218,14 @@
&__photos {
position: relative;
z-index: 1;
margin-top: 48px;
margin-top: -32px;
@include bp (sm) {
margin-top: 80px;
margin-top: -80px;
}
.container-wide {
overflow: hidden;
border-radius: 8px;
}
.photos-grid {
@@ -189,19 +276,8 @@
top: 0;
left: 0;
width: 100%;
height: 20vw;
background: linear-gradient(to top, rgba($color-primary, 0), $color-primary);
pointer-events: none;
}
&:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30vw;
background: linear-gradient(to top, $color-primary, rgba($color-primary, 0));
height: 100%;
background: linear-gradient(0deg, rgba($color-primary, 1) 0%, rgba($color-primary, 0) 25%, rgba($color-primary, 0) 75%, rgba($color-primary, 1) 100%);
pointer-events: none;
}
}