diff --git a/src/components/preact/LBNowPlaying.tsx b/src/components/preact/LBNowPlaying.tsx
index 592d4ed..6c94a9d 100644
--- a/src/components/preact/LBNowPlaying.tsx
+++ b/src/components/preact/LBNowPlaying.tsx
@@ -84,7 +84,7 @@ export default function LBNowPlaying() {
return (
- {[content, content, content, content, content]}
+ {[content, content, content, content, content, content, content, content]}
)
}
diff --git a/src/styles/components/now_playing.scss b/src/styles/components/now_playing.scss
index b5d1c75..d5432ee 100644
--- a/src/styles/components/now_playing.scss
+++ b/src/styles/components/now_playing.scss
@@ -2,18 +2,21 @@ div#now-playing-wrapper {
background-color: var(--text-color);
color: var(--background-color);
font-family: var(--font-code);
- padding: 0.4em;
- line-height: 1.2;
+
overflow: hidden;
- white-space: nowrap;
width: 100%;
div#now-playing {
+ display: flex;
+ width: max-content;
animation: marquee 100s linear infinite;
- min-width: 100%;
span {
+ flex-shrink: 0;
+ padding: 0.4em;
+ line-height: 1.2;
white-space: nowrap;
+
a {
color: var(--background-color);
}
@@ -26,11 +29,11 @@ div#now-playing-wrapper {
}
@keyframes marquee {
- from {
+ 0% {
transform: translateX(0);
}
- to {
- transform: translateX(calc(-100%));
+ 100% {
+ transform: translateX(-50%);
}
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7decf45..a72043a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -4,6 +4,7 @@ body {
background-color: var(--background-color);
font-family: var(--font-body);
color: var(--text-color);
+ overflow-x: hidden;
}
main {
@@ -169,6 +170,7 @@ section#about {
gap: 2rem;
picture {
+ z-index: -1;
display: flex;
justify-content: end;
padding-right: 1vw;