From f1715ca8dc870a6c4d8c07c27ebfd2c439f8ca6f Mon Sep 17 00:00:00 2001
From: Hugo Locurcio <hugo.locurcio@hugo.pro>
Date: Thu, 27 Feb 2020 18:52:03 +0100
Subject: [PATCH] Make overall percentages tint towards green as they get
 closer to 100%

---
 layouts/index.html | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index 6acdd5b..00ab595 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -15,13 +15,11 @@
 
     <script>
       // Color percentages in the Overall column depending on completion.
-      // Lower completion percentages are highlighted with a red background.
+      // Lower completion percentages are highlighted with a red background,
+      // whereas higher completion percentages are highlighted with a green 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})`;
-        }
+        const percentage = Math.floor(td.innerText.substring(0, td.innerText.length - 1));
+        td.style.backgroundColor = `rgba(${255 - Math.floor(percentage * 2.55)}, ${Math.floor(percentage * 2.55)}, 0, 0.25)`;
       })
     </script>
   </body>