feat: split out period music pages + nav improvements

src/pages/main/music/periods/this-month.html

@@ -0,0 +1,34 @@
+---
+title: This month
+description: This is everything I've been listening to this month — it's collected in a database as I listen to it and displayed here.
+layout: default
+permalink: "/music/this-month/index.html"
+updated: "now"
+image: music.month.artists[0].image
+schema: music-period
+---
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong> this month and most of what I've listened to has been {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-month/">artists</a>, <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month.</p>
+<hr class="large-spacing" />
+<a class="link-icon flex-centered" href="/music/artists/this-month">
+  <h2 id="artists" class="section-header no-top-margin flex-centered">
+    {% tablericon "microphone-2" "Artists" %}
+    Artists
+  </h2>
+</a>
+{% render "partials/media/grid.liquid", data:music.month.artists, shape: "square", count: 8, loading: "eager" %}
+<a class="link-icon flex-centered" href="/music/albums/this-month">
+  <h2 id="albums" class="section-header reduced-margin flex-centered">
+    {% tablericon "vinyl" "Albums" %}
+    Albums
+  </h2>
+</a>
+{% render "partials/media/grid.liquid", data:music.month.albums, shape: "square", count: 8 %}
+<a class="link-icon flex-centered" href="/music/tracks/this-month">
+  <h2 id="tracks" class="section-header reduced-margin flex-centered">
+    {% tablericon "playlist" "Tracks" %}
+    Tracks
+  </h2>
+</a>
+{% render "partials/media/music/chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays, count: 10 %}