feat: time card font scales to half card short side, centered
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user