diff --git a/src/content/index.md b/src/content/index.md index 0061163..781af73 100644 --- a/src/content/index.md +++ b/src/content/index.md @@ -20,6 +20,11 @@ Wir schaffen Zugang in die digitale Welt

Computer bekommen

+ + + + + diff --git a/src/styles/components/_actions.scss b/src/styles/components/_actions.scss index b6f8b29..04a83f0 100644 --- a/src/styles/components/_actions.scss +++ b/src/styles/components/_actions.scss @@ -76,7 +76,7 @@ flex-direction: row; justify-content: space-between; position: relative; - bottom: layout.$huge-gap; + margin-top: #{-1 * layout.$huge-gap}; } &:not(:first-of-type) { @@ -104,6 +104,10 @@ .emphasis { transition: motion.$gentle transform; + &.sun { + transform-origin: 50% 50%; + } + &.heart-left { transform-origin: top left; } @@ -161,6 +165,25 @@ } } + .sun { + $final-transformation: translateX(20%) translateY(10%) scale(3.4); + + @keyframes action-icon-sun { + 0% { + transform: none; + } + 50% { + transform: translateX(5%) translateY(10%) scale(1.7); + } + 100% { + transform: $final-transformation; + } + } + + transform: $final-transformation; + animation: motion.$gentle 0s 1 normal backwards running action-icon-sun; + } + .heart-left { $final-transformation: translateX(-0.8rem) translateY(1.4rem) scale(1.5) rotate(-25deg);