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

vertical lines : centraliser en fixed dans App.svelte

Browse source 
- Retirer les lignes des views (Home, Expertise, About, Portfolio)
- Centraliser dans App.svelte en position:fixed, visibilité par slide
  via transition de hauteur 0→100vh selon slides.active.template
- Positions calculées depuis la golden-grid (1/6, 1/3, 1/2, 2/3, 5/6)
- Nettoyer layout.css (garder seulement les classes pour Menu.svelte)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-30 14:13:41 +02:00
parent 9b548ecc12
commit a043a8c281
7 changed files with 57 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/App.svelte
View file

@ -36,6 +36,15 @@
const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
const linesBySlide = {
home: [6, 11, 16],
expertise: [6, 8, 11, 14, 16],
about: [6, 8, 11, 14, 16],
portfolio: [11, 16],
}
const ALL_COLS = [6, 8, 11, 14, 16]
const activeLines = $derived(new Set(linesBySlide[slides.active?.template] ?? []))
let isReady = $state(false)
let isResizing = $state(false)
let resizeTimer = null
@ -127,6 +136,12 @@
<Header />
<div class="bg-fixed" style="background-image: url('/assets/img/scrollable-page-background.png')"></div>
<div class="vertical-lines" aria-hidden="true">
{#each ALL_COLS as col}
<div class="vl vl-col{col}" class:visible={activeLines.has(col)}></div>
{/each}
</div>
<main class="main">
<div
class="slides-wrapper"
@ -204,4 +219,28 @@
background-position: center;
background-repeat: no-repeat;
}
.vertical-lines {
position: fixed;
inset: 0;
z-index: var(--z-base);
pointer-events: none;
}
.vl {
position: absolute;
top: 0;
height: 0;
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
overflow: hidden;
transition: height 600ms cubic-bezier(0.77, 0, 0.175, 1);
}
.vl.visible { height: 100vh; }
.vl-col6 { left: calc(10.66 / 63.96 * 100%); }
.vl-col8 { left: calc(21.32 / 63.96 * 100%); }
.vl-col11 { left: calc(31.98 / 63.96 * 100%); }
.vl-col14 { left: calc(42.64 / 63.96 * 100%); }
.vl-col16 { left: calc(53.30 / 63.96 * 100%); }
</style>

5
src/components/layout/Footer.svelte
View file

@ -99,10 +99,7 @@
footer {
width: 100vw;
background: #0d0e22;
}
:global(.about .page-scrollable-footer) {
margin-left: -16.6vw;
z-index: 2;
}
:global(.collection .page-scrollable-footer) {

33
src/styles/layout.css
View file

@ -19,33 +19,18 @@
overflow-y: auto;
}
/* Vertical Lines */
.vertical-line {
z-index: var(--z-base);
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
height: 150%;
pointer-events: none;
}
.vertical-line-start {
z-index: var(--z-base);
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
grid-area: 1/6 / span 20 / span 1;
height: 150%;
}
.vertical-line-center {
z-index: var(--z-base);
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
grid-area: 1/11 / span 20 / span 1;
height: 150%;
}
/* Vertical Lines — utilisées dans Menu.svelte (golden-grid) */
.vertical-line { grid-area: auto; }
.vertical-line-start { grid-area: 1/6 / span 20 / span 1; }
.vertical-line-center{ grid-area: 1/11 / span 20 / span 1; }
.vertical-line-end { grid-area: 1/16 / span 20 / span 1; }
.vertical-line,
.vertical-line-start,
.vertical-line-center,
.vertical-line-end {
z-index: var(--z-base);
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
grid-area: 1/16 / span 20 / span 1;
height: 150%;
pointer-events: none;
}
@media screen and (min-width: 700px) {

7
src/views/About.svelte
View file

@ -77,6 +77,7 @@
</script>
<div class="about golden-grid page-scrollable" bind:this={sectionEl} onscroll={() => navigation.setScrolled(sectionEl.scrollTop > 100)}>
<div class="page-container">
<!-- Intro -->
<section class="about-intro">
@ -182,12 +183,18 @@
}
.page-container {
align-items: center;
display: flex;
flex-direction: column;
font-size: 18px;
font-size: var(--font-size-paragraph);
grid-area: 6/6/span 7/span 10;
height: 100%;
place-self: center;
text-align: center;
white-space: pre-line;
width: 100%;
overflow:visible;
}
/* ── Intro ── */

16
src/views/Expertise.svelte
View file

@ -284,13 +284,6 @@
</video>
</div>
<!-- Decorative vertical lines -->
<div class="vertical-line-start" aria-hidden="true"></div>
<div class="vertical-line vertical-line-col8" aria-hidden="true"></div>
<div class="vertical-line-center" aria-hidden="true"></div>
<div class="vertical-line vertical-line-col14" aria-hidden="true"></div>
<div class="vertical-line-end" aria-hidden="true"></div>
<!-- Title -->
<h2 class="expertise-title">
{@html data?.pageTitle ?? ''}
@ -345,15 +338,6 @@
opacity: 1;
}
/* Custom vertical lines */
.vertical-line-col8 {
grid-area: 1/8 / span 20 / span 1;
}
.vertical-line-col14 {
grid-area: 1/14 / span 20 / span 1;
}
/* Title */
.expertise-title {
grid-area: 8/6 / span 5 / span 5;

4
src/views/Home.svelte
View file

@ -87,10 +87,6 @@
</figure>
</div>
<div class="vertical-line-start"></div>
<div class="vertical-line-center"></div>
<div class="vertical-line-end"></div>
<div class="home-text">
<h2 class="font-face-danzza-light home-subtitle">
{data.hero.subtitle}

13
src/views/Portfolio.svelte
View file

@ -156,10 +156,6 @@
bind:this={sectionEl}
aria-label="Portfolio"
>
<!-- Decorative vertical lines -->
<div class="vertical-line-center" aria-hidden="true"></div>
<div class="vertical-line-end" aria-hidden="true"></div>
{#if currentProject}
<!-- Galerie animation (gauche desktop / plein écran mobile) -->
<div class="portfolio-gallery desktop-only" aria-hidden="true">
@ -243,15 +239,6 @@
background-size: cover;
}
/* Custom vertical lines */
.vertical-line-col8 {
grid-area: 1/8 / span 20 / span 1;
}
.vertical-line-col14 {
grid-area: 1/14 / span 20 / span 1;
}
/* Desktop layout */
.portfolio-gallery {
grid-area: 1/1 / span 20 / span 7;