feat: time card font scales to half card short side, centered
This commit is contained in:
@@ -169,13 +169,16 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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 .m {
|
||||
font-size: clamp(30px, 4vw, 54px);
|
||||
font-weight: 300;
|
||||
line-height: 1.05;
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
@@ -60,9 +60,25 @@ function renderTimeCard() {
|
||||
<div class="m">${fmtMinute(now)}</div>
|
||||
<div class="sec">${fmtSec(now)}</div>
|
||||
<div class="date-full">${fmtFullDate(now)}</div>`;
|
||||
applyTimeCardSize(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 接具体卡片渲染
|
||||
// Other cards placeholder: show id only; concrete renderers land in later tasks
|
||||
function renderGenericCard(id) {
|
||||
|
||||
Reference in New Issue
Block a user