✨ Finish About page
Add entering and scroll animations
This commit is contained in:
@@ -1,21 +1,159 @@
|
||||
.about {
|
||||
/*
|
||||
** Introduction
|
||||
*/
|
||||
&__introduction {
|
||||
:global(picture) {
|
||||
overflow: hidden;
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// First photo
|
||||
.photo-first {
|
||||
--rotate: -3deg;
|
||||
$offset: 32px;
|
||||
grid-column: 1 / -2;
|
||||
grid-row: 1;
|
||||
margin-left: -$offset;
|
||||
transform: rotate(var(--rotate)) translateZ(0);
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / -6;
|
||||
}
|
||||
@include bp (md) {
|
||||
grid-column: 4 / span 12;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
:global(picture) {
|
||||
border-radius: clamp(8px, 1vw, 16px);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
width: 75%;
|
||||
max-width: 250px;
|
||||
margin-top: 12px;
|
||||
margin-left: $offset;
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
|
||||
@include bp (mob-lg) {
|
||||
max-width: 400px;
|
||||
}
|
||||
@include bp (sm) {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Portrait
|
||||
.photo-us {
|
||||
position: relative;
|
||||
grid-row: 1;
|
||||
z-index: 2;
|
||||
grid-column: 6 / -1;
|
||||
margin-top: clamp(56px, 12vw, 120px);
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 18 / -1;
|
||||
}
|
||||
@include bp (md) {
|
||||
grid-column: 16 / span 4;
|
||||
margin-top: clamp(56px, 7vw, 112px);
|
||||
}
|
||||
|
||||
:global(picture) {
|
||||
overflow: hidden;
|
||||
border-radius: clamp(6px, 1vw, 12px);
|
||||
transform: translate3d(clamp(32px, 3vw, 56px), 0, 0);
|
||||
|
||||
@include bp (md) {
|
||||
transform: translate3d(calc(-1 * clamp(32px, 3vw, 56px)), 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text
|
||||
.text {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
color: $color-tertiary;
|
||||
margin-top: 48px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 96px;
|
||||
grid-column: 3 / -3;
|
||||
}
|
||||
@include bp (md) {
|
||||
grid-column: 17 / span 7;
|
||||
// max-width: 420px;
|
||||
margin-top: calc(-1 * clamp(80px, 8vw, 120px));
|
||||
}
|
||||
|
||||
:global(img) {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
margin-right: 4px;
|
||||
margin-left: 8px;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
:global(a) {
|
||||
display: inline-block;
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
:global(strong) {
|
||||
color: $color-secondary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
:global(strong) {
|
||||
font-weight: normal;
|
||||
padding-bottom: 2px;
|
||||
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.4s var(--ease-quart);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Purpose
|
||||
*/
|
||||
&__purpose {
|
||||
margin-top: 72px;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.container-wide {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: calc(100vh - var(--sides));
|
||||
height: calc(100vh - var(--sides));
|
||||
max-height: 720px;
|
||||
color: #fff;
|
||||
padding: 0 8%;
|
||||
|
||||
@include bp (sm) {
|
||||
padding: 0 18%;
|
||||
min-height: calc(100vh - var(--sides));
|
||||
max-height: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,17 +177,49 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
background-color: $color-primary-tertiary20;
|
||||
border-radius: 8px;
|
||||
border-radius: 0px;
|
||||
transform: scale(1.15) translateZ(0);
|
||||
transition-property: opacity, transform;
|
||||
transition-duration: 3s;
|
||||
transition-timing-function: var(--ease-quart);
|
||||
transition-property: opacity, transform, border-radius;
|
||||
transition-delay: 0.25s;
|
||||
|
||||
@include bp (sm) {
|
||||
border-radius: 16px;
|
||||
&, &__illustration img {
|
||||
transition-duration: 2.5s;
|
||||
transition-timing-function: var(--ease-quart);
|
||||
}
|
||||
|
||||
// Illustration
|
||||
&__illustration {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.75;
|
||||
$mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 62.5%);
|
||||
-webkit-mask-image: $mask;
|
||||
mask-image: $mask;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
bottom: 60%;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transition-delay: 0.6s;
|
||||
|
||||
@include bp (md) {
|
||||
bottom: 50%;
|
||||
}
|
||||
@include bp (sd) {
|
||||
bottom: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,12 +230,21 @@
|
||||
opacity: 1;
|
||||
|
||||
:global(strong) {
|
||||
color: $color-secondary-light;
|
||||
color: darken($color-secondary-light, 4);
|
||||
}
|
||||
}
|
||||
.background {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateZ(0);
|
||||
border-radius: 8px;
|
||||
|
||||
@include bp (sm) {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
&__illustration img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -77,6 +256,7 @@
|
||||
&__process {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 72px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin: 128px 0 0;
|
||||
|
||||
Reference in New Issue
Block a user