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;