studio-variable/hecq-et-lesort
5
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

resolve conflicts

Browse source
This commit is contained in:
isUnknown 2026-06-23 15:25:19 +02:00
parent 3a31db33e9
commit 36d3926c85
16 changed files with 172 additions and 288 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/css/src/_header.scss
View file

@ -30,6 +30,10 @@ display: none;
nav ul {
display: flex;
justify-content: space-between;
li {
display: flex;
align-items: center;
}
}
.top {
display: flex;
@ -82,7 +86,7 @@ display: none;
inset: 0;
z-index: 1;
padding: 2rem;
padding: 1rem 2rem;
border-right: var(--border);
border-left: var(--border);

58
assets/css/src/_slideshow.scss
View file

@ -10,9 +10,6 @@
height: 100%;
position: absolute;
text-align: center;
color: #fff;
transition: all 1s cubic-bezier(0.22, 1.15, 0.36, 1);
&.active,
@ -22,9 +19,6 @@
}
&.next {
&[data-type="insert"] {
left: 100vw;
}
&.right {
left: 100vw;
}
@ -45,43 +39,11 @@
}
}
&[data-type="title"] {
display: flex;
justify-content: center;
align-items: center;
&:not(.active) {
left: 100vw;
}
h1 {
font-size: 7vw;
}
}
&[data-type="image"] {
&[data-orientation="portrait"] {
width: 50%;
}
}
&[data-type="insert"] {
width: 100vw;
height: 100%;
display: flex;
align-items: center;
margin-left: 10vw;
dl {
color: #fff;
dt {
font-size: 2vw;
}
dd {
font-size: 5vw;
}
}
}
}
.slide[data-orientation="portrait"] + .slide[data-orientation="portrait"] {
&.active,
&.previous {
@ -89,18 +51,18 @@
}
}
.slide[data-type="insert"] + .slide[data-type="insert"] {
justify-content: flex-end;
transform: translateY(0);
margin-left: -10vw;
@media (max-width: 799px) {
.slide[data-orientation="landscape"] {
width: 50%;
}
.slide[data-type="insert"]
+ .slide[data-type="insert"]
+ .slide[data-type="insert"] {
justify-content: center;
transform: translateY(-10rem);
margin-left: 0;
.slide[data-orientation="landscape"]
+ .slide[data-orientation="landscape"] {
&.active,
&.previous {
left: 50%;
}
}
}
}
}

2
assets/css/src/_variables.scss
View file

@ -14,7 +14,7 @@
--font-sans-serif: "Bartok", sans-serif;
--font-serif: "SancySlab", serif;
--font-size-S: 0.8rem;
--font-size-S: 1rem;
--font-size-M: 1.6rem;
--font-size-L: 3rem;
--font-size-XL: 8rem;

1
assets/css/src/pages/_agenda.scss
View file

@ -51,7 +51,6 @@
width: 50vw;
font-size: 4rem;
font-weight: 500;
button {
font-size: inherit;

21
assets/css/src/pages/_event.scss
View file

@ -1,15 +1,24 @@
[data-template="event"] {
main {
.gallery {
margin-bottom: 4rem;
}
article {
box-sizing: border-box;
width: 100%;
padding: 2rem;
width: 60rem;
margin: 4rem auto;
p {
font-size: 1.8rem;
line-height: 1.2;
}
}
.main-credits {
text-align: center;
padding-top: var(--space-body);
margin: 2rem 0;
dl {
padding-bottom: 0.5em;
}
@ -33,7 +42,7 @@
font-size: var(--font-size-M);
border: var(--border);
border-radius: var(--border-radius);
padding: 2rem;
padding: 1.5rem 2rem;
margin-bottom: calc(-1 * var(--border-radius) * 2);
summary {
list-style: none;
@ -68,9 +77,13 @@
}
}
&.secondary-credits {
background-color: var(--color-grey);
background-color: var(--color-green);
.wrapper {
text-align: center;
p:not(:last-child) {
margin-bottom: 2rem;
}
}
}
&.dates {

8
assets/css/src/pages/_events.scss
View file

@ -26,15 +26,14 @@
main {
.events-grid {
box-sizing: border-box;
padding: 2rem;
padding: 0 2rem;
padding-top: 9rem;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: flex-end;
gap: 2rem;
column-gap: 2rem;
row-gap: 4rem;
.event-card {
h2 {
@ -45,6 +44,7 @@
font-family: "SancySlab", serif;
font-size: 3rem;
font-weight: 400;
line-height: 1;
display: flex;
justify-content: center;
align-items: flex-end;

5
assets/css/src/pages/_home.scss
View file

@ -37,7 +37,7 @@
}
a {
font-size: 4rem;
font-size: 3rem;
}
}
}
@ -82,8 +82,7 @@
}
&[data-mode="fade"] .outfit {
transition: opacity 0.08s ease-in-out, width 0.7s var(--curve),
transform 0.7s var(--curve) 0.2s;
transition: width 0.7s var(--curve), transform 0.7s var(--curve) 0.2s;
}
}

87
assets/css/style.css
View file

@ -100,7 +100,7 @@ a {
--curve: cubic-bezier(0.65, 0, 0.35, 1);
--font-sans-serif: "Bartok", sans-serif;
--font-serif: "SancySlab", serif;
--font-size-S: 0.8rem;
--font-size-S: 1rem;
--font-size-M: 1.6rem;
--font-size-L: 3rem;
--font-size-XL: 8rem;
@ -200,6 +200,10 @@ summary {
display: flex;
justify-content: space-between;
}
.main-header nav ul li {
display: flex;
align-items: center;
}
.main-header .top {
display: flex;
justify-content: flex-end;
@ -245,7 +249,7 @@ summary {
position: relative;
inset: 0;
z-index: 1;
padding: 2rem;
padding: 1rem 2rem;
border-right: var(--border);
border-left: var(--border);
border-bottom: var(--border);
@ -372,7 +376,7 @@ summary {
align-self: flex-end;
}
[data-template=home] nav ul li a {
font-size: 4rem;
font-size: 3rem;
}
[data-template=home] .mention {
position: absolute;
@ -409,7 +413,7 @@ summary {
animation: flip 3s var(--curve);
}
[data-template=home] .identity[data-mode=fade] .outfit {
transition: opacity 0.08s ease-in-out, width 0.7s var(--curve), transform 0.7s var(--curve) 0.2s;
transition: width 0.7s var(--curve), transform 0.7s var(--curve) 0.2s;
}
[data-template=home] #log-angle {
position: fixed;
@ -460,13 +464,15 @@ summary {
}
[data-template=events] main .events-grid {
box-sizing: border-box;
padding: 2rem;
padding: 0 2rem;
padding-top: 9rem;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: flex-end;
gap: 2rem;
-moz-column-gap: 2rem;
column-gap: 2rem;
row-gap: 4rem;
}
[data-template=events] main .events-grid .event-card h2 {
box-sizing: border-box;
@ -476,6 +482,7 @@ summary {
font-family: "SancySlab", serif;
font-size: 3rem;
font-weight: 400;
line-height: 1;
display: flex;
justify-content: center;
align-items: flex-end;
@ -507,14 +514,22 @@ summary {
font-family: var(--font-serif);
}
[data-template=event] main .gallery {
margin-bottom: 4rem;
}
[data-template=event] main article {
box-sizing: border-box;
width: 100%;
padding: 2rem;
width: 60rem;
margin: 4rem auto;
}
[data-template=event] main article p {
font-size: 1.8rem;
line-height: 1.2;
}
[data-template=event] main .main-credits {
text-align: center;
padding-top: var(--space-body);
margin: 2rem 0;
}
[data-template=event] main .main-credits dl {
padding-bottom: 0.5em;
@ -536,7 +551,7 @@ summary {
font-size: var(--font-size-M);
border: var(--border);
border-radius: var(--border-radius);
padding: 2rem;
padding: 1.5rem 2rem;
margin-bottom: calc(-1 * var(--border-radius) * 2);
}
[data-template=event] main details summary {
@ -570,11 +585,14 @@ summary {
padding-bottom: 2.5rem;
}
[data-template=event] main details.secondary-credits {
background-color: var(--color-grey);
background-color: var(--color-green);
}
[data-template=event] main details.secondary-credits .wrapper {
text-align: center;
}
[data-template=event] main details.secondary-credits .wrapper p:not(:last-child) {
margin-bottom: 2rem;
}
[data-template=event] main details.dates {
background-color: var(--color-beige);
}
@ -636,7 +654,6 @@ summary {
justify-content: space-between;
width: 50vw;
font-size: 4rem;
font-weight: 500;
}
[data-template=agenda] main .dates-container .month-switcher button {
font-size: inherit;
@ -676,17 +693,12 @@ summary {
width: 100vw;
height: 100%;
position: absolute;
text-align: center;
color: #fff;
transition: all 1s cubic-bezier(0.22, 1.15, 0.36, 1);
}
.gallery .slides .slide.active, .gallery .slides .slide.previous {
left: 0vw;
top: 0vw;
}
.gallery .slides .slide.next[data-type=insert] {
left: 100vw;
}
.gallery .slides .slide.next.right {
left: 100vw;
}
@ -705,46 +717,17 @@ summary {
-o-object-fit: cover;
object-fit: cover;
}
.gallery .slides .slide[data-type=title] {
display: flex;
justify-content: center;
align-items: center;
}
.gallery .slides .slide[data-type=title]:not(.active) {
left: 100vw;
}
.gallery .slides .slide[data-type=title] h1 {
font-size: 7vw;
}
.gallery .slides .slide[data-type=image][data-orientation=portrait] {
.gallery .slides .slide[data-orientation=portrait] {
width: 50%;
}
.gallery .slides .slide[data-type=insert] {
width: 100vw;
height: 100%;
display: flex;
align-items: center;
margin-left: 10vw;
}
.gallery .slides .slide[data-type=insert] dl {
color: #fff;
}
.gallery .slides .slide[data-type=insert] dl dt {
font-size: 2vw;
}
.gallery .slides .slide[data-type=insert] dl dd {
font-size: 5vw;
}
.gallery .slides .slide[data-orientation=portrait] + .slide[data-orientation=portrait].active, .gallery .slides .slide[data-orientation=portrait] + .slide[data-orientation=portrait].previous {
left: 50%;
}
.gallery .slides .slide[data-type=insert] + .slide[data-type=insert] {
justify-content: flex-end;
transform: translateY(0);
margin-left: -10vw;
@media (max-width: 799px) {
.gallery .slides .slide[data-orientation=landscape] {
width: 50%;
}
.gallery .slides .slide[data-orientation=landscape] + .slide[data-orientation=landscape].active, .gallery .slides .slide[data-orientation=landscape] + .slide[data-orientation=landscape].previous {
left: 50%;
}
.gallery .slides .slide[data-type=insert] + .slide[data-type=insert] + .slide[data-type=insert] {
justify-content: center;
transform: translateY(-10rem);
margin-left: 0;
}/*# sourceMappingURL=style.css.map */

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

12
assets/js/characters/roll.js
View file

@ -1,5 +1,5 @@
const ANIMATION_MODE = 'fade'; // 'flip' | 'fade'
const ANIM_DURATION_MS = 3000;
const ANIMATION_MODE = "fade"; // 'flip' | 'fade'
const ANIM_DURATION_MS = 5000;
export function initRollOutfit() {
const container = document.querySelector(".identity");
@ -8,13 +8,17 @@ export function initRollOutfit() {
let currentIndex = 0;
// cubic-bezier(0.65, 0, 0.35, 1) — matches var(--curve)
const CX1 = 0.65, CY1 = 0, CX2 = 0.35, CY2 = 1;
const CX1 = 0.65,
CY1 = 0,
CX2 = 0.35,
CY2 = 1;
const bezier = (t, p1, p2) =>
3 * (1 - t) * (1 - t) * t * p1 + 3 * (1 - t) * t * t * p2 + t * t * t;
const solveBezierT = (targetY) => {
let lo = 0, hi = 1;
let lo = 0,
hi = 1;
for (let i = 0; i < 50; i++) {
const mid = (lo + hi) / 2;
bezier(mid, CY1, CY2) < targetY ? (lo = mid) : (hi = mid);

4
assets/js/script.js
View file

@ -1,7 +1,7 @@
import { initCharacterJump } from "./characters/jump.js";
import { initPupilTracking } from "./characters/pupilTracking.js";
import { initEventFilters } from "./filters.js";
import { CreditsSlideshow } from "./slideshow.js";
import { Slideshow } from "./slideshow.js";
import { initRollOutfit } from "./characters/roll.js";
document.addEventListener("DOMContentLoaded", () => {
@ -55,7 +55,7 @@ document.addEventListener("DOMContentLoaded", () => {
if (svg) initPupilTracking(svg);
initEventFilters();
initRollOutfit();
const gallery = new CreditsSlideshow(".gallery");
const gallery = new Slideshow(".gallery");
});
window.addEventListener("scroll", (event) => {

171
assets/js/slideshow.js
View file

@ -1,92 +1,56 @@
function prepareSlides(nodes) {
const slides = [...nodes].map((node) => {
const slide = { type: node.dataset.type, node: node };
if (node.dataset.type === "image") {
slide.orientation = node.dataset.orientation;
}
return slide;
});
return {
all: slides,
title: slides.find((slide) => slide.type === "title"),
images: slides.filter((slide) => slide.type === "image"),
inserts: slides.filter((slide) => slide.type === "insert"),
};
return [...nodes].map((node) => ({
orientation: node.dataset.orientation,
node,
}));
}
export class CreditsSlideshow {
export class Slideshow {
constructor(slideshowSelector) {
this.node = document.querySelector(slideshowSelector);
if (!this.node) return;
this.slides = prepareSlides(this.node.querySelectorAll(".slide"));
this.init(this.slides);
this.next();
if (!this.slides.length) return;
this.init();
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowRight") this.next();
if (e.key === "ArrowLeft") this.prev();
});
}
init(slides) {
slides.all.forEach((slide) => {
if (slide === slides.images[0]) {
slide.node.classList.add("active");
} else {
slide.node.classList.add("next");
this.assignDirection(slide);
}
init() {
this.slides.forEach((slide, i) => {
slide.node.classList.add(i === 0 ? "active" : "next");
if (i !== 0) this.assignDirection(slide);
});
this.currentSlide = slides.images[0];
this.nextImageIndex = 1;
this.insertsShownInGroup = 0;
this.portraitPairDone = false;
this.currentGroup = [{ slide: slides.images[0], auto: false }];
this.currentIndex = 0;
this.pairDone = false;
this.currentGroup = [{ index: 0, auto: false }];
this.groupHistory = [];
this.zIndex = 0;
slides.images[0].node.style.zIndex = 0;
this.slides[0].node.style.zIndex = 0;
}
resolveNextSlide() {
const current = this.currentSlide;
isPair(current, next) {
const isMobile = window.innerWidth < 800;
const nextImage = this.slides.images[this.nextImageIndex] ?? null;
const nextInsert =
this.slides.inserts.find((s) => !s.node.classList.contains("active")) ??
null;
const canAddInsert =
!isMobile && nextInsert && this.insertsShownInGroup < 3;
if (current === this.slides.images[0]) {
return { slide: this.slides.title, auto: true };
return (
(!isMobile && current.orientation === "portrait" && next.orientation === "portrait") ||
(isMobile && current.orientation === "landscape" && next.orientation === "landscape")
);
}
if (current === this.slides.title) {
return { slide: nextImage, auto: false };
resolveNext() {
const nextIndex = this.currentIndex + 1;
if (nextIndex >= this.slides.length) return { index: null, auto: false };
if (!this.pairDone && this.isPair(this.slides[this.currentIndex], this.slides[nextIndex])) {
return { index: nextIndex, auto: true };
}
if (current.type === "image") {
if (
!isMobile &&
!this.portraitPairDone &&
current.orientation === "portrait" &&
nextImage?.orientation === "portrait"
) {
return { slide: nextImage, auto: true };
}
if (canAddInsert) return { slide: nextInsert, auto: true };
}
if (current.type === "insert" && canAddInsert) {
return { slide: nextInsert, auto: true };
}
return { slide: nextImage, auto: false };
return { index: nextIndex, auto: false };
}
assignDirection(slide) {
if (slide.type !== "image") return;
const dirs = ["top", "right", "bottom"];
slide.node.classList.add(dirs[Math.floor(Math.random() * 3)]);
}
@ -103,46 +67,32 @@ export class CreditsSlideshow {
to.node.classList.replace("next", "active");
}
updateState(slide, auto) {
this.currentSlide = slide;
if (slide.type === "image") {
if (auto) {
this.currentGroup.push({ slide, auto });
} else {
this.groupHistory.push(this.currentGroup);
this.currentGroup = [{ slide, auto }];
}
this.nextImageIndex = this.slides.images.indexOf(slide) + 1;
this.insertsShownInGroup = 0;
this.portraitPairDone = auto;
} else {
this.currentGroup.push({ slide, auto });
if (slide.type === "insert") this.insertsShownInGroup++;
}
}
next() {
let { index: nextIndex, auto } = this.resolveNext();
prepareLoop() {
if (nextIndex === null) {
this.groupHistory = [];
this.currentGroup = [];
this.insertsShownInGroup = 0;
this.portraitPairDone = false;
}
next() {
let { slide: nextSlide, auto } = this.resolveNextSlide();
if (!nextSlide) {
this.prepareLoop();
nextSlide = this.slides.images[0];
this.pairDone = false;
nextIndex = 0;
auto = false;
}
const nextSlide = this.slides[nextIndex];
if (nextSlide.node.classList.contains("previous")) this.sendToNext(nextSlide);
this.transition(this.currentSlide, nextSlide);
this.updateState(nextSlide, auto);
this.transition(this.slides[this.currentIndex], nextSlide);
this.currentIndex = nextIndex;
this.pairDone = auto;
if (this.resolveNextSlide().auto) {
if (auto) {
this.currentGroup.push({ index: nextIndex, auto });
} else {
this.groupHistory.push(this.currentGroup);
this.currentGroup = [{ index: nextIndex, auto }];
}
if (this.resolveNext().auto) {
setTimeout(() => this.next(), 200 + Math.random() * 300);
}
}
@ -150,19 +100,13 @@ export class CreditsSlideshow {
prev() {
if (this.currentGroup.length > 1) {
const leaving = this.currentGroup.pop();
this.sendToNext(leaving.slide);
this.sendToNext(this.slides[leaving.index]);
const arriving = this.currentGroup[this.currentGroup.length - 1];
arriving.slide.node.style.zIndex = ++this.zIndex;
arriving.slide.node.classList.replace("previous", "active");
this.currentSlide = arriving.slide;
if (leaving.slide.type === "insert") {
this.insertsShownInGroup--;
} else if (leaving.slide.type === "image") {
this.nextImageIndex = this.slides.images.indexOf(arriving.slide) + 1;
this.portraitPairDone = false;
}
this.slides[arriving.index].node.style.zIndex = ++this.zIndex;
this.slides[arriving.index].node.classList.replace("previous", "active");
this.currentIndex = arriving.index;
this.pairDone = false;
if (arriving.auto) {
setTimeout(() => this.prev(), 250 + Math.random() * 250);
@ -173,23 +117,16 @@ export class CreditsSlideshow {
if (!this.groupHistory.length) return;
const leaving = this.currentGroup[0];
this.sendToNext(leaving.slide);
this.sendToNext(this.slides[leaving.index]);
const prevGroup = this.groupHistory.pop();
if (!prevGroup.length) return;
this.currentGroup = prevGroup;
const arriving = prevGroup[prevGroup.length - 1];
arriving.slide.node.style.zIndex = ++this.zIndex;
arriving.slide.node.classList.replace("previous", "active");
this.currentSlide = arriving.slide;
const prevImages = prevGroup.filter((s) => s.slide.type === "image");
this.nextImageIndex =
this.slides.images.indexOf(prevImages[prevImages.length - 1].slide) + 1;
this.insertsShownInGroup = prevGroup.filter(
(s) => s.slide.type === "insert"
).length;
this.portraitPairDone = prevImages.length > 1;
this.slides[arriving.index].node.style.zIndex = ++this.zIndex;
this.slides[arriving.index].node.classList.replace("previous", "active");
this.currentIndex = arriving.index;
this.pairDone = prevGroup.length > 1;
}
}

1
site/snippets/header.php
View file

@ -27,6 +27,5 @@
</ul>
</nav>
</div>
</header>
<main>

17
site/templates/event.php
View file

@ -7,18 +7,10 @@
<div class="gallery">
<div class="slides">
<div
class="slide"
data-type="title"
>
<h1><?= $page->title() ?></h1>
</div>
<?php foreach ($page->gallery()->toFiles() as $index => $image): ?>
<div
class="slide"
data-orientation="<?= $image->orientation() ?>"
data-type="image"
>
<?php snippet('picture', [
'file' => $image,
@ -33,6 +25,9 @@
</div>
<?php endif ?>
<h1 class="event-title">
<?= $page->title() ?>
</h1>
<div class="main-credits">
<?php foreach ($page->mainCredits()->toStructure() as $credit): ?>
@ -43,10 +38,6 @@
<?php endforeach ?>
</div>
<h1 class="event-title">
<?= $page->title() ?>
</h1>
<article>
<div class="presentation">
<?= $page->presentation() ?>
@ -55,7 +46,7 @@
<details class="secondary-credits">
<summary>
Distribution & production
Générique
</summary>
<div class="wrapper">
<?php foreach ($page->secondaryCredits()->toBlocks() as $secondaryCredit): ?>

7
site/templates/events.php
View file

@ -22,13 +22,6 @@
'alt' => $event->title()->value(),
]) ?>
</div>
<div class="infos bottom-tab">
<?php if ($event->isFromCompany()->isTrue()): ?>
<p>compagnie</p>
<?php else: ?>
<p>hors compagnie</p>
<?php endif ?>
</div>
</a>
</li>
<?php endforeach ?>

2
site/templates/home.php
View file

@ -7,7 +7,7 @@
<li><a href="#">Contact</a></li>
</ul>
</nav>
<p class="mention">compagnie Hecq & Lesort — <a href="#">mentions légales</a></p>
<p class="mention">compagnie Lesort Hecq — <a href="#">mentions légales</a></p>
<div class="identity">
<h1 class="logo">
Lesort<br>