Compare commits
3 commits
8e01cbe611
...
cfdaf1a6e2
| Author | SHA1 | Date | |
|---|---|---|---|
|
cfdaf1a6e2 | ||
|
|
e65389534e | ||
|
|
d7dacd6b6c |
4 changed files with 213 additions and 595 deletions
|
|
@ -1,325 +0,0 @@
|
|||
# Plan : Navigation par slides horizontaux
|
||||
|
||||
## Contexte
|
||||
|
||||
Le site source (world.game) utilise fullpage.js v4 avec un plugin scrollHorizontally propriétaire. Toutes les pages sont dans le DOM simultanément et la navigation fait glisser un conteneur avec `transform: translate3d`. On reproduit ce comportement en Svelte 5 sans dépendance externe.
|
||||
|
||||
**Approche retenue :**
|
||||
- Charger d'abord la page demandée (chargement initial rapide)
|
||||
- Charger les autres en arrière-plan en parallèle (HTTP/2, payloads légers)
|
||||
- Si l'utilisateur navigue avant qu'une page soit chargée → attendre qu'elle le soit
|
||||
- Hack back/forward inspiré de decarb.one
|
||||
|
||||
**Pourquoi le chargement progressif plutôt qu'un endpoint unique `/all-pages.json` ?**
|
||||
Un endpoint unique bloquerait le premier rendu jusqu'à ce que Kirby ait tout construit. Le chargement progressif affiche la page initiale immédiatement, les 5 autres chargent en parallèle. Avec HTTP/2 et des payloads JSON légers (6 pages), le coût est négligeable. Chaque page peut aussi être mise en cache indépendamment.
|
||||
|
||||
---
|
||||
|
||||
## Ordre des slides
|
||||
|
||||
**Dynamique, tiré de `site->pages->listed` (Kirby).** Ne pas hardcoder l'ordre.
|
||||
|
||||
Au chargement initial, la réponse JSON d'une page inclut `data.site.navigation` (déjà exposé par le template Kirby et stocké dans `site.svelte.js`). Ce tableau donne l'ordre et les chemins des pages listées. C'est lui qui construit le tableau `SLIDES_CONFIG` au runtime.
|
||||
|
||||
Exemple de ce que Kirby expose déjà :
|
||||
```json
|
||||
{
|
||||
"site": {
|
||||
"navigation": [
|
||||
{ "id": "home", "url": "/home", "title": "Home" },
|
||||
{ "id": "expertise", "url": "/expertise", "title": "Expertise" },
|
||||
...
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Le store `slides` sera initialisé depuis ce tableau dynamiquement après le premier fetch.
|
||||
|
||||
---
|
||||
|
||||
## Architecture cible
|
||||
|
||||
### Conteneur slides (App.svelte)
|
||||
```
|
||||
[body: overflow hidden]
|
||||
[Header - fixed]
|
||||
[.slides-wrapper: display flex, width: N*100vw, transition 1000ms]
|
||||
[.slide × N: width 100vw, height 100vh, flex-shrink 0]
|
||||
[<ViewComponent data={...} />] ← rendu seulement si data chargée
|
||||
```
|
||||
|
||||
`transform: translateX(-{activeIndex * 100}vw)` géré via style inline réactif.
|
||||
|
||||
---
|
||||
|
||||
## Fichiers à créer
|
||||
|
||||
### `src/state/slides.svelte.js` (nouveau)
|
||||
|
||||
Store central de l'état des slides :
|
||||
|
||||
```js
|
||||
// Initialisé dynamiquement depuis site.navigation
|
||||
// slidesData: Array<{ id, path, template, data, loaded, loading }>
|
||||
// activeIndex: number
|
||||
// pendingPath: string | null
|
||||
|
||||
export const slides = {
|
||||
get all(), get activeIndex(), get active(), get pendingPath(),
|
||||
|
||||
init(siteNavigation), // construit slidesData depuis les pages listées de Kirby
|
||||
setData(path, data), // stocke les données + loaded=true d'une slide
|
||||
setLoading(path, bool),
|
||||
slideTo(path), // anime si chargée, sinon set pendingPath
|
||||
resolvePending(), // appelé quand une slide finit de charger
|
||||
getIndexByPath(path),
|
||||
}
|
||||
```
|
||||
|
||||
### `src/router/index.js` (réécriture quasi-complète)
|
||||
|
||||
Remplace navaid par une logique custom :
|
||||
|
||||
```js
|
||||
// loadSlide(path) :
|
||||
// fetch(`${path}.json`) → slides.setData() + site/locale init (1er appel seulement)
|
||||
//
|
||||
// loadAllSlidesInBackground(exceptPath) :
|
||||
// slides.all.filter(s => s.path !== exceptPath).forEach(s => loadSlide(s.path))
|
||||
//
|
||||
// slideTo(path, { skipHistory = false }) :
|
||||
// - slide déjà chargée → slides.slideTo() + history.pushState si !skipHistory
|
||||
// - slide non chargée → slides.setPending(path) (la nav se déclenche quand loaded)
|
||||
//
|
||||
// initRouter() :
|
||||
// 1. path initial = window.location.pathname (ou '/home' si '/')
|
||||
// 2. loadSlide(initialPath) :
|
||||
// → initialise slides.init(site.navigation) après le 1er fetch
|
||||
// → set active slide
|
||||
// 3. loadAllSlidesInBackground(exceptPath: initialPath)
|
||||
// 4. popstate listener : slideTo(window.location.pathname, { skipHistory: true })
|
||||
// 5. Intercepter clics <a> internes : slideTo()
|
||||
```
|
||||
|
||||
**Hack popstate :**
|
||||
```js
|
||||
window.addEventListener('popstate', () => {
|
||||
slideTo(window.location.pathname, { skipHistory: true })
|
||||
})
|
||||
```
|
||||
Le navigateur change déjà l'URL sur ← → on lit simplement `window.location.pathname` et on slide sans re-pousser dans l'historique.
|
||||
|
||||
**Export : `initRouter`, `slideTo`**
|
||||
|
||||
---
|
||||
|
||||
## Fichiers à modifier
|
||||
|
||||
### `src/App.svelte`
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { slides } from '@state/slides.svelte'
|
||||
// ... imports views et composants layout
|
||||
const templates = { home: Home, expertise: Expertise, ... }
|
||||
const width = $derived(`${slides.all.length * 100}vw`)
|
||||
const transform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
|
||||
</script>
|
||||
|
||||
<div class="app">
|
||||
<Cursor />
|
||||
<Header />
|
||||
<main class="main">
|
||||
<div class="slides-wrapper" style="width: {width}; transform: {transform}">
|
||||
{#each slides.all as slide}
|
||||
<div class="slide" data-slide={slide.id}>
|
||||
{#if slide.loaded}
|
||||
<svelte:component this={templates[slide.template]} data={slide.data} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(body) { overflow: hidden; }
|
||||
.main { position: relative; overflow: hidden; height: 100vh; }
|
||||
.slides-wrapper {
|
||||
display: flex;
|
||||
transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
|
||||
height: 100%;
|
||||
}
|
||||
.slide {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Footer : intégré dans le slide Blog (comme dans le source). Supprimer le Footer global.
|
||||
|
||||
### `src/components/layout/Header.svelte`
|
||||
- `import { slideTo } from '@router'` (remplace `navigateTo`)
|
||||
- Appels `navigateTo(path)` → `slideTo(path)`
|
||||
- État actif du lien menu : basé sur `slides.active.id`
|
||||
|
||||
---
|
||||
|
||||
## Fichiers inchangés
|
||||
- `src/views/*.svelte` — aucune modification
|
||||
- `src/state/site.svelte.js`
|
||||
- `src/state/locale.svelte.js`
|
||||
- `src/state/navigation.svelte.js`
|
||||
- `src/main.js`
|
||||
- `src/state/page.svelte.js` — peut être supprimé après migration (remplacé par slides store)
|
||||
|
||||
---
|
||||
|
||||
## Accessibilité (RGAA / WCAG 2.1 AA)
|
||||
|
||||
### Navigation clavier du système de slides
|
||||
|
||||
Le système de slides horizontal est le point le plus délicat : par défaut, un utilisateur au clavier tabulerait dans les slides hors-écran. Il faut :
|
||||
|
||||
- **Slides inactives** : `aria-hidden="true"` + tous les éléments focusables à `tabindex="-1"` → invisibles pour le clavier et les lecteurs d'écran
|
||||
- **Slide active** : `aria-hidden="false"` + tabindex restauré
|
||||
- **Navigation au clavier entre slides** : touches `←` `→` déclenchent `slideTo()` (à l'instar des carousels ARIA)
|
||||
- **Focus management** : à chaque changement de slide, déplacer le focus sur le `<h1>` (ou premier élément focusable) de la nouvelle slide
|
||||
- **Lien "Aller au contenu"** (`<a href="#main-content" class="skip-link">`) visible au focus, positionné avant le Header
|
||||
|
||||
### Structure ARIA du conteneur slides
|
||||
|
||||
```html
|
||||
<main id="main-content">
|
||||
<div
|
||||
role="region"
|
||||
aria-label="Navigation entre sections"
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
>
|
||||
<section aria-label="Accueil" aria-hidden="false">…</section>
|
||||
<section aria-label="Expertise" aria-hidden="true">…</section>
|
||||
…
|
||||
</div>
|
||||
</main>
|
||||
```
|
||||
|
||||
### Réduction de mouvement
|
||||
|
||||
```css
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.slides-wrapper {
|
||||
transition: none;
|
||||
}
|
||||
/* Et toutes les autres transitions/animations */
|
||||
}
|
||||
```
|
||||
|
||||
### Navigation header
|
||||
|
||||
- `<nav aria-label="Navigation principale">`
|
||||
- `aria-current="page"` sur le lien de la slide active
|
||||
- Le bouton menu (hamburger) : `aria-expanded`, `aria-controls`, `aria-label`
|
||||
|
||||
### Vidéos
|
||||
|
||||
- `muted` + `autoplay` (conforme WCAG si muet)
|
||||
- Bouton pause accessible (`<button aria-label="Mettre en pause la vidéo">`)
|
||||
- Pas de contenu informatif uniquement véhiculé par la vidéo (sous-titres si nécessaire)
|
||||
|
||||
### Contraste et couleurs
|
||||
|
||||
- Vérifier le contraste de `#04fea0` sur fond noir : ratio > 4.5:1 (texte normal) ou > 3:1 (grand texte)
|
||||
- Ne pas transmettre l'information uniquement par la couleur
|
||||
|
||||
### Langue
|
||||
|
||||
- `lang="fr"` sur `<html>` (géré par Kirby)
|
||||
- `lang="en"` sur les portions en anglais si applicable
|
||||
|
||||
### Formulaire newsletter (slide Blog)
|
||||
|
||||
- `<label>` explicite associé au `<input type="email">`
|
||||
- Message d'erreur/succès en `aria-live="assertive"`
|
||||
|
||||
### Points de contrôle RGAA prioritaires
|
||||
|
||||
| Critère | Action |
|
||||
|---|---|
|
||||
| Images décoratives | `alt=""` |
|
||||
| Images informatives | `alt` descriptif |
|
||||
| Liens et boutons | Intitulé accessible (pas "cliquez ici") |
|
||||
| Ordre de tabulation | Logique, suit le DOM visible |
|
||||
| Contraste | ≥ 4.5:1 texte normal, ≥ 3:1 grand texte |
|
||||
| Titre de page | `<title>` mis à jour à chaque navigation |
|
||||
| Structure de titres | Un seul `<h1>` par slide, hiérarchie cohérente |
|
||||
|
||||
---
|
||||
|
||||
## Sémantique HTML
|
||||
|
||||
Le site source utilise presque exclusivement des `<div>`. On adopte une sémantique correcte tout en conservant les classes CSS du source pour maintenir le styling.
|
||||
|
||||
| Élément source (div) | Élément cible | Rôle |
|
||||
|---|---|---|
|
||||
| `.slides-wrapper` div | `<main>` | Conteneur principal |
|
||||
| Chaque slide | `<section aria-label="...">` | Section de page |
|
||||
| Navigation header | `<nav>` | Navigation principale |
|
||||
| Lien actif | `aria-current="page"` | Accessibilité |
|
||||
| Contenus vidéo | `<figure>` | Média sémantique |
|
||||
| Articles de blog | `<article>` | Contenu éditorial |
|
||||
| Hiérarchie titres | `<h1>` (titre principal unique par slide), `<h2>`, `<h3>` | Hiérarchie cohérente |
|
||||
|
||||
---
|
||||
|
||||
## Sous-pages : slide vertical imbriqué
|
||||
|
||||
**Principe :** chaque slide principale peut contenir deux sous-vues empilées verticalement. Un clic sur un item déclenche une animation verticale à l'intérieur de la slide, sans quitter le conteneur horizontal.
|
||||
|
||||
```
|
||||
[Portfolio slide — overflow: hidden]
|
||||
[.portfolio-inner — display flex, flex-direction column, transition: transform 500ms]
|
||||
[<section> liste — height 100vh] ← translateY(0) par défaut
|
||||
[<section> détail — height 100vh] ← translateY(100vh) → translateY(0) au clic
|
||||
```
|
||||
|
||||
**Flux de navigation sur clic d'un item :**
|
||||
1. `history.pushState({}, '', '/portfolio/le-point')`
|
||||
2. Slide horizontal → active le slide Portfolio (si pas déjà actif)
|
||||
3. Animation verticale → translate l'inner vers le haut (`translateY(-100vh)`)
|
||||
4. Le slide détail monte dans le viewport
|
||||
|
||||
**Flux sur ← navigateur (popstate) :**
|
||||
- URL = `/portfolio` → inverse l'animation verticale, revient à la liste
|
||||
|
||||
**Avantages :**
|
||||
- URL maîtrisée, back/forward fonctionnel
|
||||
- Cohérent avec le système horizontal (même principe, autre axe)
|
||||
- Pas de dépendance extérieure supplémentaire
|
||||
|
||||
**Slides concernées :** Portfolio uniquement (`/portfolio/:slug`)
|
||||
|
||||
**Blog (`/blog/:slug`) :** sort complètement du système de slides. Un clic sur un article ouvre la page sans animation de slide — navigation classique qui remplace le viewport. Le retour (← navigateur) revient au slide Blog.
|
||||
|
||||
---
|
||||
|
||||
## Questions ouvertes (à traiter plus tard)
|
||||
- État visuel "en cours de chargement" quand l'utilisateur navigue avant qu'une slide soit prête
|
||||
- Footer dans le slide Blog : même structure que le source ?
|
||||
- Gestion du scroll vertical dans chaque slide (actuellement `overflow-y: auto`)
|
||||
|
||||
---
|
||||
|
||||
## Vérification
|
||||
|
||||
1. Démarrer Kirby (`php -S localhost:8000`) et Vite (`npm run dev`)
|
||||
2. `http://localhost:5173` → Home s'affiche en premier
|
||||
3. Console : les 5 autres pages chargent en arrière-plan
|
||||
4. Clic sur "Expertise" dans le header → slide horizontal animé 1000ms
|
||||
5. Bouton ← du navigateur → retour Home avec animation
|
||||
6. Accès direct `http://localhost:5173/expertise` → slide Expertise active directement
|
||||
7. Clic sur un lien avant fin de chargement → attente puis navigation automatique
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { slides } from '@state/slides.svelte'
|
||||
import { slideTo } from '@router'
|
||||
|
||||
import Header from '@components/layout/Header.svelte'
|
||||
import Cursor from '@components/layout/Cursor.svelte'
|
||||
|
|
@ -30,32 +32,48 @@
|
|||
|
||||
const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
|
||||
const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
|
||||
|
||||
onMount(() => {
|
||||
const handleKeydown = (e) => {
|
||||
if (e.key === 'ArrowRight') {
|
||||
const next = slides.all[slides.activeIndex + 1]
|
||||
if (next) slideTo(next.path)
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
const prev = slides.all[slides.activeIndex - 1]
|
||||
if (prev) slideTo(prev.path)
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeydown)
|
||||
return () => window.removeEventListener('keydown', handleKeydown)
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="app">
|
||||
<Cursor />
|
||||
<Header />
|
||||
<Cursor />
|
||||
<Header />
|
||||
|
||||
<main class="main">
|
||||
<div
|
||||
class="slides-wrapper"
|
||||
style="width: {wrapperWidth}; transform: {wrapperTransform}"
|
||||
>
|
||||
{#each slides.all as slide}
|
||||
<div class="slide" data-slide={slide.id}>
|
||||
{#if slide.loaded}
|
||||
<svelte:component
|
||||
this={templates[slide.template] ?? Default}
|
||||
data={slide.data}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main class="main">
|
||||
<div
|
||||
class="slides-wrapper"
|
||||
style="width: {wrapperWidth}; transform: {wrapperTransform}"
|
||||
>
|
||||
{#each slides.all as slide}
|
||||
<section class="slide" data-slide={slide.id}>
|
||||
{#if slide.loaded}
|
||||
<svelte:component
|
||||
this={templates[slide.template] ?? Default}
|
||||
data={slide.data}
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
:global(#app) {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
:global(*) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -79,10 +97,6 @@
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { navigation } from '@state/navigation.svelte'
|
||||
import { locale } from '@state/locale.svelte'
|
||||
import { slides } from '@state/slides.svelte'
|
||||
import { slideTo } from '@router'
|
||||
|
||||
const isMenuOpen = $derived(navigation.isMenuOpen)
|
||||
const currentLang = $derived(locale.current)
|
||||
|
|
@ -13,160 +12,50 @@
|
|||
return slide.titles?.[currentLang] || slide.title || slide.id
|
||||
}
|
||||
|
||||
function handleNav(path) {
|
||||
slideTo(path)
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
navigation.toggleMenu()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="navbar">
|
||||
<div
|
||||
class="clickable"
|
||||
style="
|
||||
z-index: 60;
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 5vh;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
"
|
||||
onclick={() => handleNav('/')}
|
||||
onkeypress={(e) => e.key === 'Enter' && handleNav('/')}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<img
|
||||
src="/assets/img/GIF_world_game_planete.gif"
|
||||
alt="World Game"
|
||||
class="clickable wg-logo"
|
||||
/>
|
||||
</div>
|
||||
<nav class="navbar" class:navbar--open={isMenuOpen}>
|
||||
<a href="/" class="navbar-logo">
|
||||
<img src="/assets/img/GIF_world_game_planete.gif" alt="World Game" class="wg-logo" />
|
||||
</a>
|
||||
|
||||
{#each menuItems as slide}
|
||||
<div
|
||||
class="navbar-item clickable"
|
||||
class:active={activeId === slide.id}
|
||||
style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
|
||||
onclick={() => handleNav(slide.path)}
|
||||
onkeypress={(e) => e.key === 'Enter' && handleNav(slide.path)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
{getTitle(slide)}
|
||||
</div>
|
||||
{/each}
|
||||
<ul class="navbar-list">
|
||||
{#each menuItems as slide}
|
||||
<li>
|
||||
<a
|
||||
href={slide.path}
|
||||
class="navbar-item"
|
||||
class:active={activeId === slide.id}
|
||||
>
|
||||
{getTitle(slide)}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div
|
||||
class="clickable"
|
||||
style="
|
||||
z-index: 60;
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 5vh;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
"
|
||||
<button
|
||||
class="navbar-toggle"
|
||||
onclick={toggleMenu}
|
||||
onkeypress={(e) => e.key === 'Enter' && toggleMenu()}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label={isMenuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
|
||||
aria-expanded={isMenuOpen}
|
||||
>
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style="height: 4.5vh; min-height: 36px;"
|
||||
>
|
||||
<circle
|
||||
cx="7"
|
||||
cy="7"
|
||||
r="2"
|
||||
fill="white"
|
||||
style="
|
||||
transform: {isMenuOpen ? 'translate(5px, 5px) scale(0.7)' : 'translate(0px, 0px) scale(1)'};
|
||||
transform-origin: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="17"
|
||||
cy="7"
|
||||
r="2"
|
||||
fill="white"
|
||||
style="
|
||||
transform: {isMenuOpen ? 'translate(-5px, 5px) scale(0.7)' : 'translate(0px, 0px) scale(1)'};
|
||||
transform-origin: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="7"
|
||||
cy="17"
|
||||
r="2"
|
||||
fill="white"
|
||||
style="
|
||||
transform: {isMenuOpen ? 'translate(5px, -5px) scale(0.7)' : 'translate(0px, 0px) scale(1)'};
|
||||
transform-origin: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="17"
|
||||
cy="17"
|
||||
r="2"
|
||||
fill="white"
|
||||
style="
|
||||
transform: {isMenuOpen ? 'translate(-5px, -5px) scale(0.7)' : 'translate(0px, 0px) scale(1)'};
|
||||
transform-origin: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
"
|
||||
/>
|
||||
|
||||
<line
|
||||
x1="9"
|
||||
y1="9"
|
||||
x2="15"
|
||||
y2="15"
|
||||
stroke="white"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
style="
|
||||
opacity: {isMenuOpen ? 1 : 0};
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
transition-delay: {isMenuOpen ? '0.1s' : '0s'};
|
||||
"
|
||||
/>
|
||||
<line
|
||||
x1="15"
|
||||
y1="9"
|
||||
x2="9"
|
||||
y2="15"
|
||||
stroke="white"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
style="
|
||||
opacity: {isMenuOpen ? 1 : 0};
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
transition-delay: {isMenuOpen ? '0.1s' : '0s'};
|
||||
"
|
||||
/>
|
||||
<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="2" fill="white" class="dot dot-tl" />
|
||||
<circle cx="17" cy="7" r="2" fill="white" class="dot dot-tr" />
|
||||
<circle cx="7" cy="17" r="2" fill="white" class="dot dot-bl" />
|
||||
<circle cx="17" cy="17" r="2" fill="white" class="dot dot-br" />
|
||||
<line x1="9" y1="9" x2="15" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
|
||||
<line x1="15" y1="9" x2="9" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-self: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -175,11 +64,42 @@
|
|||
font-size: var(--font-size-paragraph);
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
text-align: center !important;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 2vh 0 2vh 0;
|
||||
backdrop-filter: blur(0px);
|
||||
transition: all 0.3s ease-in-out;
|
||||
padding: 2vh 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(15px);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.navbar-logo {
|
||||
position: absolute;
|
||||
left: 5vh;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.wg-logo {
|
||||
height: 3rem;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Nav list */
|
||||
.navbar-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-list li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.navbar--open .navbar-list {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
|
|
@ -193,22 +113,50 @@
|
|||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-item.active {
|
||||
color: #04fea0;
|
||||
}
|
||||
|
||||
.navbar-item.active,
|
||||
.navbar-item:hover {
|
||||
color: #04fea0;
|
||||
}
|
||||
|
||||
.wg-logo {
|
||||
height: 4.8vh;
|
||||
pointer-events: none;
|
||||
/* Hamburger button */
|
||||
.navbar-toggle {
|
||||
position: absolute;
|
||||
right: 5vh;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 60;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.navbar-toggle svg {
|
||||
height: 4.5vh;
|
||||
min-height: 36px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Dot animation */
|
||||
.dot {
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.navbar--open .dot-tl { transform: translate(5px, 5px) scale(0.7); }
|
||||
.navbar--open .dot-tr { transform: translate(-5px, 5px) scale(0.7); }
|
||||
.navbar--open .dot-bl { transform: translate(5px, -5px) scale(0.7); }
|
||||
.navbar--open .dot-br { transform: translate(-5px, -5px) scale(0.7); }
|
||||
|
||||
/* Cross lines */
|
||||
.cross-line {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar--open .cross-line {
|
||||
opacity: 1;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
|
|
|
|||
|
|
@ -45,83 +45,52 @@
|
|||
</script>
|
||||
|
||||
<div class="home golden-grid slide" data-anchor="HOME">
|
||||
<div style="grid-area: 1/1/span 20/span 20; filter: saturate(140%);">
|
||||
<div class="olly">
|
||||
<figure
|
||||
style="
|
||||
height: -webkit-fill-available;
|
||||
width: -webkit-fill-available;
|
||||
"
|
||||
<div class="home-bg">
|
||||
<figure class="home-figure">
|
||||
<video
|
||||
muted
|
||||
autoplay
|
||||
playsinline
|
||||
loop
|
||||
controls={false}
|
||||
preload="metadata"
|
||||
id="home-video"
|
||||
class="home-video home-video-desktop"
|
||||
>
|
||||
<video
|
||||
muted
|
||||
autoplay
|
||||
playsinline
|
||||
loop
|
||||
controls={false}
|
||||
preload="metadata"
|
||||
id="home-video"
|
||||
class="home-video home-video-desktop"
|
||||
style="
|
||||
object-fit: cover;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: -webkit-fill-available;
|
||||
width: -webkit-fill-available;
|
||||
"
|
||||
>
|
||||
<source
|
||||
src="/assets/video/Website_version.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
<video
|
||||
muted
|
||||
autoplay
|
||||
playsinline
|
||||
loop
|
||||
controls={false}
|
||||
preload="metadata"
|
||||
id="home-video-mobile"
|
||||
class="home-video-mobile"
|
||||
style="
|
||||
object-fit: cover;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: -webkit-fill-available;
|
||||
width: -webkit-fill-available;
|
||||
"
|
||||
>
|
||||
<source
|
||||
src="/assets/video/mobile_version_texte_fixe.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
</figure>
|
||||
</div>
|
||||
<source src="/assets/video/Website_version.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<video
|
||||
muted
|
||||
autoplay
|
||||
playsinline
|
||||
loop
|
||||
controls={false}
|
||||
preload="metadata"
|
||||
id="home-video-mobile"
|
||||
class="home-video home-video-mobile"
|
||||
>
|
||||
<source src="/assets/video/mobile_version_texte_fixe.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="vertical-line-start"></div>
|
||||
<div class="vertical-line-center"></div>
|
||||
<div class="vertical-line-end"></div>
|
||||
|
||||
<div
|
||||
class="home-text"
|
||||
style="z-index: 5; justify-self: center; margin-top: 6vmax;"
|
||||
>
|
||||
<div class="home-text">
|
||||
<h2 class="font-face-danzza-light home-subtitle">
|
||||
{data.hero.subtitle}
|
||||
</h2>
|
||||
<div
|
||||
class="clickable button"
|
||||
style="margin: auto; margin-top: 40px;"
|
||||
class="clickable button home-cta"
|
||||
onclick={handleExplore}
|
||||
onkeypress={(e) => e.key === 'Enter' && handleExplore()}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="earth-icon clickable-filter-black"></div>
|
||||
<p class="clickable" style="font-family: Terminal; font-size: 1.2em;">
|
||||
<p class="home-cta-text clickable">
|
||||
{data.hero.ctaText}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -133,10 +102,44 @@
|
|||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* Full-grid video background — replaces div[grid-area] + .olly */
|
||||
.home-bg {
|
||||
grid-area: 1/1 / span 20 / span 20;
|
||||
filter: saturate(140%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-figure {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.home-video {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.home-video-desktop {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.home-video-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Text overlay */
|
||||
.home-text {
|
||||
z-index: 9;
|
||||
z-index: 5;
|
||||
grid-area: 9/1 / span 6 / span 20;
|
||||
width: 100%;
|
||||
justify-self: center;
|
||||
margin-top: 6vmax;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
|
|
@ -146,37 +149,15 @@
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.olly {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* CTA button */
|
||||
.home-cta {
|
||||
margin: auto;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.olly figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.home-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.home-video-desktop {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.home-video-mobile {
|
||||
display: none !important;
|
||||
.home-cta-text {
|
||||
font-family: Terminal;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue