From 0afd27d4d28e5b2a9ef50e2775d69a67f0225aab Mon Sep 17 00:00:00 2001
From: Josue Zamudio <josuezamudio1@gmail.com>
Date: Wed, 26 Aug 2026 19:14:00 +0000
Subject: [PATCH] Stats: match GitHub's contribution-graph look

- GitHub's green scale (#0e4429 -> #39d353) instead of the orange
  accent-mix
- Mon/Wed/Fri row labels down the left (right-aligned, muted),
  month-label row offset to line up with the grid
- legend right-aligned under the grid
---
 static/app.js    |  6 +++++-
 static/style.css | 17 +++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/static/app.js b/static/app.js
index 7496ef4..3a4d178 100644
--- a/static/app.js
+++ b/static/app.js
@@ -487,6 +487,10 @@ function heatMap(byDay, days) {
               "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   const grid = el("div", "heat");
   const lbl = el("div", "heat-lbl");
+  const dcol = el("div", "heat-days");
+  for (const t of ["Mon", "", "Wed", "", "Fri", "", ""]) dcol.append(el("span", null, t));
+  const row = el("div", "heat-row");
+  row.append(dcol, grid);
   let lastM = -1;
   for (let d = new Date(start); d <= today; ) {
     const col = el("div", "heat-col");
@@ -523,7 +527,7 @@ function heatMap(byDay, days) {
     lg.append(s);
   }
   lg.append(el("span", "muted", "more"));
-  return [lbl, grid, lg];
+  return [lbl, row, lg];
 }
 
 function heatSection() {
diff --git a/static/style.css b/static/style.css
index f4c5812..fd99004 100644
--- a/static/style.css
+++ b/static/style.css
@@ -58,18 +58,23 @@ h2 { margin: 0.4rem 0; }
 .stat-value { font-size: 1.3rem; font-weight: 700; }
 .heat-wrap { overflow-x: auto; margin: .5rem 0 .3rem; background: var(--card);
   border: 1px solid var(--bd); border-radius: 10px; padding: .7rem .8rem .5rem; }
-.heat-lbl { display: flex; gap: 3px; margin-bottom: 2px; height: 12px; }
+.heat-lbl { display: flex; gap: 3px; margin-bottom: 2px; height: 12px; margin-left: 32px; }
 .heat-lbl .heat-lab { width: 11px; min-width: 0; font-size: .65rem;
   color: var(--muted); white-space: nowrap; }
+.heat-row { display: flex; }
+.heat-days { display: flex; flex-direction: column; gap: 3px; margin-right: 6px; }
+.heat-days span { width: 26px; height: 11px; line-height: 11px; text-align: right;
+  font-size: .65rem; color: var(--muted); }
 .heat { display: flex; gap: 3px; }
 .heat-col { display: flex; flex-direction: column; gap: 3px; }
 .heat i, .heat-lg i { width: 11px; height: 11px; border-radius: 2px; background: var(--bd); }
 .heat i.none { background: transparent; }
-.heat i.l1, .heat-lg i.l1 { background: color-mix(in srgb, var(--acc) 30%, var(--bd)); }
-.heat i.l2, .heat-lg i.l2 { background: color-mix(in srgb, var(--acc) 55%, var(--bd)); }
-.heat i.l3, .heat-lg i.l3 { background: color-mix(in srgb, var(--acc) 78%, var(--bd)); }
-.heat i.l4, .heat-lg i.l4 { background: var(--acc); }
-.heat-lg { display: flex; align-items: center; gap: 3px; font-size: .75rem; color: var(--muted); }
+.heat i.l1, .heat-lg i.l1 { background: #0e4429; }
+.heat i.l2, .heat-lg i.l2 { background: #006d32; }
+.heat i.l3, .heat-lg i.l3 { background: #26a641; }
+.heat i.l4, .heat-lg i.l4 { background: #39d353; }
+.heat-lg { display: flex; align-items: center; justify-content: flex-end; gap: 3px;
+  font-size: .75rem; color: var(--muted); margin-top: .5rem; }
 .chip { font-size: .7rem; padding: .1rem .5rem; border-radius: 99px; border: 1px solid var(--bd);
   color: var(--muted); white-space: nowrap; }
 .chip.on { color: var(--acc); border-color: var(--acc); }