From ccbbb75ce2c092f6fb2634045e448f658bbc0058 Mon Sep 17 00:00:00 2001
From: Hugo Locurcio <hugo.locurcio@hugo.pro>
Date: Thu, 27 Feb 2020 18:56:32 +0100
Subject: [PATCH] Tweak the overall percentage color algorithm for better
 usability

Only fully completed documentations will now have a green background.
The old algorithm is used again for incomplete documentations.
---
 layouts/index.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index 00ab595..065df4b 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -15,11 +15,16 @@
 
     <script>
       // Color percentages in the Overall column depending on completion.
-      // Lower completion percentages are highlighted with a red background,
-      // whereas higher completion percentages are highlighted with a green background.
+      // Fully completed documentations are highlighted with a green background.
+      // Incomplete documentations have a red background whose opacity depends on the
+      // percentage (lower is more opaque).
       document.querySelectorAll('td:nth-child(9)').forEach(td => {
         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)`;
+        if (percentage === 100) {
+          td.style.backgroundColor = 'hsla(120, 100%, 50%, 0.25)';
+        } else {
+          td.style.backgroundColor = `hsla(0, 100%, 50%, ${0.334 - percentage / 300.0})`
+        }
       })
     </script>
   </body>