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

[wip] Create About page

Browse Source
This commit is contained in:
Félix Péault
2022-08-02 00:07:46 +02:00
parent 2215b1329c
commit 42742bcba3
10 changed files with 663 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/style/_typography.scss
View File

@@ -43,6 +43,18 @@
}
}
// X-Large
.title-xl {
font-family: $font-serif;
font-size: rem(34px);
line-height: 1.2;
letter-spacing: -0.025em;
@include bp (sm) {
font-size: clamp(#{rem(34px)}, 4vw, #{rem(60px)});
}
}
// Big
.title-big {
font-family: $font-serif;

1
src/style/atoms/_button.scss
View File

@@ -60,6 +60,7 @@
&--small {
height: 40px;
padding: 0 16px;
font-size: rem(16px);
@include bp (md) {
height: 40px;

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

@@ -28,5 +28,21 @@
max-width: 600px;
margin-top: 72px;
}
:global(a) {
position: relative;
color: currentColor;
text-decoration: none;
display: inline-block;
background-image: linear-gradient(rgba($color-tertiary, 0.3), rgba($color-tertiary, 0.3));
background-position: 0 100%;
background-size: 100% 1px;
background-repeat: no-repeat;
transition: color 0.6s var(--ease-quart);
&:hover {
color: $color-secondary-light;
}
}
}
}

272
src/style/pages/_about.scss Normal file
View File

@@ -0,0 +1,272 @@
.about {
/*
** Purpose
*/
&__purpose {
text-align: center;
.container-wide {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
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) {
padding: 0 18%;
}
}
// Text
.text {
max-width: 1024px;
:global(strong) {
color: $color-secondary-light;
font-weight: inherit;
}
}
// Background
.background {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: $color-primary-tertiary20;
transition: opacity 1.2s var(--ease-quart);
}
// Visible state
&:global(.is-visible) {
.background {
opacity: 1;
}
}
}
/*
** Process
*/
&__process {
@include bp (sm) {
margin: 128px 0 0;
}
.title {
max-width: 400px;
margin: 0 auto 48px;
padding: 0 16px;
text-align: center;
@include bp (sm) {
margin-bottom: 80px;
}
h2 {
margin-bottom: 24px;
color: $color-secondary;
}
p {
color: $color-tertiary;
font-weight: 300;
}
}
.steps {
display: grid;
gap: 8px;
@include bp (sm) {
grid-template-columns: repeat(16, 1fr);
gap: 12px;
}
div {
background: $color-primary-darker;
border-radius: 8px;
height: 600px;
@include bp (sm) {
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;
}
}
}
}
/*
** Photos grid
*/
&__photos {
position: relative;
z-index: 1;
margin-top: 48px;
@include bp (sm) {
margin-top: 80px;
}
.container-wide {
overflow: hidden;
border-radius: 8px;
}
.photos-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 12px;
margin: -5% -5% 0;
transform: rotate(-6deg) translateY(var(--parallax-y)) translateZ(0);
transition: transform 0.8s var(--ease-quart);
}
:global(picture) {
width: 100%;
height: auto;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: opacity 1s var(--ease-quart);
:global(img) {
display: block;
width: 100%;
height: auto;
user-select: none;
pointer-events: none;
}
}
$opacity-off: 0.2;
// States
:global(.is-disabled) {
opacity: $opacity-off;
}
:global(.is-hovered picture) {
opacity: 1;
}
:global(.is-hovered picture:not(.is-disabled)) {
opacity: $opacity-off;
}
// Mask
&:before {
content: "";
display: block;
position: absolute;
z-index: 2;
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));
pointer-events: none;
}
}
/*
** Bottom
*/
&__bottom {
@include bp (sm) {
margin-top: calc(-1 * clamp(160px, 14vw, 240px));
}
// Modules
.grid-modules {
@include bp (sm) {
grid-column: 2 / span calc(var(--columns) - 2);
}
}
}
// Interest
&__interest {
position: relative;
z-index: 2;
background: $color-primary-tertiary20;
border-radius: 12px;
box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
@include bp (sm) {
grid-column: 2 / span calc(var(--columns) - 2);
margin-bottom: 48px;
padding: 120px 0;
}
h2 {
grid-column: span var(--columns);
margin-bottom: 56px;
color: #fff;
text-align: center;
@include bp (sm) {
margin-bottom: 88px;
}
}
.blocks {
@include bp (sm) {
grid-column: 4 / span calc(var(--columns) - 6);
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 11.5%;
}
}
.block {
text-align: center;
h3 {
margin-bottom: 12px;
color: $color-secondary-light;
font-weight: 600;
}
p {
margin-bottom: 32px;
font-weight: 300;
}
}
}
}

12
src/style/tools/_helpers.scss
View File

@@ -17,4 +17,16 @@
@include bp (sm) {
padding: 0;
}
}
// Wide wrap (close to sides)
.container-wide {
--sides: 16px;
width: calc(100% - var(--sides));
max-width: var(--container-width);
margin: 0 auto;
@include bp (sm) {
--sides: 24px;
}
}