用CSS Grid实现贡献日历：设7列+自动行高，JS动态生成365格并添加level-class控制颜色，用clamp()响应式缩放，配合aria-label和自定义tooltip提升可访问性。
如何用CSS Grid实现贡献日历的二维布局
核心是用 grid-template-columns 固定列数（7列对应周一到周日），再用 grid-auto-rows 统一单元格高度。不要用 flex 嵌套模拟，否则响应式和对齐会失控。
常见错误是手动写 52 行 div，其实只需 1 个容器 + JavaScript 动态生成 365 个 div 单元格，CSS 只管排版：
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 12px;
gap: 2px;
width: fit-content;
}注意：别设固定宽度，让网格根据内容自适应；gap 控制色块间距，GitHub 是 2px，设成 0 就会粘连。
怎么给每个格子按贡献量设置不同颜色强度
CSS 本身不能读取数据，所以必须由 JS 把贡献天数映射为 class 名，比如 level-0 到 level-4，再用 CSS 批量定义背景色：
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 直接用
style="background-color: #..."写内联样式 → 难维护、无法复用、影响渲染性能 - 把 5 级颜色写成 5 个独立 class（如
light/medium）→ 语义弱，后期改色要全搜
推荐做法：
.calendar-grid > div {
border-radius: 2px;
}
.calendar-grid > .level-0 { background-color: #ebedf0; }
.calendar-grid > .level-1 { background-color: #9be9a8; }
.calendar-grid > .level-2 { background-color: #40c463; }
.calendar-grid > .level-3 { background-color: #30a14e; }
.calendar-grid > .level-4 { background-color: #216e39; }颜色值建议直接从 GitHub 的 SVG 源码里抠，避免色差；border-radius 加在通用选择器上，别只加在 level-class 上。
OpenClaw 技能 — 给定一个 GitHub 仓库 URL，自动解析出 owner/repo 名称，发现其中的 YAML/properties 配置文件及其配对的中文字段说明；在 `workspace/{repo}/` 目录下按同步日期（格式为 `YYYY-MM-DD`）创建时间戳子目录；写入 `.openclaw-config-state.json` 状态文件。每次用户提问前，先比对远程仓库当前 ref（如 `main` 或 `master`）的最新提交 SHA 与本地状态文件中记录的 SHA：
如何让日历支持响应式且不破坏网格结构
关键不是缩放格子，而是控制容器宽度上限 + 调整单元格尺寸。用 max-width 限制整体宽度，再配合 clamp() 动态设单元格宽高：
.calendar-grid {
max-width: 600px;
grid-auto-rows: clamp(8px, 2.5vmin, 12px);
gap: clamp(1px, 1.2vmin, 2px);
}这样在手机上格子自动变小但比例不变，不会出现“最后一列被挤掉”的问题。别用 transform: scale()，会导致点击区域错位、文字模糊。
补充一点：如果项目用 Tailwind，别堆砌 grid-cols-7 + h-3 + gap-0.5，容易在深嵌套中丢失层级控制，建议抽成自定义 @layer components。
为什么 hover 提示不能只靠 title 属性
title 属性提示体验差：延迟高、样式不可控、移动端不触发、无障碍支持弱。真实项目必须用 aria-label + 自定义 tooltip。
实操建议：
- 每个格子加
aria-label="2023-06-15: 3 contributions"，供屏幕阅读器读出 - hover 时用伪元素
::after渲染 tooltip，定位用position: absolute+transform: translate()避免重排 - tooltip 内容从 data-* 属性读取，例如
data-date="2023-06-15" data-count="3"，JS 绑定一次事件委托即可
别忘了加 pointer-events: none 到 tooltip 本身，否则鼠标移入 tooltip 会触发 mouseleave。
最常被忽略的是键盘可访问性：格子得是 tabindex="0"，并监听 Enter 键触发 tooltip 显示——否则键盘用户根本看不到贡献详情。
