chore: track list styles

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.6.2",
+  "version": "19.6.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.6.2",
+      "version": "19.6.3",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
@@ -1149,9 +1149,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.811",
+      "version": "1.4.812",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.811.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.812.tgz",
-      "integrity": "sha512-CDyzcJ5XW78SHzsIOdn27z8J4ist8eaFLhdto2hSMSJQgsiwvbv2fbizcKUICryw1Wii1TI/FEkvzvJsR3awrA==",
+      "integrity": "sha512-7L8fC2Ey/b6SePDFKR2zHAy4mbdp1/38Yk5TsARO66W3hC5KEaeKMMHoxwtuH+jcu2AYLSn9QX04i95t6Fl1Hg==",
       "dev": true,
       "license": "ISC"
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "19.6.2",
+  "version": "19.6.3",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

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 %}
+  <ol type="1">
-    {%- assign playTotal = playTotal | default: mostPlayed -%}
+    {% for item in items limit: count | default: items.size %}
-    {%- assign percentage = item.plays | calculatePlayPercentage: playTotal -%}
+      {%- assign playTotal = playTotal | default: mostPlayed -%}
-    <div class="item">
+      {%- assign percentage = item.plays | calculatePlayPercentage: playTotal -%}
-      <div class="presentation">
+      <li value="{{ item.rank }}">
-        <div class="count">{{ item.rank | formatNumber }}.</div>
+        <div class="item">
-        <div class="info">
+          <div class="presentation">
-          <div class="title">
+            <div class="info">
-            <a href="{{ item.url }}">{{ item.title }}</a>
+              <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 %}
+          {% render "partials/media/progress-bar.liquid", percentage:percentage %}
-            {% if item.plays > 1 %}
-              plays
-            {% else %}
-              play
-            {% endif %}
-          {% endcapture %}
-          <div class="subtext">{{ item.artist }}</div>
-          <div class="subtext">{{ item.plays }} {{ playsLabel }}</div>
         </div>
-      </div>
+      </li>
-      {% render "partials/media/progress-bar.liquid", percentage:percentage %}
+    {% endfor %}
-    </div>
+  </ol>
-  {% endfor %}
 </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));