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

Compare commits

base: studio-variable:0b19589288e4c635068832e6e014cebdc1011468
Branches Tags
studio-variable:main
..
compare: studio-variable:3ce350d2d731eec0230a2b5d788158dbdced074e
Branches Tags
studio-variable:main

3 commits
0b19589288 ... 3ce350d2d7

Author SHA1 Message Date
isUnknown
3ce350d2d7 portfolio > nav : increase gap between items
All checks were successful
Deploy / Deploy to Production (push) Successful in 19s
Details
2026-03-06 17:39:22 +01:00
isUnknown
7bc6451ae5 Fix: classe active sur le li au lieu du button dans la nav Portfolio 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-06 17:38:25 +01:00
isUnknown
594d53f50e Refactor: sémantique nav Portfolio — ul > li > button 
- nav > ul[role=list] > li > button
- aria-current sur l'item actif
- aria-label={project.title} sur le button (le texte visible est le numéro)
- alt="" sur la vignette (décorative, le titre est porté par aria-label)
- aria-hidden sur le numéro (redondant avec aria-label)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-06 17:32:22 +01:00
1 changed files with 28 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/views/Portfolio.svelte
View file

@ -122,16 +122,22 @@
<!-- Sidebar navigation (extrême droite) --> <!-- Sidebar navigation (extrême droite) -->
<nav class="portfolio-nav" aria-label="Projets"> <nav class="portfolio-nav" aria-label="Projets">
{#each projects as project, i} <ul role="list">
<button {#each projects as project, i}
class="portfolio-nav-item" <li class="portfolio-nav-item" class:active={i === currentIndex}>
class:active={i === currentIndex} <button
onclick={() => { currentIndex = i; setAnchor(i) }} aria-current={i === currentIndex ? 'true' : undefined}
> aria-label={project.title}
<img src={project.thumbnail} alt={project.title} /> onclick={() => { currentIndex = i; setAnchor(i) }}
<span class="portfolio-nav-number">{String(i + 1).padStart(2, '0')}</span> >
</button> {#if project.thumbnail?.length}
{/each} <img src={project.thumbnail} alt="" />
{/if}
<span class="portfolio-nav-number" aria-hidden="true">{String(i + 1).padStart(2, '0')}</span>
</button>
</li>
{/each}
</ul>
</nav> </nav>
</section> </section>
@ -182,6 +188,7 @@
.portfolio-text h2 { .portfolio-text h2 {
font-size: var(--font-size-title-main); font-size: var(--font-size-title-main);
font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
line-height: 1.1; line-height: 1.1;
} }
@ -215,6 +222,11 @@
} }
/* Sidebar navigation */ /* Sidebar navigation */
.portfolio-nav ul {
list-style: none;
display: contents;
}
.portfolio-nav { .portfolio-nav {
grid-area: 4/17 / span 14 / span 4; grid-area: 4/17 / span 14 / span 4;
padding-right: 8rem; padding-right: 8rem;
@ -226,7 +238,11 @@
gap: 1rem; gap: 1rem;
} }
.portfolio-nav-item { .portfolio-nav-item:not(:last-child) {
margin-bottom: 1rem;
}
.portfolio-nav-item button {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 0.5rem; gap: 0.5rem;
@ -238,7 +254,7 @@
transition: transform 0.6s var(--ease-standard), opacity 0.6s var(--ease-standard); transition: transform 0.6s var(--ease-standard), opacity 0.6s var(--ease-standard);
} }
.portfolio-nav-item.active { .portfolio-nav-item.active button {
transform: scale(1.5) translateX(-20%); transform: scale(1.5) translateX(-20%);
opacity: 1; opacity: 1;
} }