johanleroy
c8bf6534e0
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.
89 lines
2.7 KiB
Vue
89 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import AppHeader from './components/AppHeader.vue';
|
|
import HeroSection from './components/HeroSection.vue';
|
|
import ProblemSection from './components/ProblemSection.vue';
|
|
import FeaturesSection from './components/FeaturesSection.vue';
|
|
import ShowcaseSection from './components/ShowcaseSection.vue';
|
|
import WorkspaceShowcase from './components/WorkspaceShowcase.vue';
|
|
import LaunchShowcase from './components/LaunchShowcase.vue';
|
|
import DownloadSection from './components/DownloadSection.vue';
|
|
import AccessSection from './components/AccessSection.vue';
|
|
import RemoteGitSection from './components/RemoteGitSection.vue';
|
|
import WorkGroupsSection from './components/WorkGroupsSection.vue';
|
|
import HowItWorksSection from './components/HowItWorksSection.vue';
|
|
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();
|
|
|
|
// Tient l'attribut <html lang> synchronisé avec la langue active.
|
|
watch(
|
|
locale,
|
|
(l) => {
|
|
document.documentElement.lang = l;
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
// Grain de fond + halo accent (décoratifs), tokenisés pour suivre le thème clair/sombre.
|
|
const grainStyle = {
|
|
position: 'fixed',
|
|
inset: '0',
|
|
zIndex: 0,
|
|
opacity: '0.025',
|
|
pointerEvents: 'none',
|
|
backgroundImage: 'radial-gradient(var(--color-fg) 1px,transparent 1.4px)',
|
|
backgroundSize: '34px 34px',
|
|
WebkitMaskImage: 'radial-gradient(ellipse 120% 70% at 50% -4%,#000,transparent 70%)',
|
|
maskImage: 'radial-gradient(ellipse 120% 70% at 50% -4%,#000,transparent 70%)',
|
|
} as const;
|
|
|
|
const glowStyle = {
|
|
position: 'fixed',
|
|
top: '-26%',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
width: '1100px',
|
|
height: '680px',
|
|
zIndex: 0,
|
|
opacity: '0.12',
|
|
pointerEvents: 'none',
|
|
background: 'radial-gradient(50% 50% at 50% 50%,var(--color-accent),transparent 64%)',
|
|
filter: 'blur(18px)',
|
|
} as const;
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative overflow-x-hidden">
|
|
<div aria-hidden="true" :style="grainStyle"></div>
|
|
<div aria-hidden="true" :style="glowStyle"></div>
|
|
|
|
<AppHeader />
|
|
|
|
<main id="top" class="relative z-[1]">
|
|
<HeroSection />
|
|
<ProblemSection />
|
|
<FeaturesSection />
|
|
<ShowcaseSection />
|
|
<WorkspaceShowcase />
|
|
<LaunchShowcase />
|
|
<DownloadSection />
|
|
<AccessSection />
|
|
<RemoteGitSection />
|
|
<WorkGroupsSection />
|
|
<HowItWorksSection />
|
|
<SecuritySection />
|
|
<FaqSection />
|
|
<FinalCta />
|
|
</main>
|
|
|
|
<AppFooter />
|
|
<BackToTop />
|
|
</div>
|
|
</template>
|