fix(site): barre de navigation lisible à toutes les largeurs, et bouton de remontée

Les huit liens de la barre ne tiennent qu'au-delà de ~1180px. En dessous, la barre flex les compressait
au lieu de les masquer : « Start project », « Git services » et « How it works » se cassaient sur deux
ou trois lignes, les libellés recouvraient le logo et le bouton Gitea sortait du cadre. Sous 900px, il
n'y avait par ailleurs AUCUNE navigation : les sections n'étaient atteignables qu'en scrollant.

- Aucun libellé ne peut plus se casser (`whitespace-nowrap` + `shrink-0`), et le logo ne se rogne plus.
- Les liens apparaissent par palier de largeur : 4 dès 900px, 6 à partir de 1024, les 8 à partir de
  1180. Pur CSS, aucun JS, aucune mesure au runtime.
- Sous 900px, un bouton menu ouvre un panneau listant TOUS les liens (plus Gitea), refermé au choix
  d'un lien ou par Échap. Le bouton Gitea quitte la barre à ces largeurs, sinon le bouton menu se
  retrouvait tronqué au bord de l'écran sur un mobile de 390px.
- Le libellé « Gitea » n'apparaît qu'au-delà de 1180px ; en dessous l'icône suffit et l'aria-label reste.

Ajout d'un bouton « remonter en haut » en bas à droite : mêmes tokens que le reste du site, visible
seulement après 600px de défilement, cible de 44px, respecte prefers-reduced-motion.

Vérifié au rendu à 390, 760, 900, 1024, 1180 et 1440px, dans les deux thèmes, menu ouvert compris.

This commit is contained in:

johanleroy

2026-08-04 15:43:59 +02:00

parent c8d30c7b0d

commit c8bf6534e0

6 changed files with 172 additions and 22 deletions

									
										packages/site/src/i18n/fr.ts
									
		+2
		
												View File
												
				@@ -8,6 +8,8 @@ export default {

				  navHow: 'Comment ça marche',

				  navSecurity: 'Sécurité',

				  navFaq: 'FAQ',

				  navMenu: 'Menu',

				  backToTop: 'Revenir en haut',

				  themeToggle: 'Changer de thème',

				  gitea: 'Voir sur Gitea',

				  heroBadge: 'Poste de commandement pour agents de code IA',