cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: refactor track chart styles

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-15 12:54:54 -07:00
parent e9cc1aa5c3
commit 40a873a354
No known key found for this signature in database
4 changed files with 91 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "11.0.1", "version": "11.1.1",
"description": "The source for my personal site. Built using 11ty.", "description": "The source for my personal site. Built using 11ty.",
"type": "module", "type": "module",
"scripts": { "scripts": {

12
src/_includes/partials/now/track-chart.liquid
View file

@ -2,12 +2,12 @@
<div class="track__chart"> <div class="track__chart">
{% for item in data limit: 10 %} {% for item in data limit: 10 %}
{%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%} {%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
<div class="track__chart--item"> <div class="item">
<div class="track__chart--presentation"> <div class="presentation">
<div class="track__chart--count">{{ forloop.index }}.</div> <div class="count">{{ forloop.index }}.</div>
<div class="track__chart--info"> <div class="info">
<div class="track__chart--title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<div class="track__chart--artists"> <div class="artists">
<a href="{{ item.url }}">{{ item.artist }}</a> • {{ item.plays }} plays <a href="{{ item.url }}">{{ item.artist }}</a> • {{ item.plays }} plays
</div> </div>
</div> </div>

12
src/_includes/partials/now/tracks-recent.liquid
View file

@ -2,17 +2,17 @@
<div class="track__chart"> <div class="track__chart">
{% for item in data limit: 10 %} {% for item in data limit: 10 %}
{% capture alt %}{{ item.track }} by {{ item.track }}{% endcapture %} {% capture alt %}{{ item.track }} by {{ item.track }}{% endcapture %}
<div class="track__chart--item"> <div class="item">
<div class="track__chart--meta"> <div class="meta">
{% image item.image, alt, '', 'lazy' %} {% image item.image, alt, '', 'lazy' %}
<div class="track__chart--meta--text"> <div class="meta-text">
<div class="track__chart--title">{{ item.track }}</div> <div class="title">{{ item.track }}</div>
<div class="track__chart--artists"> <div class="artists">
<a href="{{ item.url }}">{{ item.artist }}</a> <a href="{{ item.url }}">{{ item.artist }}</a>
</div> </div>
</div> </div>
</div> </div>
<div class="track__chart--timestamp"> <div class="timestamp">
{{ item.timestamp | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }} {{ item.timestamp | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}
</div> </div>
</div> </div>

159
src/assets/styles/components/track-chart.css
View file

@ -1,91 +1,88 @@
.track__chart--item { .track__chart {
justify-content: space-between; & .item {
justify-content: space-between;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: var(--sizing-md); 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 { & .item,
max-width: 40%; & .meta {
margin-left: var(--sizing-lg); 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) { @media screen and (min-width: 768px) {
.track__chart--meta--text { .track__chart .item .meta-text {
max-width: 85%; max-width: 85%;
} }
} }