feat: dedicated music page(s); pagination fixes; nav + color updates; assorted updates

src/_includes/now.liquid

@@ -1,29 +0,0 @@
----
-layout: default
----
-{{ content }}
-<a class="link-icon flex-centered" href="/books">
-  <h2 id="books" class="section-header flex-centered">
-    {% tablericon "books" "Books" %}
-    Books
-  </h2>
-</a>
-{% assign bookData = books | bookStatus: 'started' | reverse %}
-{% render "partials/now/media-grid.liquid", data:bookData, shape: "vertical", count: 6 %}
-{% render "partials/widgets/recent-links.liquid", links:collections.links %}
-<a class="link-icon flex-centered" href="/watching#movies">
-  <h2 id="movies" class="section-header flex-centered">
-    {% tablericon "movie" "Movies" %}
-    Movies
-  </h2>
-</a>
-{% render "partials/now/media-grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %}
-<a class="link-icon flex-centered" href="/watching#tv">
-  <h2 id="tv" class="section-header flex-centered">
-    {% tablericon "device-tv" "TV" %}
-    TV
-  </h2>
-</a>
-{% render "partials/now/media-grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %}
-<p class="now-explainer text-small text-centered">This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.</p>
-<p class="text-small text-centered"><em>This page was last updated on {{ "now"  | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}.</em></p>

src/_includes/partials/now/track-chart.liquid

@@ -4,7 +4,7 @@
   {%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
   <div class="item">
     <div class="presentation">
-      <div class="count">{{ forloop.index }}.</div>
+      <div class="count">{{ item.rank | formatNumber }}.</div>
       <div class="info">
         <div class="title">
           <a href="{{ item.url }}">{{ item.title }}</a>