add logo animation

This commit is contained in:
isUnknown 2024-08-28 12:15:41 +02:00
parent 1ab84c2ea5
commit 5587ea1e7c
4 changed files with 33 additions and 2 deletions

View file

@ -37,6 +37,8 @@ body.progress * {
font-weight: normal;
transition: opacity 0.2s ease-in-out;
font-size: var(--font-size-h2);
transition: font-size 0.3s var(--curve-quick-slow);
line-height: 1;
}
.logo > * {
@ -45,6 +47,7 @@ body.progress * {
.logo > *:not(:first-child) {
margin-left: 2.4ch;
transition: margin 0.3s var(--curve-quick-slow);
}
.social-icons {

View file

@ -110,10 +110,29 @@
}
/* Main nav small */
.main-nav .logo {
line-height: 0.5;
}
.main-nav .logo__detail {
display: inline-block;
overflow: hidden;
max-width: 10rem;
height: 2.2rem;
line-height: 1;
transform: translateY(0.55rem);
margin-left: 0;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.main-nav--small .logo__detail {
opacity: 0;
max-width: 0;
height: 1.5rem;
pointer-events: none;
transform: translateY(0.4rem);
}
.main-nav--small .logo {
font-size: var(--font-size-m);
}
.main-nav--small .logo > *:not(:first-child) {