angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tweak logo animation

Browse source
This commit is contained in:
Yannik Rödel 2022-06-12 20:25:29 +02:00
parent 406824c122
commit be143ae1ed
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
styles/components/_site.scss
View file

@ -17,12 +17,13 @@
> .angestoepselt-logo { > .angestoepselt-logo {
height: 1em; height: 1em;
vertical-align: middle; vertical-align: middle;
transition: stroke motion.$subtle;
fill: none; fill: none;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
stroke-width: 4px; stroke-width: 4px;
stroke: colors.$gray-900; stroke: currentColor;
stroke-miterlimit: 10; stroke-miterlimit: 10;
.plug { .plug {
@ -35,6 +36,13 @@
} }
&:hover > .angestoepselt-logo { &:hover > .angestoepselt-logo {
stroke: currentColor;
.plug {
fill: colors.$yellow-500;
transition: fill #{0.5 * motion.$prominent-duration} motion.$prominent-timing;
}
@keyframes angestoepselt-logo-hover { @keyframes angestoepselt-logo-hover {
0% { 0% {
transform: none; transform: none;
@ -43,7 +51,7 @@
transform: translateX(0.6rem); transform: translateX(0.6rem);
} }
100% { 100% {
transform: translateX(-0.6rem); transform: translateX(-0.4rem);
} }
} }