novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): 无障碍与 lint 修复（对比度/alt 属性/触控目标收窄）+ Geist 本地字体系统

Browse Source
This commit is contained in:
zhangxiang
2026-08-31 12:03:32 +08:00
parent 0786af3db9
commit b65ddd1ff7
20 changed files with 125 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/flip-clock.tsx
+8 -8
View File
@@ -18,13 +18,13 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
return (
<div className="relative w-14 h-20 sm:w-16 sm:h-24 md:w-20 md:h-28 perspective-1000">
{/* 背景卡片 - 静态显示当前数字 */}
<div className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] via-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] rounded-lg shadow-xl overflow-hidden border border-[var(--color-flip-card-border)]">
<div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] border-b border-[var(--color-flip-card-border)] overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] via-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-lg shadow-xl overflow-hidden border border-[var(--color-border-primary)]">
<div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[var(--color-brand)]">
{digit}
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] overflow-hidden">
<div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[var(--color-brand)]">
{digit}
</div>
@@ -40,7 +40,7 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
animate={{ rotateX: -180 }}
exit={{ rotateX: -180 }}
transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] rounded-t-lg overflow-hidden border-t border-l border-r border-[var(--color-flip-card-border)]"
className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-t-lg overflow-hidden border-t border-l border-r border-[var(--color-border-primary)]"
style={{
transformOrigin: 'bottom',
backfaceVisibility: 'hidden',
@@ -58,7 +58,7 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
animate={{ rotateX: 0 }}
exit={{ rotateX: 0 }}
transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] rounded-b-lg overflow-hidden border-b border-l border-r border-[var(--color-flip-card-border)]"
className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-b-lg overflow-hidden border-b border-l border-r border-[var(--color-border-primary)]"
style={{
transformOrigin: 'top',
backfaceVisibility: 'hidden',
@@ -70,9 +70,9 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
</motion.div>
</AnimatePresence>
<div className="absolute top-1/2 left-0 right-0 h-px bg-[var(--color-flip-card-divider)] transform -translate-y-1/2" />
<div className="absolute top-0 left-0 right-0 h-px bg-[var(--color-flip-card-divider-subtle)]/50" />
<div className="absolute bottom-0 left-0 right-0 h-px bg-[var(--color-flip-card-divider-subtle)]/50" />
<div className="absolute top-1/2 left-0 right-0 h-px bg-[var(--color-border-primary)] transform -translate-y-1/2" />
<div className="absolute top-0 left-0 right-0 h-px bg-[var(--color-border-light)]/50" />
<div className="absolute bottom-0 left-0 right-0 h-px bg-[var(--color-border-light)]/50" />
{/* 侧面阴影增强立体感 */}
<div className="absolute inset-0 rounded-lg shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] pointer-events-none" />