From 40a873a354680adb139895d919f5122d223a96e9 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Mon, 15 Apr 2024 12:54:54 -0700
Subject: [PATCH] chore: refactor track chart styles
---
package.json | 2 +-
src/_includes/partials/now/track-chart.liquid | 12 +-
.../partials/now/tracks-recent.liquid | 12 +-
src/assets/styles/components/track-chart.css | 159 +++++++++---------
4 files changed, 91 insertions(+), 94 deletions(-)
diff --git a/package.json b/package.json
index 3ab2af35..31e48d6e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "coryd.dev",
- "version": "11.0.1",
+ "version": "11.1.1",
"description": "The source for my personal site. Built using 11ty.",
"type": "module",
"scripts": {
diff --git a/src/_includes/partials/now/track-chart.liquid b/src/_includes/partials/now/track-chart.liquid
index 8e403f2c..60425238 100644
--- a/src/_includes/partials/now/track-chart.liquid
+++ b/src/_includes/partials/now/track-chart.liquid
@@ -2,12 +2,12 @@
<div class="track__chart">
{% for item in data limit: 10 %}
{%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
- <div class="track__chart--item">
- <div class="track__chart--presentation">
- <div class="track__chart--count">{{ forloop.index }}.</div>
- <div class="track__chart--info">
- <div class="track__chart--title">{{ item.title }}</div>
- <div class="track__chart--artists">
+ <div class="item">
+ <div class="presentation">
+ <div class="count">{{ forloop.index }}.</div>
+ <div class="info">
+ <div class="title">{{ item.title }}</div>
+ <div class="artists">
<a href="{{ item.url }}">{{ item.artist }}</a> • {{ item.plays }} plays
</div>
</div>
diff --git a/src/_includes/partials/now/tracks-recent.liquid b/src/_includes/partials/now/tracks-recent.liquid
index 0ee102bc..3c6906bb 100644
--- a/src/_includes/partials/now/tracks-recent.liquid
+++ b/src/_includes/partials/now/tracks-recent.liquid
@@ -2,17 +2,17 @@
<div class="track__chart">
{% for item in data limit: 10 %}
{% capture alt %}{{ item.track }} by {{ item.track }}{% endcapture %}
- <div class="track__chart--item">
- <div class="track__chart--meta">
+ <div class="item">
+ <div class="meta">
{% image item.image, alt, '', 'lazy' %}
- <div class="track__chart--meta--text">
- <div class="track__chart--title">{{ item.track }}</div>
- <div class="track__chart--artists">
+ <div class="meta-text">
+ <div class="title">{{ item.track }}</div>
+ <div class="artists">
<a href="{{ item.url }}">{{ item.artist }}</a>
</div>
</div>
</div>
- <div class="track__chart--timestamp">
+ <div class="timestamp">
{{ item.timestamp | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}
</div>
</div>
diff --git a/src/assets/styles/components/track-chart.css b/src/assets/styles/components/track-chart.css
index f7d3144a..5cb2672e 100644
--- a/src/assets/styles/components/track-chart.css
+++ b/src/assets/styles/components/track-chart.css
@@ -1,91 +1,88 @@
-.track__chart--item {
- justify-content: space-between;
+.track__chart {
+ & .item {
+ justify-content: space-between;
- &:not(:last-of-type) {
- margin-bottom: var(--sizing-md);
+ &: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,
+ & .artists {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ & .artists,
+ & .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));
+ }
}
- & .progress-bar__wrapper {
- max-width: 40%;
- margin-left: var(--sizing-lg);
+ & .item,
+ & .meta {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
}
-.track__chart--item,
-.track__chart--meta {
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-.track__chart--presentation {
- display: flex;
- flex-direction: row;
- max-width: calc(60% - var(--sizing-lg));
-}
-
-.track__chart--count {
- margin-right: var(--sizing-sm);
-}
-
-.track__chart--info {
- max-width: calc(100% - var(--sizing-lg));
-}
-
-.track__chart--title {
- font-weight: var(--font-weight-bold);
-}
-
-.track__chart--title,
-.track__chart--artists {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-.track__chart--artists,
-.track__chart--timestamp {
- font-size: var(--font-size-sm);
- line-height: var(--line-height-sm);
-}
-
-.track__chart--timestamp {
- white-space: nowrap;
-}
-
-.track__chart--item {
- & 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);
- }
-}
-
-.track__chart--meta {
- justify-content: start;
- gap: var(--sizing-md);
- max-width: calc(70% - var(--sizing-lg));
-}
-
-.track__chart--meta--text {
- display: flex;
- flex-direction: column;
- justify-content: start;
- max-width: 80%;
-}
-
-.track__chart--timestamp {
- margin-left: var(--sizing-lg);
- text-align: right;
-}
-
@media screen and (min-width: 768px) {
- .track__chart--meta--text {
+ .track__chart .item .meta-text {
max-width: 85%;
}
}
\ No newline at end of file