chore: cleanup

src/assets/styles/components/music-chart.css

@@ -0,0 +1,88 @@
+.music-chart {
+  & .item {
+    justify-content: space-between;
+
+    &:not(:last-of-type) {
+      margin-bottom: var(--sizing-md);
+    }
+
+    & .progress-bar__wrapper {
+      max-width: 40%;
+      margin-left: var(--sizing-lg);
+    }
+
+    & img {
+      border: 1px solid var(--accent-color);
+      border-radius: var(--rounded);
+    }
+
+    & img,
+    & picture {
+      width: calc(var(--sizing-3xl) * 1.5);
+      height: calc(var(--sizing-3xl) * 1.5);
+    }
+
+    & .meta {
+      justify-content: start;
+      gap: var(--sizing-md);
+      max-width: calc(70% - var(--sizing-lg));
+    }
+
+    & .meta-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      max-width: 80%;
+    }
+
+    & .title {
+      font-weight: var(--font-weight-bold);
+    }
+
+    & .title,
+    & .subtext {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    & .subtext,
+    & .timestamp {
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-sm);
+    }
+
+    & .timestamp {
+      margin-left: var(--sizing-lg);
+      text-align: right;
+      white-space: nowrap;
+    }
+
+    & .presentation {
+      display: flex;
+      flex-direction: row;
+      max-width: calc(60% - var(--sizing-lg));
+    }
+
+    & .count {
+      margin-right: var(--sizing-sm);
+    }
+
+    & .info {
+      max-width: calc(100% - var(--sizing-lg));
+    }
+  }
+
+  & .item,
+  & .meta {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .music-chart .item .meta-text {
+    max-width: 85%;
+  }
+}