66 lines
2.1 KiB
SCSS
66 lines
2.1 KiB
SCSS
//
|
|
// Décors latéraux parallax v2.
|
|
//
|
|
// Un seul .decor-tile (= une "scène" verticale) défini ici puis cloné
|
|
// par JS (cf. setupBackgroundTiles dans js/erabletheme.js) pour remplir
|
|
// la hauteur de .layout-container. Si la page est plus courte que le
|
|
// tile, l'overflow caché de #background tronque proprement.
|
|
//
|
|
// Positionnement vertical : `top` en % du tile, pour que les frises
|
|
// soient repositionnées automatiquement dans chaque clone.
|
|
// Ancrage horizontal : .decor-left { left: 0 } / .decor-right { right: 0 }
|
|
// → bord gauche / droit du PNG collé au bord viewport.
|
|
//
|
|
|
|
$tile_height: 220vh;
|
|
|
|
#background {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
|
|
.decor-tile {
|
|
position: relative;
|
|
width: 100%;
|
|
height: $tile_height;
|
|
|
|
img {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
// largeur auto pour préserver le ratio des PNG ; on contrôle la
|
|
// taille via height (en vh) pour rester proportionnel au viewport.
|
|
width: auto;
|
|
}
|
|
|
|
.decor-left { left: 0; }
|
|
.decor-right { right: 0; }
|
|
|
|
// --- Frises gauches (6 répartiess sur la hauteur du tile) ---
|
|
.decor-left-1 { top: 2%; height: 20vh; }
|
|
.decor-left-2 { top: 18%; height: 32vh; }
|
|
.decor-left-3 { top: 38%; height: 42vh; }
|
|
.decor-left-4 { top: 58%; height: 12vh; }
|
|
.decor-left-5 { top: 70%; height: 22vh; }
|
|
.decor-left_6,
|
|
.decor-left-6 { top: 88%; height: 10vh; }
|
|
|
|
// --- Frises droites (13 réparties sur la hauteur du tile) ---
|
|
.decor-right-1 { top: 1%; height: 22vh; }
|
|
.decor-right-2 { top: 10%; height: 38vh; }
|
|
.decor-right-3 { top: 18%; height: 18vh; }
|
|
.decor-right-4 { top: 26%; height: 12vh; }
|
|
.decor-right-5 { top: 34%; height: 26vh; }
|
|
.decor-right-6 { top: 42%; height: 8vh; }
|
|
.decor-right-7 { top: 48%; height: 10vh; }
|
|
.decor-right-8 { top: 55%; height: 8vh; }
|
|
.decor-right-9 { top: 62%; height: 18vh; }
|
|
.decor-right-10 { top: 72%; height: 12vh; }
|
|
.decor-right-11 { top: 78%; height: 20vh; }
|
|
.decor-right-12 { top: 86%; height: 16vh; }
|
|
.decor-right-13 { top: 92%; height: 22vh; }
|
|
}
|
|
}
|