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

Feat: portfolio polish + font Danzza Light

Browse source 
- App.svelte : classe active sur la slide courante
- Portfolio : flèches PNG custom, <output> pour le compteur, transition gallery mobile avec délai à l'entrée seulement
- fonts.css : @font-face Danzza Light + classe .font-face-danzza-light corrigée

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-12 19:28:44 +01:00
parent 77080c4928
commit e45380258b
4 changed files with 43 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/views/Portfolio.svelte
View file

@ -174,7 +174,7 @@
disabled={currentIndex >= projects.length - 1}
onclick={() => { if (currentIndex < projects.length - 1) { currentIndex++; setAnchor(currentIndex) } }}
></button>
<span class="portfolio-counter">{String(currentIndex + 1).padStart(2, '0')}/{String(projects.length).padStart(2, '0')}</span>
<output class="portfolio-counter">{String(currentIndex + 1).padStart(2, '0')}/{String(projects.length).padStart(2, '0')}</output>
</div>
</section>
@ -270,7 +270,7 @@
.portfolio-nav {
grid-area: 4/17 / span 14 / span 4;
padding-right: 8rem;
margin-right: 7vw;
z-index: var(--z-content);
display: flex;
flex-direction: column;
@ -350,12 +350,13 @@
}
.portfolio-arrow--up {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M2 8L6 4L10 8'/%3E%3C/svg%3E");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACxSURBVChT7dExDgFBFMbxF4RKolC5ABGRuIIjqJQu4ATiDE6hcQKNhsJGi4YLqBQ6jfF/k53Js8YNfMkvb9/Mm8lmV5xzRTVsMDZrXkm+U8EQA9/ZFE7PYHND3Lc3T9DC1nciVxyg611dCKfq0EyhvWaE8LyAv3mFB/pYogFNO689dPDS4Qt2OOKOKjShnrHGPryG1YRmjo+91Kf7mf+wTWq4nNfwJ2NSw09kOPkuRuQNVDyfOxATXhEAAAAASUVORK5CYII=");
transform: rotate(180deg);
margin-right: 2px;
}
.portfolio-arrow--down {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M2 4L6 8L10 4'/%3E%3C/svg%3E");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACxSURBVChT7dExDgFBFMbxF4RKolC5ABGRuIIjqJQu4ATiDE6hcQKNhsJGi4YLqBQ6jfF/k53Js8YNfMkvb9/Mm8lmV5xzRTVsMDZrXkm+U8EQA9/ZFE7PYHND3Lc3T9DC1nciVxyg611dCKfq0EyhvWaE8LyAv3mFB/pYogFNO689dPDS4Qt2OOKOKjShnrHGPryG1YRmjo+91Kf7mf+wTWq4nNfwJ2NSw09kOPkuRuQNVDyfOxATXhEAAAAASUVORK5CYII=");
margin-right: 5px;
}
@ -371,17 +372,24 @@
}
/* Gallery over background, under content */
.portfolio-gallery {
.portfolio-gallery.mobile-only {
position: fixed;
transform: translateX(-10vw);
width: 120vw;
opacity: 0.8;
z-index: 1;
transform: translateX(0vw);
width: 100vw;
transition: all .3s ease-in-out;
}
:global(.slide.active .portfolio-gallery.mobile-only) {
transform: translateX(-10vw);
width: 120vw;
transition: all .3s ease-in-out .8s;
}
.content-background {
position: fixed;
top: -7rem;
bottom: 0;
width: 100vw;
height: auto;
z-index: 5;
@ -399,8 +407,9 @@
/* Text — over mockup, centered */
.portfolio-text {
grid-area: 9/3 / span 7 / span 16;
grid-area: 8/4/span 8/span 14;
z-index: var(--z-content);
gap: .5rem;
text-align: center;
}
@ -414,7 +423,10 @@
}
.portfolio-description {
font-family: "Danzza Light", sans-serif;
font-size: var(--font-size-paragraph-mobile);
font-weight: 600;
line-height: 1.34;
}
/* Hide keywords on mobile */
@ -422,6 +434,11 @@
display: none;
}
.portfolio-links {
margin-top: .5rem;
justify-content: center;
}
/* Nav thumbnails — horizontal, compact */
.portfolio-nav {
grid-area: 17/4 / span 1 / span 14;
@ -431,6 +448,7 @@
height: 75px;
align-items: center;
overflow: hidden;
margin-right: 0;
}
.portfolio-nav-item:not(:last-child) {
@ -451,8 +469,8 @@
}
.portfolio-nav-item img {
width: 45px;
height: 50px;
width: 3.75rem;
height: 3.75rem;
}
.portfolio-nav-number {
@ -464,6 +482,10 @@
grid-area: 18/15 / span 1 / span 3;
font-size: var(--font-size-caption-mobile, 11px);
}
.portfolio-counter {
font-size: 0.8125rem;
}
}
/* Tablet (701px–912px) */