studio-variable/world-game
3
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Refactor: sémantique HTML et suppression des styles inline
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source 
- 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 2026-02-19 12:58:32 +01:00
parent e65389534e
commit cfdaf1a6e2
3 changed files with 194 additions and 273 deletions
Download patch file Download diff file Expand all files Collapse all files

161
src/views/Home.svelte
View file

@ -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) {