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

Add site logo animation

Browse source
This commit is contained in:
Yannik Rödel 2022-06-12 19:45:25 +02:00
parent 7ce08acaea
commit fd15c34948
2 changed files with 46 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
styles/components/_site.scss
View file

@ -1,5 +1,6 @@
@use '../lib/colors'; @use '../lib/colors';
@use '../lib/layout'; @use '../lib/layout';
@use '../lib/motion';
@use '../lib/typography'; @use '../lib/typography';
@mixin header-item { @mixin header-item {
@ -12,6 +13,48 @@
.site-logo { .site-logo {
margin: 0 layout.$large-gap; margin: 0 layout.$large-gap;
text-transform: lowercase; text-transform: lowercase;
> .angestoepselt-logo {
height: 1em;
vertical-align: middle;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 4px;
stroke: colors.$gray-900;
stroke-miterlimit: 10;
.plug {
fill: colors.$teal-500;
}
+ span {
display: inline-block;
}
}
&:hover > .angestoepselt-logo {
@keyframes angestoepselt-logo-hover {
0% {
transform: none;
}
50% {
transform: translateX(0.6rem);
}
100% {
transform: translateX(-0.6rem);
}
}
animation: angestoepselt-logo-hover motion.$prominent forwards;
+ span {
transform-origin: 100% 50%;
transition: transform #{0.5 * motion.$prominent-duration} motion.$prominent-timing #{0.5 * motion.$prominent-duration};
transform: scale(1.1);
}
}
} }
// The navigation is present twice on the site: once in the header and once in // The navigation is present twice on the site: once in the header and once in

4
styles/lib/_motion.scss
View file

@ -1,4 +1,6 @@
$subtle: 0.1s cubic-bezier(0.56, 0.03, 0.35, 0.9); $subtle: 0.1s cubic-bezier(0.56, 0.03, 0.35, 0.9);
$gentle: 0.2s cubic-bezier(1, 0.11, 0.41, 0.69); $gentle: 0.2s cubic-bezier(1, 0.11, 0.41, 0.69);
$prominent: 0.7s cubic-bezier(0.45, 0.16, 0.38, 0.7); $prominent-duration: 0.7s;
$prominent-timing: cubic-bezier(0.45, 0.16, 0.38, 0.7);
$prominent: $prominent-duration $prominent-timing;
$background: 8s cubic-bezier(0.45, 0.16, 0.38, 0.7); $background: 8s cubic-bezier(0.45, 0.16, 0.38, 0.7);