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:
@@ -17,6 +17,7 @@ import SecuritySection from './components/SecuritySection.vue';
|
||||
import FaqSection from './components/FaqSection.vue';
|
||||
import FinalCta from './components/FinalCta.vue';
|
||||
import AppFooter from './components/AppFooter.vue';
|
||||
import BackToTop from './components/BackToTop.vue';
|
||||
|
||||
const { locale } = useI18n();
|
||||
|
||||
@@ -82,5 +83,6 @@ const glowStyle = {
|
||||
</main>
|
||||
|
||||
<AppFooter />
|
||||
<BackToTop />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user