Color completion percentages' backgrounds dynamically

This makes for easier visual grepping.
2026-01-05 14:10:01 +03:00 · 2020-02-26 22:04:10 +01:00
parent a0712e78f0
commit ba82f1edb5
1 changed files with 12 additions and 0 deletions
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -12,5 +12,17 @@
  </head>
  <body>
    {{ .Content }}
+
+    <script>
+      // Color percentages in the Overall column depending on completion.
+      // Lower completion percentages are highlighted with a red background.
+      document.querySelectorAll('td:nth-child(9)').forEach(td => {
+        const percentage = td.innerText.substring(0, td.innerText.length - 1);
+
+        if (percentage < 100) {
+          td.style.backgroundColor = `hsla(0, 100%, 50%, ${0.334 - percentage / 300.0})`;
+        }
+      })
+    </script>
  </body>
 </html>