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

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

@ -11,12 +11,12 @@
font-size: var(--font-size-L); font-size: var(--font-size-L);
font-family: var(--font-serif); font-family: var(--font-serif);
.logo-menu{ .logo-menu {
font-family: var(--font-sans-serif); font-family: var(--font-sans-serif);
font-weight: 700; font-weight: 700;
line-height: 0.8em; line-height: 0.8em;
text-transform: uppercase; text-transform: uppercase;
display: none; display: none;
} }
&.small { &.small {
@ -30,6 +30,10 @@ display: none;
nav ul { nav ul {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
li {
display: flex;
align-items: center;
}
} }
.top { .top {
display: flex; display: flex;
@ -82,7 +86,7 @@ display: none;
inset: 0; inset: 0;
z-index: 1; z-index: 1;
padding: 2rem; padding: 1rem 2rem;
border-right: var(--border); border-right: var(--border);
border-left: var(--border); border-left: var(--border);

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

@ -10,9 +10,6 @@
height: 100%; height: 100%;
position: absolute; position: absolute;
text-align: center;
color: #fff;
transition: all 1s cubic-bezier(0.22, 1.15, 0.36, 1); transition: all 1s cubic-bezier(0.22, 1.15, 0.36, 1);
&.active, &.active,
@ -22,9 +19,6 @@
} }
&.next { &.next {
&[data-type="insert"] {
left: 100vw;
}
&.right { &.right {
left: 100vw; left: 100vw;
} }
@ -45,40 +39,8 @@
} }
} }
&[data-type="title"] { &[data-orientation="portrait"] {
display: flex; width: 50%;
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;
}
}
} }
} }
@ -89,18 +51,18 @@
} }
} }
.slide[data-type="insert"] + .slide[data-type="insert"] { @media (max-width: 799px) {
justify-content: flex-end; .slide[data-orientation="landscape"] {
transform: translateY(0); width: 50%;
margin-left: -10vw; }
}
.slide[data-type="insert"] .slide[data-orientation="landscape"]
+ .slide[data-type="insert"] + .slide[data-orientation="landscape"] {
+ .slide[data-type="insert"] { &.active,
justify-content: center; &.previous {
transform: translateY(-10rem); left: 50%;
margin-left: 0; }
}
} }
} }
} }

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

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

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

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

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

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

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

@ -11,8 +11,8 @@
transform: translateY(0rem); transform: translateY(0rem);
transition: background-color 0.2s var(--curve), transition: background-color 0.2s var(--curve),
transform 0.3s var(--curve); transform 0.3s var(--curve);
padding: 0.5rem 0.9rem; padding: 0.5rem 0.9rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
&.active { &.active {
transform: translateY(0rem); transform: translateY(0rem);
@ -25,16 +25,15 @@
main { main {
.events-grid { .events-grid {
box-sizing: border-box; box-sizing: border-box;
padding: 2rem; padding: 0 2rem;
padding-top: 9rem; padding-top: 9rem;
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
align-items: flex-end; align-items: flex-end;
gap: 2rem; column-gap: 2rem;
row-gap: 4rem;
.event-card { .event-card {
h2 { h2 {
@ -45,6 +44,7 @@
font-family: "SancySlab", serif; font-family: "SancySlab", serif;
font-size: 3rem; font-size: 3rem;
font-weight: 400; font-weight: 400;
line-height: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;

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

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

89
assets/css/style.css
View file

@ -100,7 +100,7 @@ a {
--curve: cubic-bezier(0.65, 0, 0.35, 1); --curve: cubic-bezier(0.65, 0, 0.35, 1);
--font-sans-serif: "Bartok", sans-serif; --font-sans-serif: "Bartok", sans-serif;
--font-serif: "SancySlab", serif; --font-serif: "SancySlab", serif;
--font-size-S: 0.8rem; --font-size-S: 1rem;
--font-size-M: 1.6rem; --font-size-M: 1.6rem;
--font-size-L: 3rem; --font-size-L: 3rem;
--font-size-XL: 8rem; --font-size-XL: 8rem;
@ -200,6 +200,10 @@ summary {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.main-header nav ul li {
display: flex;
align-items: center;
}
.main-header .top { .main-header .top {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -245,7 +249,7 @@ summary {
position: relative; position: relative;
inset: 0; inset: 0;
z-index: 1; z-index: 1;
padding: 2rem; padding: 1rem 2rem;
border-right: var(--border); border-right: var(--border);
border-left: var(--border); border-left: var(--border);
border-bottom: var(--border); border-bottom: var(--border);
@ -372,7 +376,7 @@ summary {
align-self: flex-end; align-self: flex-end;
} }
[data-template=home] nav ul li a { [data-template=home] nav ul li a {
font-size: 4rem; font-size: 3rem;
} }
[data-template=home] .mention { [data-template=home] .mention {
position: absolute; position: absolute;
@ -409,7 +413,7 @@ summary {
animation: flip 3s var(--curve); animation: flip 3s var(--curve);
} }
[data-template=home] .identity[data-mode=fade] .outfit { [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 { [data-template=home] #log-angle {
position: fixed; position: fixed;
@ -460,13 +464,15 @@ summary {
} }
[data-template=events] main .events-grid { [data-template=events] main .events-grid {
box-sizing: border-box; box-sizing: border-box;
padding: 2rem; padding: 0 2rem;
padding-top: 9rem; padding-top: 9rem;
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
align-items: flex-end; 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 { [data-template=events] main .events-grid .event-card h2 {
box-sizing: border-box; box-sizing: border-box;
@ -476,6 +482,7 @@ summary {
font-family: "SancySlab", serif; font-family: "SancySlab", serif;
font-size: 3rem; font-size: 3rem;
font-weight: 400; font-weight: 400;
line-height: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
@ -507,14 +514,22 @@ summary {
font-family: var(--font-serif); font-family: var(--font-serif);
} }
[data-template=event] main .gallery {
margin-bottom: 4rem;
}
[data-template=event] main article { [data-template=event] main article {
box-sizing: border-box; box-sizing: border-box;
width: 100%; 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 { [data-template=event] main .main-credits {
text-align: center; text-align: center;
padding-top: var(--space-body); margin: 2rem 0;
} }
[data-template=event] main .main-credits dl { [data-template=event] main .main-credits dl {
padding-bottom: 0.5em; padding-bottom: 0.5em;
@ -536,7 +551,7 @@ summary {
font-size: var(--font-size-M); font-size: var(--font-size-M);
border: var(--border); border: var(--border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 2rem; padding: 1.5rem 2rem;
margin-bottom: calc(-1 * var(--border-radius) * 2); margin-bottom: calc(-1 * var(--border-radius) * 2);
} }
[data-template=event] main details summary { [data-template=event] main details summary {
@ -570,11 +585,14 @@ summary {
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
[data-template=event] main details.secondary-credits { [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 { [data-template=event] main details.secondary-credits .wrapper {
text-align: center; text-align: center;
} }
[data-template=event] main details.secondary-credits .wrapper p:not(:last-child) {
margin-bottom: 2rem;
}
[data-template=event] main details.dates { [data-template=event] main details.dates {
background-color: var(--color-beige); background-color: var(--color-beige);
} }
@ -636,7 +654,6 @@ summary {
justify-content: space-between; justify-content: space-between;
width: 50vw; width: 50vw;
font-size: 4rem; font-size: 4rem;
font-weight: 500;
} }
[data-template=agenda] main .dates-container .month-switcher button { [data-template=agenda] main .dates-container .month-switcher button {
font-size: inherit; font-size: inherit;
@ -676,17 +693,12 @@ summary {
width: 100vw; width: 100vw;
height: 100%; height: 100%;
position: absolute; position: absolute;
text-align: center;
color: #fff;
transition: all 1s cubic-bezier(0.22, 1.15, 0.36, 1); transition: all 1s cubic-bezier(0.22, 1.15, 0.36, 1);
} }
.gallery .slides .slide.active, .gallery .slides .slide.previous { .gallery .slides .slide.active, .gallery .slides .slide.previous {
left: 0vw; left: 0vw;
top: 0vw; top: 0vw;
} }
.gallery .slides .slide.next[data-type=insert] {
left: 100vw;
}
.gallery .slides .slide.next.right { .gallery .slides .slide.next.right {
left: 100vw; left: 100vw;
} }
@ -705,46 +717,17 @@ summary {
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
} }
.gallery .slides .slide[data-type=title] { .gallery .slides .slide[data-orientation=portrait] {
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] {
width: 50%; 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 { .gallery .slides .slide[data-orientation=portrait] + .slide[data-orientation=portrait].active, .gallery .slides .slide[data-orientation=portrait] + .slide[data-orientation=portrait].previous {
left: 50%; left: 50%;
} }
.gallery .slides .slide[data-type=insert] + .slide[data-type=insert] { @media (max-width: 799px) {
justify-content: flex-end; .gallery .slides .slide[data-orientation=landscape] {
transform: translateY(0); width: 50%;
margin-left: -10vw; }
} .gallery .slides .slide[data-orientation=landscape] + .slide[data-orientation=landscape].active, .gallery .slides .slide[data-orientation=landscape] + .slide[data-orientation=landscape].previous {
.gallery .slides .slide[data-type=insert] + .slide[data-type=insert] + .slide[data-type=insert] { left: 50%;
justify-content: center; }
transform: translateY(-10rem);
margin-left: 0;
}/*# sourceMappingURL=style.css.map */ }/*# 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 ANIMATION_MODE = "fade"; // 'flip' | 'fade'
const ANIM_DURATION_MS = 3000; const ANIM_DURATION_MS = 5000;
export function initRollOutfit() { export function initRollOutfit() {
const container = document.querySelector(".identity"); const container = document.querySelector(".identity");
@ -8,13 +8,17 @@ export function initRollOutfit() {
let currentIndex = 0; let currentIndex = 0;
// cubic-bezier(0.65, 0, 0.35, 1) — matches var(--curve) // 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) => const bezier = (t, p1, p2) =>
3 * (1 - t) * (1 - t) * t * p1 + 3 * (1 - t) * t * t * p2 + t * t * t; 3 * (1 - t) * (1 - t) * t * p1 + 3 * (1 - t) * t * t * p2 + t * t * t;
const solveBezierT = (targetY) => { const solveBezierT = (targetY) => {
let lo = 0, hi = 1; let lo = 0,
hi = 1;
for (let i = 0; i < 50; i++) { for (let i = 0; i < 50; i++) {
const mid = (lo + hi) / 2; const mid = (lo + hi) / 2;
bezier(mid, CY1, CY2) < targetY ? (lo = mid) : (hi = mid); 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 { initCharacterJump } from "./characters/jump.js";
import { initPupilTracking } from "./characters/pupilTracking.js"; import { initPupilTracking } from "./characters/pupilTracking.js";
import { initEventFilters } from "./filters.js"; import { initEventFilters } from "./filters.js";
import { CreditsSlideshow } from "./slideshow.js"; import { Slideshow } from "./slideshow.js";
import { initRollOutfit } from "./characters/roll.js"; import { initRollOutfit } from "./characters/roll.js";
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
@ -55,7 +55,7 @@ document.addEventListener("DOMContentLoaded", () => {
if (svg) initPupilTracking(svg); if (svg) initPupilTracking(svg);
initEventFilters(); initEventFilters();
initRollOutfit(); initRollOutfit();
const gallery = new CreditsSlideshow(".gallery"); const gallery = new Slideshow(".gallery");
}); });
window.addEventListener("scroll", (event) => { window.addEventListener("scroll", (event) => {

175
assets/js/slideshow.js
View file

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

1
site/snippets/header.php
View file

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

33
site/templates/event.php
View file

@ -6,19 +6,11 @@
<?php if ($galleryImages->count()): ?> <?php if ($galleryImages->count()): ?>
<div class="gallery"> <div class="gallery">
<div class="slides"> <div class="slides">
<div
class="slide"
data-type="title"
>
<h1><?= $page->title() ?></h1>
</div>
<?php foreach ($page->gallery()->toFiles() as $index => $image): ?> <?php foreach ($page->gallery()->toFiles() as $index => $image): ?>
<div <div
class="slide" class="slide"
data-orientation="<?= $image->orientation() ?>" data-orientation="<?= $image->orientation() ?>"
data-type="image"
> >
<?php snippet('picture', [ <?php snippet('picture', [
'file' => $image, 'file' => $image,
@ -33,20 +25,19 @@
</div> </div>
<?php endif ?> <?php endif ?>
<div class="main-credits">
<?php foreach ($page->mainCredits()->toStructure() as $credit): ?>
<dl>
<dt><?= $credit->label() ?>&nbsp;:</dt>
<dd><?= $credit->value() ?></dd>
</dl>
<?php endforeach ?>
</div>
<h1 class="event-title"> <h1 class="event-title">
<?= $page->title() ?> <?= $page->title() ?>
</h1> </h1>
<div class="main-credits">
<?php foreach ($page->mainCredits()->toStructure() as $credit): ?>
<dl>
<dt><?= $credit->label() ?>&nbsp;:</dt>
<dd><?= $credit->value() ?></dd>
</dl>
<?php endforeach ?>
</div>
<article> <article>
<div class="presentation"> <div class="presentation">
<?= $page->presentation() ?> <?= $page->presentation() ?>
@ -55,7 +46,7 @@
<details class="secondary-credits"> <details class="secondary-credits">
<summary> <summary>
Distribution & production Générique
</summary> </summary>
<div class="wrapper"> <div class="wrapper">
<?php foreach ($page->secondaryCredits()->toBlocks() as $secondaryCredit): ?> <?php foreach ($page->secondaryCredits()->toBlocks() as $secondaryCredit): ?>

7
site/templates/events.php
View file

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

2
site/templates/home.php
View file

@ -7,7 +7,7 @@
<li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li>
</ul> </ul>
</nav> </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"> <div class="identity">
<h1 class="logo"> <h1 class="logo">
Lesort<br> Lesort<br>