Fix calendar activity heatmap in preview and generation

This commit is contained in:
2026-07-20 19:56:18 +02:00
parent 5726b92c5d
commit 3795db76b0
5 changed files with 71 additions and 20 deletions

View File

@@ -49,14 +49,20 @@ main { display: grid; gap: 1rem; }
[data-blog-calendar-root] [data-vc-week-day] { font-size: .68rem; line-height: .9rem; min-width: 1.45rem; }
[data-blog-calendar-root] [data-vc-date] { padding-top: 0; padding-bottom: 0; }
[data-blog-calendar-root] [data-vc-date-btn] { min-height: 1.45rem; min-width: 1.45rem; font-size: .68rem; line-height: .9rem; }
[data-blog-calendar-has-posts='true'] [data-vc-date-btn] {
border-color: hsl(var(--blog-calendar-heat-hue, 210) 85% 42% / .95);
background-color: hsl(var(--blog-calendar-heat-hue, 210) 88% 52% / var(--blog-calendar-heat-alpha, 0));
[data-blog-calendar-root] [data-vc-date]:not([data-blog-calendar-has-posts='true']) [data-vc-date-btn],
[data-blog-calendar-root] [data-vc-months-month]:not([data-blog-calendar-has-posts='true']),
[data-blog-calendar-root] [data-vc-years-year]:not([data-blog-calendar-has-posts='true']) {
background-color: transparent !important;
border-color: transparent !important;
}
[data-blog-calendar-root] [data-vc-date][data-blog-calendar-has-posts='true'] [data-vc-date-btn] {
background-color: color-mix(in srgb, var(--pico-primary, #0172ad) var(--blog-calendar-heat-strength, 0%), transparent) !important;
border-color: var(--pico-primary, #0172ad) !important;
}
[data-blog-calendar-root] [data-vc-months-month][data-blog-calendar-has-posts='true'],
[data-blog-calendar-root] [data-vc-years-year][data-blog-calendar-has-posts='true'] {
background-color: hsl(var(--blog-calendar-heat-hue, 210) 88% 52% / var(--blog-calendar-heat-alpha, 0));
border-color: hsl(var(--blog-calendar-heat-hue, 210) 85% 42% / .95);
background-color: color-mix(in srgb, var(--pico-primary, #0172ad) var(--blog-calendar-heat-strength, 0%), transparent) !important;
border-color: var(--pico-primary, #0172ad) !important;
}
.post { border: 1px solid var(--pico-muted-border-color, var(--muted-border-color)); padding: 1rem; background: var(--pico-card-background-color, var(--card-background-color)); min-width: 0; }
.post pre { position: relative; overflow-x: auto; max-width: 100%; border: 1px solid var(--pico-muted-border-color, var(--muted-border-color)); border-radius: .3rem; margin: .9rem 0; padding: .85rem .9rem; background: var(--pico-code-background-color, rgba(33, 38, 45, .82)); box-sizing: border-box; }
@@ -166,4 +172,4 @@ main { display: grid; gap: 1rem; }
.blog-search-panel .pagefind-ui__result-excerpt { font-size: .78rem; color: var(--pico-muted-color, var(--muted-color)); }
.blog-search-panel .pagefind-ui__result-excerpt mark { background-color: var(--pico-primary-focus, rgba(255,223,0,.35)); color: inherit; }
.blog-search-panel .pagefind-ui__button { color: var(--pico-primary, var(--primary)); background: none; border: 1px solid var(--pico-muted-border-color, var(--muted-border-color)); border-radius: .2rem; font-size: .78rem; cursor: pointer; }
.blog-search-panel .pagefind-ui__button:hover { border-color: var(--pico-primary, var(--primary)); }
.blog-search-panel .pagefind-ui__button:hover { border-color: var(--pico-primary, var(--primary)); }

View File

@@ -55,17 +55,14 @@
function applyHeatStyle(target, count, maxCount) {
if (!(target instanceof HTMLElement) || !Number.isFinite(count) || count <= 0 || !Number.isFinite(maxCount) || maxCount <= 0) {
target?.style?.setProperty('--blog-calendar-heat-alpha', '0');
target?.style?.setProperty('--blog-calendar-heat-hue', '210');
target?.style?.setProperty('--blog-calendar-heat-strength', '0%');
return;
}
const normalized = Math.min(1, count / maxCount);
const hue = Math.round(210 - (210 * normalized));
const alpha = (0.30 + normalized * 0.65).toFixed(3);
const strength = Math.round(30 + normalized * 60);
target.style.setProperty('--blog-calendar-heat-hue', String(hue));
target.style.setProperty('--blog-calendar-heat-alpha', alpha);
target.style.setProperty('--blog-calendar-heat-strength', String(strength) + '%');
}
function navigateTo(pathname) {
@@ -296,4 +293,4 @@
setPanelOpen(false);
});
}
})();
})();