From a471de956677772a0c2d912f8faec45f326aa85d Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Fri, 16 Jan 2026 23:40:38 +0100
Subject: [PATCH] fix: milestone colors now correctly reflect position in 0-100
 gradient

---
 src/main.css | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/main.css b/src/main.css
index 957c104..6d59826 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1191,15 +1191,16 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
 	color: white;
 }
 
-/* Each milestone gets a portion of the gradient based on position */
-.milestone.reached:nth-child(1) { background: #9163b8; }
-.milestone.reached:nth-child(2) { background: linear-gradient(135deg, #9163b8, #a85dac); }
-.milestone.reached:nth-child(3) { background: linear-gradient(135deg, #9163b8, #d45aa0); }
-.milestone.reached:nth-child(4) { background: linear-gradient(135deg, #9163b8, #d45aa0, #e87aac); }
-.milestone.reached:nth-child(5) { background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8); }
-.milestone.reached:nth-child(6) { background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #4b8ecc); }
-.milestone.reached:nth-child(7) { background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #7c4dff); }
-.milestone.reached:nth-child(8) { background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #7c4dff); }
+/* Each milestone gets a color based on its position in 0-100 scale
+   Gradient: #9163b8 (0%) → #d45aa0 (33%) → #1aafb8 (67%) → #7c4dff (100%) */
+.milestone.reached:nth-child(1) { background: #9263b7; } /* 1% */
+.milestone.reached:nth-child(2) { background: #9a60b2; } /* 5% */
+.milestone.reached:nth-child(3) { background: #a85dac; } /* 10% */
+.milestone.reached:nth-child(4) { background: #c159a4; } /* 20% */
+.milestone.reached:nth-child(5) { background: #d45aa0; } /* 30% */
+.milestone.reached:nth-child(6) { background: #7785ac; } /* 50% */
+.milestone.reached:nth-child(7) { background: #3a9bd2; } /* 75% */
+.milestone.reached:nth-child(8) { background: #7c4dff; } /* 100% */
 
 .milestone.current {
 	color: white;