Refactor: sémantique HTML et suppression des styles inline
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
- App.svelte : suppression du wrapper .app redondant, montage direct sur #app, <section> pour les slides - Header.svelte : <nav>, <ul><li><a> pour le menu, <button> pour le hamburger, animation hamburger en CSS pur (plus de style inline sur les cercles SVG) - Home.svelte : fusion div[grid-area]+.olly en .home-bg, suppression de tous les style="" statiques Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
e65389534e
commit
cfdaf1a6e2
3 changed files with 194 additions and 273 deletions
|
|
@ -48,30 +48,32 @@
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="app">
|
<Cursor />
|
||||||
<Cursor />
|
<Header />
|
||||||
<Header />
|
|
||||||
|
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<div
|
<div
|
||||||
class="slides-wrapper"
|
class="slides-wrapper"
|
||||||
style="width: {wrapperWidth}; transform: {wrapperTransform}"
|
style="width: {wrapperWidth}; transform: {wrapperTransform}"
|
||||||
>
|
>
|
||||||
{#each slides.all as slide}
|
{#each slides.all as slide}
|
||||||
<div class="slide" data-slide={slide.id}>
|
<section class="slide" data-slide={slide.id}>
|
||||||
{#if slide.loaded}
|
{#if slide.loaded}
|
||||||
<svelte:component
|
<svelte:component
|
||||||
this={templates[slide.template] ?? Default}
|
this={templates[slide.template] ?? Default}
|
||||||
data={slide.data}
|
data={slide.data}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</section>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
:global(#app) {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
:global(*) {
|
:global(*) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -95,10 +97,6 @@
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
import { navigation } from '@state/navigation.svelte'
|
import { navigation } from '@state/navigation.svelte'
|
||||||
import { locale } from '@state/locale.svelte'
|
import { locale } from '@state/locale.svelte'
|
||||||
import { slides } from '@state/slides.svelte'
|
import { slides } from '@state/slides.svelte'
|
||||||
import { slideTo } from '@router'
|
|
||||||
|
|
||||||
const isMenuOpen = $derived(navigation.isMenuOpen)
|
const isMenuOpen = $derived(navigation.isMenuOpen)
|
||||||
const currentLang = $derived(locale.current)
|
const currentLang = $derived(locale.current)
|
||||||
|
|
@ -13,160 +12,50 @@
|
||||||
return slide.titles?.[currentLang] || slide.title || slide.id
|
return slide.titles?.[currentLang] || slide.title || slide.id
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleNav(path) {
|
|
||||||
slideTo(path)
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleMenu() {
|
function toggleMenu() {
|
||||||
navigation.toggleMenu()
|
navigation.toggleMenu()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="navbar">
|
<nav class="navbar" class:navbar--open={isMenuOpen}>
|
||||||
<div
|
<a href="/" class="navbar-logo">
|
||||||
class="clickable"
|
<img src="/assets/img/GIF_world_game_planete.gif" alt="World Game" class="wg-logo" />
|
||||||
style="
|
</a>
|
||||||
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>
|
|
||||||
|
|
||||||
{#each menuItems as slide}
|
<ul class="navbar-list">
|
||||||
<div
|
{#each menuItems as slide}
|
||||||
class="navbar-item clickable"
|
<li>
|
||||||
class:active={activeId === slide.id}
|
<a
|
||||||
style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
|
href={slide.path}
|
||||||
onclick={() => handleNav(slide.path)}
|
class="navbar-item"
|
||||||
onkeypress={(e) => e.key === 'Enter' && handleNav(slide.path)}
|
class:active={activeId === slide.id}
|
||||||
role="button"
|
>
|
||||||
tabindex="0"
|
{getTitle(slide)}
|
||||||
>
|
</a>
|
||||||
{getTitle(slide)}
|
</li>
|
||||||
</div>
|
{/each}
|
||||||
{/each}
|
</ul>
|
||||||
|
|
||||||
<div
|
<button
|
||||||
class="clickable"
|
class="navbar-toggle"
|
||||||
style="
|
|
||||||
z-index: 60;
|
|
||||||
position: absolute;
|
|
||||||
float: right;
|
|
||||||
right: 5vh;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
"
|
|
||||||
onclick={toggleMenu}
|
onclick={toggleMenu}
|
||||||
onkeypress={(e) => e.key === 'Enter' && toggleMenu()}
|
aria-label={isMenuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
|
||||||
role="button"
|
aria-expanded={isMenuOpen}
|
||||||
tabindex="0"
|
|
||||||
>
|
>
|
||||||
<svg
|
<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
width="50"
|
<circle cx="7" cy="7" r="2" fill="white" class="dot dot-tl" />
|
||||||
height="50"
|
<circle cx="17" cy="7" r="2" fill="white" class="dot dot-tr" />
|
||||||
viewBox="0 0 24 24"
|
<circle cx="7" cy="17" r="2" fill="white" class="dot dot-bl" />
|
||||||
fill="none"
|
<circle cx="17" cy="17" r="2" fill="white" class="dot dot-br" />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<line x1="9" y1="9" x2="15" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
|
||||||
style="height: 4.5vh; min-height: 36px;"
|
<line x1="15" y1="9" x2="9" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
|
||||||
>
|
|
||||||
<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>
|
</svg>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</nav>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.navbar {
|
.navbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
|
||||||
justify-self: center;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -175,19 +64,44 @@
|
||||||
font-size: var(--font-size-paragraph);
|
font-size: var(--font-size-paragraph);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: white;
|
color: white;
|
||||||
text-align: center !important;
|
text-align: center;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
padding: 2vh 0 2vh 0;
|
padding: 2vh 0;
|
||||||
backdrop-filter: blur(0px);
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
display: block;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
backdrop-filter: blur(15px);
|
backdrop-filter: blur(15px);
|
||||||
transition: 0.3s;
|
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 {
|
.navbar-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 1vmax 2vmax;
|
padding: 1vmax 2vmax;
|
||||||
|
|
@ -199,22 +113,50 @@
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-item.active {
|
.navbar-item.active,
|
||||||
color: #04fea0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-item:hover {
|
.navbar-item:hover {
|
||||||
color: #04fea0;
|
color: #04fea0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wg-logo {
|
/* Hamburger button */
|
||||||
height: 3rem;
|
.navbar-toggle {
|
||||||
pointer-events: none;
|
position: absolute;
|
||||||
|
right: 5vh;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 60;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clickable {
|
.navbar-toggle svg {
|
||||||
cursor: pointer;
|
height: 4.5vh;
|
||||||
user-select: none;
|
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) {
|
@media screen and (max-width: 700px) {
|
||||||
|
|
|
||||||
|
|
@ -45,83 +45,52 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="home golden-grid slide" data-anchor="HOME">
|
<div class="home golden-grid slide" data-anchor="HOME">
|
||||||
<div style="grid-area: 1/1/span 20/span 20; filter: saturate(140%);">
|
<div class="home-bg">
|
||||||
<div class="olly">
|
<figure class="home-figure">
|
||||||
<figure
|
<video
|
||||||
style="
|
muted
|
||||||
height: -webkit-fill-available;
|
autoplay
|
||||||
width: -webkit-fill-available;
|
playsinline
|
||||||
"
|
loop
|
||||||
|
controls={false}
|
||||||
|
preload="metadata"
|
||||||
|
id="home-video"
|
||||||
|
class="home-video home-video-desktop"
|
||||||
>
|
>
|
||||||
<video
|
<source src="/assets/video/Website_version.mp4" type="video/mp4" />
|
||||||
muted
|
</video>
|
||||||
autoplay
|
<video
|
||||||
playsinline
|
muted
|
||||||
loop
|
autoplay
|
||||||
controls={false}
|
playsinline
|
||||||
preload="metadata"
|
loop
|
||||||
id="home-video"
|
controls={false}
|
||||||
class="home-video home-video-desktop"
|
preload="metadata"
|
||||||
style="
|
id="home-video-mobile"
|
||||||
object-fit: cover;
|
class="home-video home-video-mobile"
|
||||||
min-height: 100%;
|
>
|
||||||
min-width: 100%;
|
<source src="/assets/video/mobile_version_texte_fixe.mp4" type="video/mp4" />
|
||||||
height: -webkit-fill-available;
|
</video>
|
||||||
width: -webkit-fill-available;
|
</figure>
|
||||||
"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vertical-line-start"></div>
|
<div class="vertical-line-start"></div>
|
||||||
<div class="vertical-line-center"></div>
|
<div class="vertical-line-center"></div>
|
||||||
<div class="vertical-line-end"></div>
|
<div class="vertical-line-end"></div>
|
||||||
|
|
||||||
<div
|
<div class="home-text">
|
||||||
class="home-text"
|
|
||||||
style="z-index: 5; justify-self: center; margin-top: 6vmax;"
|
|
||||||
>
|
|
||||||
<h2 class="font-face-danzza-light home-subtitle">
|
<h2 class="font-face-danzza-light home-subtitle">
|
||||||
{data.hero.subtitle}
|
{data.hero.subtitle}
|
||||||
</h2>
|
</h2>
|
||||||
<div
|
<div
|
||||||
class="clickable button"
|
class="clickable button home-cta"
|
||||||
style="margin: auto; margin-top: 40px;"
|
|
||||||
onclick={handleExplore}
|
onclick={handleExplore}
|
||||||
onkeypress={(e) => e.key === 'Enter' && handleExplore()}
|
onkeypress={(e) => e.key === 'Enter' && handleExplore()}
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
<div class="earth-icon clickable-filter-black"></div>
|
<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}
|
{data.hero.ctaText}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -133,10 +102,44 @@
|
||||||
background-color: rgba(0, 0, 0, 0);
|
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 {
|
.home-text {
|
||||||
z-index: 9;
|
z-index: 5;
|
||||||
grid-area: 9/1 / span 6 / span 20;
|
grid-area: 9/1 / span 6 / span 20;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
justify-self: center;
|
||||||
|
margin-top: 6vmax;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-subtitle {
|
.home-subtitle {
|
||||||
|
|
@ -146,37 +149,15 @@
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.olly {
|
/* CTA button */
|
||||||
position: absolute;
|
.home-cta {
|
||||||
top: 0;
|
margin: auto;
|
||||||
left: 0;
|
margin-top: 40px;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.olly figure {
|
.home-cta-text {
|
||||||
margin: 0;
|
font-family: Terminal;
|
||||||
padding: 0;
|
font-size: 1.2em;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1000px) {
|
@media screen and (max-width: 1000px) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue