basic impl.; no websockets yet!

public/main.css

@@ -0,0 +1,87 @@
+:root {
+    --ticker-width: 600px;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', sans-serif;
+    background: #888;
+}
+
+#music-ticker {
+    /* width: fit-content; */
+    max-width: var(--ticker-width);
+    margin: 32px;
+    padding: 8px;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    border-radius: 8px;
+
+    &.outline {
+        border: 1px solid white;
+        outline: 1px solid black;
+    }
+
+    .artwork-container {
+        width: 64px;
+        min-width: 64px;
+        height: 64px;
+        border-radius: 4px;
+        overflow: hidden;
+
+        img {
+            width: 100%;
+            height: 100%;
+            display: block;
+            object-fit: cover;
+        }
+    }
+
+    #metadata {
+        min-width: 0;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        color: #fff;
+        text-shadow: 1px 1px 0 #000a;
+        overflow-x: clip;
+    }
+
+    h1 {
+        width: fit-content;
+        min-width: 0;
+        margin: -2px 0;
+        overflow-x: hidden;
+        white-space: nowrap;
+        font-size: 30px;
+    }
+
+    p {
+        width: fit-content;
+        min-width: 0;
+        margin: -2px 0;
+        overflow-x: hidden;
+        white-space: nowrap;
+        font-size: 22px;
+        font-weight: 600;
+    }
+
+    .marquee {
+        animation: 20s ease-in-out infinite marquee;
+    }
+}
+
+@keyframes marquee {
+    20% {
+        transform: translateX(0);
+    }
+    60% {
+        transform: translateX(calc(-100% + var(--ticker-width) - 74px));
+    }
+    80% {
+        transform: translateX(calc(-100% + var(--ticker-width) - 74px));
+    }
+}