add logo animation
This commit is contained in:
parent
1ab84c2ea5
commit
5587ea1e7c
4 changed files with 33 additions and 2 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue