add and animate info banner

This commit is contained in:
isUnknown 2024-09-03 14:18:49 +02:00
parent 2aceb888d2
commit 99b1c2b5f5
6 changed files with 85 additions and 4 deletions

View file

@ -1,3 +1,30 @@
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(0px - ((100% / 3) - var(--space-m) / 1.6)));
}
}
.info-banner {
overflow: hidden;
white-space: nowrap;
}
.info-banner ul {
box-sizing: border-box;
padding: 1rem var(--space-m);
background-color: var(--color-salmon);
display: inline-block;
animation: scroll-left 12s linear infinite;
}
.info-banner li {
display: inline-block;
padding-right: 6vw;
}
.main-header {
position: sticky;
top: 0;