chore: track list styles

src/_includes/partials/media/music/chart.liquid

@@ -1,29 +1,32 @@
 <div class="music-chart">
   {% assign items = data.items | default: data %}
-  {% for item in items limit: count | default: items.size %}
-    {%- assign playTotal = playTotal | default: mostPlayed -%}
-    {%- assign percentage = item.plays | calculatePlayPercentage: playTotal -%}
-    <div class="item">
-      <div class="presentation">
-        <div class="count">{{ item.rank | formatNumber }}.</div>
-        <div class="info">
-          <div class="title">
-            <a href="{{ item.url }}">{{ item.title }}</a>
+  <ol type="1">
+    {% for item in items limit: count | default: items.size %}
+      {%- assign playTotal = playTotal | default: mostPlayed -%}
+      {%- assign percentage = item.plays | calculatePlayPercentage: playTotal -%}
+      <li value="{{ item.rank }}">
+        <div class="item">
+          <div class="presentation">
+            <div class="info">
+              <div class="title">
+                <a href="{{ item.url }}">{{ item.title }}</a>
+              </div>
+              {% capture playsLabel %}
+                {% if item.plays > 1 %}
+                  plays
+                {% else %}
+                  play
+                {% endif %}
+              {% endcapture %}
+              <div class="subtext">{{ item.artist }}</div>
+              <div class="subtext">{{ item.plays }} {{ playsLabel }}</div>
+            </div>
           </div>
-          {% capture playsLabel %}
-            {% if item.plays > 1 %}
-              plays
-            {% else %}
-              play
-            {% endif %}
-          {% endcapture %}
-          <div class="subtext">{{ item.artist }}</div>
-          <div class="subtext">{{ item.plays }} {{ playsLabel }}</div>
+          {% render "partials/media/progress-bar.liquid", percentage:percentage %}
         </div>
-      </div>
-      {% render "partials/media/progress-bar.liquid", percentage:percentage %}
-    </div>
-  {% endfor %}
+      </li>
+    {% endfor %}
+  </ol>
 </div>
 {% unless count %}
   {% render "partials/widgets/paginator.liquid", pagination:data %}

src/assets/styles/base/index.css

@@ -139,7 +139,8 @@ a {
     flex-direction: row;
     align-items: center;
 
-    & + .page-header {
+    & + .page-header,
+    & + .music-chart {
       margin-top: var(--sizing-base);
     }
   }

src/assets/styles/components/menu.css

@@ -1,7 +1,7 @@
 .menu-primary {
   display: flex;
   flex-direction: row;
-  list-style-type: none;
+  list-style: none;
   margin: 0;
   padding: 0;
   gap: var(--sizing-md);

src/assets/styles/components/music-chart.css

@@ -1,6 +1,15 @@
 .music-chart {
   margin-bottom: var(--sizing-base);
 
+  & ol {
+    padding-left: 0;
+    margin-top: 0;
+
+    & li:first-of-type {
+      margin-top: 0;
+    }
+  }
+
   & .item {
     display: flex;
     flex-direction: row;
@@ -76,10 +85,6 @@
       white-space: nowrap;
     }
 
-    & .count {
-      margin-right: var(--sizing-sm);
-    }
-
     & .info {
       max-width: calc(75% - var(--sizing-lg));
     }
@@ -110,6 +115,10 @@
 
 @media screen and (min-width: 768px) {
   .music-chart {
+    & ol {
+      list-style-position: outside;
+    }
+
     & .meta,
     & .presentation {
       width: calc(80% - var(--sizing-lg));