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

Tweak: ajustements style Portfolio
All checks were successful
Deploy / Deploy to Production (push) Successful in 20s
Details

Browse source 
- Catchphrase en gradient-blue + Danzza Medium
- Titre en font-size-title-main + uppercase
- Description en font-size-subtitle
- Numéro nav après la vignette, align-items flex-start
- Vignette active scale(1.5) translateX(-20%)
- padding-right nav sidebar augmenté
- grid-area portfolio-text réduit d'une colonne

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-06 16:42:25 +01:00
parent 88a5c78d7a
commit 0b19589288
1 changed files with 12 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/views/Portfolio.svelte
View file

@ -105,7 +105,7 @@
<!-- Infos projet (droite) --> <!-- Infos projet (droite) -->
<div class="portfolio-text" aria-live="polite"> <div class="portfolio-text" aria-live="polite">
<h2>{currentProject.title}</h2> <h2>{currentProject.title}</h2>
<h3 class="portfolio-catchphrase">{@html currentProject.catchphrase}</h3> <h3 class="portfolio-catchphrase gradient-blue">{@html currentProject.catchphrase}</h3>
<div class="portfolio-description">{@html currentProject.description}</div> <div class="portfolio-description">{@html currentProject.description}</div>
<div class="portfolio-keywords"> <div class="portfolio-keywords">
{#each currentProject.keywords as kw} {#each currentProject.keywords as kw}
@ -128,8 +128,8 @@
class:active={i === currentIndex} class:active={i === currentIndex}
onclick={() => { currentIndex = i; setAnchor(i) }} onclick={() => { currentIndex = i; setAnchor(i) }}
> >
<span class="portfolio-nav-number">{String(i + 1).padStart(2, '0')}</span>
<img src={project.thumbnail} alt={project.title} /> <img src={project.thumbnail} alt={project.title} />
<span class="portfolio-nav-number">{String(i + 1).padStart(2, '0')}</span>
</button> </button>
{/each} {/each}
</nav> </nav>
@ -170,7 +170,7 @@
} }
.portfolio-text { .portfolio-text {
grid-area: 7/11 / span 6 / span 6; grid-area: 7/11 / span 6 / span 5;
z-index: var(--z-content); z-index: var(--z-content);
text-align: left; text-align: left;
display: flex; display: flex;
@ -181,18 +181,20 @@
} }
.portfolio-text h2 { .portfolio-text h2 {
font-size: var(--font-size-title-section); font-size: var(--font-size-title-main);
text-transform: uppercase;
line-height: 1.1; line-height: 1.1;
} }
.portfolio-catchphrase { .portfolio-catchphrase {
font-family: "Danzza Medium", sans-serif;
font-size: var(--font-size-subtitle); font-size: var(--font-size-subtitle);
font-weight: 600;
color: var(--color-primary); color: var(--color-primary);
font-weight: normal;
} }
.portfolio-description { .portfolio-description {
font-size: var(--font-size-paragraph-small); font-size: var(--font-size-subtitle);
line-height: 1.5; line-height: 1.5;
opacity: 0.8; opacity: 0.8;
} }
@ -215,6 +217,7 @@
/* Sidebar navigation */ /* Sidebar navigation */
.portfolio-nav { .portfolio-nav {
grid-area: 4/17 / span 14 / span 4; grid-area: 4/17 / span 14 / span 4;
padding-right: 8rem;
z-index: var(--z-content); z-index: var(--z-content);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -225,7 +228,7 @@
.portfolio-nav-item { .portfolio-nav-item {
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 0.5rem; gap: 0.5rem;
background: none; background: none;
border: none; border: none;
@ -236,13 +239,13 @@
} }
.portfolio-nav-item.active { .portfolio-nav-item.active {
transform: scale(1.25) translateX(-50%); transform: scale(1.5) translateX(-20%);
opacity: 1; opacity: 1;
} }
.portfolio-nav-number { .portfolio-nav-number {
color: var(--color-text); color: var(--color-text);
font-size: var(--font-size-caption); font-size: .5rem;
} }
.portfolio-nav-item img { .portfolio-nav-item img {