feat: time card font scales to half card short side, centered

This commit is contained in:
2026-08-16 21:22:00 +08:00
parent 1bec58420d
commit 6020b89215
2 changed files with 22 additions and 3 deletions
+6 -3
View File
@@ -169,13 +169,16 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
text-align: center;
} }
/* 小时 / 分钟:上下两行大字,等宽数字避免宽度抖动 */ /* 小时 / 分钟:上下两行大字,等宽数字避免宽度抖动
/* Hour / minute: stacked large lines, tabular numerals avoid width jitter */ font-size 由 JS 按「卡片短边一半」动态设置 */
/* Hour / minute: stacked large lines, tabular numerals avoid width jitter;
font-size is set by JS to half the card's short side */
.time-card .h, .time-card .h,
.time-card .m { .time-card .m {
font-size: clamp(30px, 4vw, 54px);
font-weight: 300; font-weight: 300;
line-height: 1.05; line-height: 1.05;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
+16
View File
@@ -60,9 +60,25 @@ function renderTimeCard() {
<div class="m">${fmtMinute(now)}</div> <div class="m">${fmtMinute(now)}</div>
<div class="sec">${fmtSec(now)}</div> <div class="sec">${fmtSec(now)}</div>
<div class="date-full">${fmtFullDate(now)}</div>`; <div class="date-full">${fmtFullDate(now)}</div>`;
applyTimeCardSize(el);
return el; return el;
} }
// 时间卡字号自适应:HH/MM 字号 = 卡片短边的一半,随卡片尺寸变化
// Adaptive time-card font: HH/MM font-size = half the card's short side,
// tracking the card size
function applyTimeCardSize(el) {
const check = () => {
const w = el.clientWidth;
const h = el.clientHeight;
if (w <= 0 || h <= 0) return;
const size = Math.floor(Math.min(w, h) / 2);
el.querySelectorAll('.h, .m').forEach(n => { n.style.fontSize = size + 'px'; });
};
check();
requestAnimationFrame(check);
}
// 其他卡片占位:仅显示 id,后续 Task 接具体卡片渲染 // 其他卡片占位:仅显示 id,后续 Task 接具体卡片渲染
// Other cards placeholder: show id only; concrete renderers land in later tasks // Other cards placeholder: show id only; concrete renderers land in later tasks
function renderGenericCard(id) { function renderGenericCard(id) {