feat: artist and album pages
This commit is contained in:
Cory Dransfeldt
parent
af386bbae2
commit
bbdea40f7e
6 changed files with 136 additions and 14 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "11.3.11",
|
||||
"version": "11.4.11",
|
||||
"description": "The source for my personal site. Built using 11ty.",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -7,10 +7,12 @@ layout: default
|
|||
<script>{{ js }}</script>
|
||||
{{ content }}
|
||||
<div class="now-header-wrapper">
|
||||
<a class="linked-header" href="/artists">
|
||||
<h2 id="artists" class="now-header flex-centered">
|
||||
{% tablericon "microphone-2" "Artists" %}
|
||||
Artists
|
||||
</h2>
|
||||
</a>
|
||||
<div class="now-header-buttons client-side">
|
||||
<button class="small active" data-toggle="artists-window">This week</button>
|
||||
<button class="small secondary" data-toggle="artists-month">This month</button>
|
||||
|
|
@ -31,10 +33,12 @@ layout: default
|
|||
{% render "partials/now/media-grid.liquid", data:musicCharts.year.artists, shape: "square", count: 8 %}
|
||||
</div>
|
||||
<div class="now-header-wrapper">
|
||||
<a class="linked-header" href="/albums">
|
||||
<h2 id="albums" class="now-header flex-centered">
|
||||
{% tablericon "vinyl" "Albums" %}
|
||||
Albums
|
||||
</h2>
|
||||
</a>
|
||||
<div class="now-header-buttons client-side">
|
||||
<button class="small active" data-toggle="albums-window">This week</button>
|
||||
<button class="small secondary" data-toggle="albums-month">This month</button>
|
||||
|
|
|
|||
37
src/albums.html
Normal file
37
src/albums.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
title: Albums
|
||||
layout: default
|
||||
description: "See my top albums."
|
||||
pagination:
|
||||
data: musicCharts.year.albums
|
||||
size: 30
|
||||
---
|
||||
<a class="linked-header" href="/now#albums">
|
||||
<h2 class="page-header flex-centered">
|
||||
{% tablericon "vinyl" "Albums" %}
|
||||
{{ title }}
|
||||
</h2>
|
||||
</a>
|
||||
|
||||
<p>These are my top albums for the past year or so — running backwards from when my site rebuilt itself (likely in the past hour or so).</p>
|
||||
|
||||
<div class="music-chart grid">
|
||||
{% for item in pagination.items %}
|
||||
{% capture alt %}{{ item.plays }} of {{ item.artist }}{% endcapture %}
|
||||
<div class="item">
|
||||
<div class="meta">
|
||||
{% image item.image, alt, '', 'lazy' %}
|
||||
<div class="meta-text">
|
||||
<div class="title">
|
||||
<a href="{{ item.url }}">{{ item.title }}</a>
|
||||
</div>
|
||||
<div class="subtext">
|
||||
<p>{{ item.artist }}</p>
|
||||
<p>{{ item.plays }} plays</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/paginator.liquid", pagination:pagination %}
|
||||
36
src/artists.html
Normal file
36
src/artists.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
title: Artists
|
||||
layout: default
|
||||
description: "See my top artists."
|
||||
pagination:
|
||||
data: musicCharts.year.artists
|
||||
size: 30
|
||||
---
|
||||
<a class="linked-header" href="/now#artists">
|
||||
<h2 class="page-header flex-centered">
|
||||
{% tablericon "microphone-2" "Artists" %}
|
||||
{{ title }}
|
||||
</h2>
|
||||
</a>
|
||||
|
||||
<p>These are my top artists for the past year or so — running backwards from when my site rebuilt itself (likely in the past hour or so).</p>
|
||||
|
||||
<div class="music-chart grid">
|
||||
{% for item in pagination.items %}
|
||||
{% capture alt %}{{ item.plays }} of {{ item.artist }}{% endcapture %}
|
||||
<div class="item">
|
||||
<div class="meta">
|
||||
{% image item.image, alt, '', 'lazy' %}
|
||||
<div class="meta-text">
|
||||
<div class="title">
|
||||
<a href="{{ item.url }}">{{ item.title }}</a>
|
||||
</div>
|
||||
<div class="subtext">
|
||||
{{ item.plays }} plays
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% render "partials/paginator.liquid", pagination:pagination %}
|
||||
|
|
@ -72,6 +72,14 @@ blockquote {
|
|||
stroke-width: var(--stroke-width-bold) !important;
|
||||
}
|
||||
|
||||
a.linked-header {
|
||||
display: flex;
|
||||
|
||||
& svg {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
sup.footnote-ref {
|
||||
line-height: var(--line-height-xs);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,8 @@
|
|||
}
|
||||
|
||||
& .title,
|
||||
& .subtext {
|
||||
& .subtext,
|
||||
& .subtext p {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
@ -48,8 +49,8 @@
|
|||
|
||||
& .subtext,
|
||||
& .timestamp {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-xs);
|
||||
}
|
||||
|
||||
& .timestamp {
|
||||
|
|
@ -79,10 +80,46 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.grid {
|
||||
display: grid;
|
||||
gap: var(--sizing-sm);
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
margin-bottom: var(--sizing-base);
|
||||
|
||||
& .item {
|
||||
& .meta {
|
||||
max-width: 80%;
|
||||
|
||||
& .title {
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
|
||||
& .subtext p {
|
||||
margin: 0;
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.music-chart .item .meta-text {
|
||||
.music-chart {
|
||||
& .item .meta-text {
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
&.grid {
|
||||
grid-template-columns: repeat(3,minmax(0,1fr));
|
||||
|
||||
& .item {
|
||||
& img,
|
||||
& picture {
|
||||
width: calc(var(--sizing-3xl) * 2);
|
||||
height: calc(var(--sizing-3xl) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in a new issue