Finish and animate About page

This commit is contained in:
2022-09-12 12:43:49 +02:00
parent 8251bd4b78
commit 6494e622ba
8 changed files with 234 additions and 200 deletions

View File

@@ -1,3 +1,15 @@
:global(.about) {
:global(.picture) {
overflow: hidden;
background: $color-primary-tertiary20;
border-radius: 8px;
@include bp (md) {
border-radius: 16px;
}
}
}
.about {
/*
** Introduction
@@ -86,12 +98,6 @@
// Figures
:global(picture) {
width: 100%;
border-radius: 8px;
overflow: hidden;
@include bp (md) {
border-radius: 16px;
}
:global(img) {
display: block;
@@ -239,14 +245,12 @@
background-color: $color-cream;
// Poster image
:global(picture) {
figure {
grid-column: 1 / -1;
height: 100vw;
max-height: 486px;
overflow: hidden;
margin-top: -64px;
margin-bottom: 72px;
border-radius: 8px;
@include bp (sm) {
grid-column: 3 / -6;
@@ -371,7 +375,7 @@
// Heading text
.heading {
max-width: 400px;
max-width: 280px;
margin-bottom: 40px;
@include bp (sm) {
@@ -403,6 +407,7 @@
li {
display: block;
margin: 4px 0;
overflow: hidden;
@include bp (sm) {
margin: 6px 0;
@@ -603,13 +608,24 @@
color: $color-secondary-light;
font-weight: 600;
}
p {
:global(.text) {
margin-bottom: 24px;
font-weight: 300;
@include bp (sm) {
margin-bottom: 32px;
}
:global(a) {
color: currentColor;
text-decoration: none;
border-bottom: 1px solid rgba($color-tertiary, 0.3);
transition: color 0.3s;
&:hover {
color: $color-secondary-light;
}
}
}
// Button