studio-variable/world-game
4
1
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

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

No commits in common. "3ce350d2d731eec0230a2b5d788158dbdced074e" and "0b19589288e4c635068832e6e014cebdc1011468" have entirely different histories.
3ce350d2d7 ... 0b19589288

1 changed files with 12 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/views/Portfolio.svelte
View file

@ -122,22 +122,16 @@
<!-- Sidebar navigation (extrême droite) --> <!-- Sidebar navigation (extrême droite) -->
<nav class="portfolio-nav" aria-label="Projets"> <nav class="portfolio-nav" aria-label="Projets">
<ul role="list"> {#each projects as project, i}
{#each projects as project, i} <button
<li class="portfolio-nav-item" class:active={i === currentIndex}> class="portfolio-nav-item"
<button class:active={i === currentIndex}
aria-current={i === currentIndex ? 'true' : undefined} onclick={() => { currentIndex = i; setAnchor(i) }}
aria-label={project.title} >
onclick={() => { currentIndex = i; setAnchor(i) }} <img src={project.thumbnail} alt={project.title} />
> <span class="portfolio-nav-number">{String(i + 1).padStart(2, '0')}</span>
{#if project.thumbnail?.length} </button>
<img src={project.thumbnail} alt="" /> {/each}
{/if}
<span class="portfolio-nav-number" aria-hidden="true">{String(i + 1).padStart(2, '0')}</span>
</button>
</li>
{/each}
</ul>
</nav> </nav>
</section> </section>
@ -188,7 +182,6 @@
.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;
} }
@ -222,11 +215,6 @@
} }
/* 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;
@ -238,11 +226,7 @@
gap: 1rem; gap: 1rem;
} }
.portfolio-nav-item:not(:last-child) { .portfolio-nav-item {
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;
@ -254,7 +238,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 button { .portfolio-nav-item.active {
transform: scale(1.5) translateX(-20%); transform: scale(1.5) translateX(-20%);
opacity: 1; opacity: 1;
} }