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",
"version": "11.0.1",
"version": "11.1.1",
"description": "The source for my personal site. Built using 11ty.",
"type": "module",
"scripts": {

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

@ -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>

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

@ -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>

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

@ -1,4 +1,5 @@
.track__chart--item {
.track__chart {
& .item {
justify-content: space-between;
&:not(:last-of-type) {
@ -9,51 +10,7 @@
max-width: 40%;
margin-left: var(--sizing-lg);
}
}
.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);
@ -64,28 +21,68 @@
width: calc(var(--sizing-3xl) * 1.5);
height: calc(var(--sizing-3xl) * 1.5);
}
}
.track__chart--meta {
& .meta {
justify-content: start;
gap: var(--sizing-md);
max-width: calc(70% - var(--sizing-lg));
}
.track__chart--meta--text {
& .meta-text {
display: flex;
flex-direction: column;
justify-content: start;
max-width: 80%;
}
.track__chart--timestamp {
& .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));
}
}
& .item,
& .meta {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media screen and (min-width: 768px) {
.track__chart--meta--text {
.track__chart .item .meta-text {
max-width: 85%;
}
}