feat(02-01): add accessible base styling
- Set html font-size to 100% (respects browser settings) - Set body font-size to 1rem (16px minimum) - Add font smoothing for better readability - Add safe-bottom class for mobile notch support - Add touch-target utility for WCAG 44x44px minimum
This commit is contained in:
23
src/app.css
23
src/app.css
@@ -1 +1,24 @@
|
|||||||
@import 'tailwindcss';
|
@import 'tailwindcss';
|
||||||
|
|
||||||
|
/* Ensure minimum 16px base for accessibility (UX-02) */
|
||||||
|
html {
|
||||||
|
font-size: 100%; /* 16px default, respects user browser settings */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 1rem; /* 16px minimum */
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Safe area padding for mobile devices with notches */
|
||||||
|
.safe-bottom {
|
||||||
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utility for adequate touch targets (44x44px minimum per WCAG) */
|
||||||
|
.touch-target {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user