mirror of
https://github.com/Ladebeze66/devsite.git
synced 2026-05-11 16:56:26 +02:00
68 lines
2.6 KiB
Markdown
68 lines
2.6 KiB
Markdown
# Audit visuel et mise en forme
|
||
|
||
**Dernière mise à jour :** 2026-04-28
|
||
**Captures :** [INDEX.md](./INDEX.md)
|
||
|
||
## Objectif
|
||
|
||
Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger** avec traçabilité (code : `app/layout.tsx`, `app/page.tsx`, `app/components/Footer.jsx`, `app/globals.css`).
|
||
|
||
## Légende
|
||
|
||
| Champ | Sens |
|
||
|--------|------|
|
||
| **ID** | Numéro dans [INDEX.md](./INDEX.md) |
|
||
| **Constats** | Points validés ensemble |
|
||
| **Piste / correctif** | Idée ou implémentation |
|
||
| **Statut** | `OK` / `à traiter` / `fait` |
|
||
|
||
---
|
||
|
||
## ID 01 — Header et navigation desktop
|
||
|
||
| Fichier | `01-layout-header-nav-desktop.webp` |
|
||
| **Navigateur** | Google Chrome |
|
||
| **Constats** | Aucun problème majeur. Mise en page root renforcée (min-w-0, overflow-x) en parallèle de l’option 1 zoom. |
|
||
| **Statut** | `OK` |
|
||
|
||
---
|
||
|
||
## ID 02 — Menu mobile + header (et retour UX burger)
|
||
|
||
| Fichier | `02-layout-nav-mobile-ouverte.webp` |
|
||
| **Route** | `/` |
|
||
| **Code** | `app/layout.tsx` (header, overlay menu) |
|
||
|
||
### Constats (validés)
|
||
|
||
- Bouton **menu burger** trop imposant et « gris » (gros bloc) — à rendre plus discret.
|
||
- Côté **dézoom** (pinch) sur mobile : le **texte Strapi** + **header** se décalent à gauche, effet d’**incohérence** visuelle.
|
||
|
||
### Piste / correctif appliqué (2026-04-28) — option 1 (CSS / layout seulement)
|
||
|
||
- **Burger** : à affiner (taille, contraste) si besoin — voir capture actuelle.
|
||
- **Décalage au zoom (sans bloquer le zoom)** : pas de `maximum-scale` ni de meta viewport qui impose le zoom. Renfort uniquement côté **CSS** :
|
||
- `html` / `body` : `overflow-x: hidden`, `min-width: 0`, `max-width: 100%` dans `app/globals.css` ;
|
||
- grille racine, `<header>`, `<main>`, footer : `min-w-0`, `w-full` / `max-w-full` là où c’est utile (`app/layout.tsx`, `app/components/Footer.jsx`) ;
|
||
- **`.bg-wallpaper`** : `width: 100%` (plus de `200vw` sur mobile) pour éviter le double de largeur de page et le débordement au pinch-zoom ;
|
||
- page d’**accueil** : conteneur principal + bloc texte en `min-w-0` / `max-w-full` (`app/page.tsx`).
|
||
|
||
**Accessibilité** : le **verrouillage total du zoom** n’a **pas** été retenu (hors demande) ; on privilégie la mise en page. Si le dézoom reste gênant, on pourra itérer (contraintes sur le markdown, etc.).
|
||
|
||
| **Statut** | `fait` (à valider sur appareil réel) — opt-in zoom non appliqué pour l’instant |
|
||
|
||
---
|
||
|
||
## ID 03 — Accueil hero desktop
|
||
|
||
*À traiter à la prochaine passe.*
|
||
| Fichier | `03-accueil-hero-desktop.webp` |
|
||
|
||
---
|
||
|
||
## Suite
|
||
|
||
| Prochain | Fichier |
|
||
|----------|---------|
|
||
| 04 | `04-accueil-hero-mobile.webp` puis 05… |
|