48 lines
2.3 KiB
Markdown
48 lines
2.3 KiB
Markdown
## 1. Font Implementation
|
|
|
|
- [x] 1.1 Update Google Fonts link to include Baloo 2 and Baloo Chettan fonts
|
|
- [x] 1.2 Update font-family CSS declarations with new Indic font stack
|
|
- [x] 1.3 Add font-display: swap to prevent layout shift during font loading
|
|
- [x] 1.4 Define font fallback chain: Baloo → Noto Sans → system-ui → sans-serif
|
|
|
|
## 2. Mobile Hero Block Typography
|
|
|
|
- [x] 2.1 Add CSS media query for mobile viewports (≤640px) with data-lang="ta" or data-lang="ml"
|
|
- [x] 2.2 Reduce hero title font size from 1.9rem to 1.6rem for Tamil/Malayalam
|
|
- [x] 2.3 Reduce hero summary font size from 1.08rem to 0.95rem for Tamil/Malayalam
|
|
- [x] 2.4 Ensure minimum line-height of 1.5 for readability
|
|
- [x] 2.5 Verify touch targets remain at least 44px in height
|
|
|
|
## 3. Mobile Hero Block Layout
|
|
|
|
- [x] 3.1 Reduce hero image height from 300px to 220px on mobile
|
|
- [x] 3.2 Ensure image maintains aspect ratio and doesn't overflow container
|
|
- [x] 3.3 Verify entire hero content (headline + summary) is visible without clipping
|
|
- [ ] 3.4 Test hero block on actual mobile devices (iOS Safari, Android Chrome)
|
|
|
|
## 4. Footer Tooltip Fix
|
|
|
|
- [x] 4.1 Debug Alpine.js tooltip state management for contact email link
|
|
- [x] 4.2 Ensure tooltip displays on mouse hover event
|
|
- [x] 4.3 Ensure tooltip displays on keyboard focus event
|
|
- [x] 4.4 Ensure tooltip dismisses cleanly on mouse leave
|
|
- [x] 4.5 Ensure tooltip dismisses cleanly on keyboard blur without trapping focus
|
|
- [x] 4.6 Verify tooltip content displays randomized safe messages from predefined pool
|
|
- [x] 4.7 Test tooltip accessibility with screen readers
|
|
|
|
## 5. Testing and Validation
|
|
|
|
- [x] 5.1 Test Tamil content rendering with new fonts on mobile
|
|
- [x] 5.2 Test Malayalam content rendering with new fonts on mobile
|
|
- [x] 5.3 Verify WCAG AA contrast ratios are maintained after font size changes
|
|
- [x] 5.4 Test font loading performance (LCP, CLS metrics)
|
|
- [x] 5.5 Verify all Tamil/Malayalam Unicode characters render correctly
|
|
- [x] 5.6 Test footer tooltip across browsers (Chrome, Firefox, Safari, Edge)
|
|
- [x] 5.7 Test responsive behavior from 320px to 1920px viewports
|
|
|
|
## 6. Documentation
|
|
|
|
- [x] 6.1 Update font documentation in README or style guide
|
|
- [x] 6.2 Document mobile typography scale for Indic languages
|
|
- [x] 6.3 Add comments in CSS explaining mobile font size adjustments
|