ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
# Responsive
|
||
|
||
Mobile-first layout using Tailwind default breakpoints.
|
||
|
||
## Breakpoints
|
||
|
||
| Name | Min width | Typical device |
|
||
| --- | --- | --- |
|
||
| default | 0 | Mobile phones |
|
||
| `sm` | 640px | Large phones / small tablets |
|
||
| `md` | 768px | Tablets |
|
||
| `lg` | 1024px | Laptops |
|
||
| `xl` | 1280px | Desktops |
|
||
| `2xl` | 1536px | Large desktops |
|
||
|
||
Project usage notes:
|
||
|
||
- **Header desktop nav** appears at `xl` (not `lg`) to protect crowded Persian labels.
|
||
- **Section padding** steps at `md` (`py-16` → `md:py-20`).
|
||
- **Hero top padding** steps at `md` (`pt-24` → `md:pt-36`).
|
||
|
||
## Layout adaptations
|
||
|
||
| Concern | Mobile | Desktop |
|
||
| --- | --- | --- |
|
||
| Container gutter | `px-6` | same |
|
||
| Max width | `76.8rem` | same |
|
||
| Section Y | 64px | 80px |
|
||
| Grids | 1 col | 2–4 cols |
|
||
| Nav | Sheet menu | Inline `NavigationMenu` |
|
||
| Forms (newsletter) | Stacked | Horizontal `sm:flex-row` |
|
||
|
||
## Typography scaling
|
||
|
||
Scale variants already encode responsive steps (e.g. `h2`: `text-2xl md:text-3xl lg:text-4xl`). Prefer those over manual overrides.
|
||
|
||
Inputs use `text-base md:text-sm` to prevent iOS focus zoom.
|
||
|
||
## Spacing adaptations
|
||
|
||
- Increase gaps at larger breakpoints (`gap-10 lg:gap-16`) using the spacing scale.
|
||
- Do not shrink container padding on mobile below `px-6`.
|
||
- Collapse multi-column footers to `grid-cols-2` before `sm:grid-cols-4`.
|
||
|
||
## Touch & pointer
|
||
|
||
- Minimum target ~40px for primary icon buttons (`size="icon"` → 40px).
|
||
- Keep tap areas separated (`gap-1.5`–`gap-2` in toolbars).
|
||
|
||
## Overflow
|
||
|
||
- Test at 320–360px widths for Persian word wrapping.
|
||
- No horizontal page scroll; clip section decorations.
|
||
- Tables: wrap in horizontal scroll regions (blog tables already do).
|
||
|
||
## QA matrix (minimum)
|
||
|
||
- 375×812 (mobile)
|
||
- 768×1024 (tablet)
|
||
- 1280×800 (desktop)
|
||
- Light + dark on each
|
||
|
||
## Related
|
||
|
||
- [layout.md](./layout.md)
|
||
- [typography.md](./typography.md)
|
||
- [navbar.md](./navbar.md)
|