feat: add responsive typography scaling for desktop readability
- Add CSS clamp() for fluid font-size scaling (16px to 20px based on viewport) - Apply responsive breakpoint classes to all components: * text-xs → lg:text-sm xl:text-base * text-sm → lg:text-base xl:text-lg * text-base → lg:text-lg xl:text-xl * text-lg → lg:text-xl xl:text-2xl * text-xl → lg:text-2xl xl:text-3xl * text-2xl → lg:text-3xl xl:text-4xl * text-3xl → lg:text-4xl xl:text-5xl - Apply responsive padding/spacing scaling proportionally - Updated 27 component and page files - Build verified: 6 routes, zero TypeScript errors - Fixes readability on MacBook Pro 14" and other desktop screens without browser zoom
This commit is contained in:
@@ -68,7 +68,9 @@
|
||||
"Bash(sed -i -e 's/\\\\btext-slate-100\\\\b/text-secondary/g' -e s/placeholder:text-slate-700/placeholder:text-muted/g -e s/hover:text-slate-300/hover:text-secondary/g app/page.tsx)",
|
||||
"Bash(sed -i 's/\\\\btext-slate-300\\\\b/text-secondary/g' app/page.tsx)",
|
||||
"Bash(npx tsc *)",
|
||||
"Bash(python -m pytest backend/tests/ -q)"
|
||||
"Bash(python -m pytest backend/tests/ -q)",
|
||||
"Bash(chmod +x /tmp/update_fonts.sh)",
|
||||
"Bash(/tmp/update_fonts.sh)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user