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

home : add nav items
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s
Details

Browse source
This commit is contained in:
isUnknown 2026-06-22 11:46:34 +02:00
parent 4a84499761
commit b7c1574832
4 changed files with 107 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,17 +8,50 @@
}
[data-template="home"] {
background-color: var(--color-beige);
nav {
position: absolute;
inset: 0;
z-index: 2;
ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
box-sizing: border-box;
padding: 1rem;
li {
&:nth-child(2) {
justify-self: flex-end;
}
&:nth-child(3) {
align-self: flex-end;
}
&:nth-child(4) {
justify-self: flex-end;
align-self: flex-end;
}
a {
font-size: 4rem;
}
}
}
}
.identity {
position: relative;
height: 100vh;
width: 100%;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
.outfit {
position: absolute;
top: 0;
left: 0;
width: 30%;
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center center;

46
assets/images/characters/characters-no-outfit.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="191px" height="163px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">
<g transform="matrix(1,0,0,1,-379.932397,-101.861172)">
<path d="M518.5,164.85C518.5,164.85 516.34,171.67 520.73,174.87C524.88,177.89 525.79,180.19 525.44,182.28C524.73,186.48 519.58,186.98 517.69,187.02" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M499.12,197.5C495.07,188.8 506.71,190.56 510.84,182.28" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M537.63,197.76C541.17,190.15 533.19,190.18 528.73,185.79" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M517.39,197.65C517.92,197.64 518.53,197.52 519.28,197.26C524.01,195.62 529.81,197.26 529.81,197.26C525.96,201.18 520.98,202.38 517.42,202.18L517.34,202.18C513.78,202.38 508.8,201.18 504.95,197.26C504.95,197.26 510.75,195.62 515.48,197.26C516.23,197.52 516.84,197.63 517.37,197.65L517.39,197.65Z" style="fill-rule:nonzero;"/>
<path d="M524.93,251.04C524.93,251.04 534.26,252.82 537.62,255.21C540.97,257.6 523.6,256.48 523.6,256.48L524.93,251.04Z" style="fill-rule:nonzero;"/>
<path d="M523.72,250.37C531.46,236.43 523.72,223.22 523.72,223.22" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M509.96,251.04C509.96,251.04 500.63,252.82 497.27,255.21C493.92,257.6 511.29,256.48 511.29,256.48L509.96,251.04Z" style="fill-rule:nonzero;"/>
<path d="M511.16,250.37C503.42,236.43 511.16,223.22 511.16,223.22" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M449.4,251.04C449.4,251.04 458.73,252.82 462.09,255.21C465.44,257.6 448.07,256.48 448.07,256.48L449.4,251.04Z" style="fill-rule:nonzero;"/>
<path d="M448.19,250.37C455.93,236.43 448.19,223.22 448.19,223.22" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M434.43,251.04C434.43,251.04 425.1,252.82 421.74,255.21C418.39,257.6 435.76,256.48 435.76,256.48L434.43,251.04Z" style="fill-rule:nonzero;"/>
<path d="M435.64,250.37C427.9,236.43 435.64,223.22 435.64,223.22" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M450.47,131.86C452.9,136.43 466.77,157.47 478.16,157.98" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M407.63,186.6C417.1,169.5 399.58,146.85 430.09,136.06C438.46,133.1 448.62,132.37 449.58,124.58" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M443.37,198.93C444.22,198.44 445.41,198.04 448.56,199.14C454.02,201.05 456.91,200.68 456.91,200.68C456.91,200.68 451.31,206.26 441.9,206.26C432.49,206.26 426.89,200.68 426.89,200.68C426.89,200.68 429.78,201.05 435.24,199.14C438.4,198.04 439.58,198.44 440.43,198.93C440.68,199.08 441.23,199.37 441.89,199.37C442.55,199.37 443.09,199.07 443.35,198.93L443.37,198.93Z" style="fill-rule:nonzero;"/>
<path d="M441.9,168.98C441.9,168.98 440.61,173 443.08,177.38C445.39,181.49 449.31,181.62 449.35,185.13C449.38,188.06 445.28,190.16 443.17,190.47" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M479.71,150.98C478.74,140.7 474.74,132.16 467.71,126.42C466.06,125.07 455.58,115.73 441.91,115.73C428.24,115.73 417.76,125.07 416.11,126.42C389.15,148.47 407.89,172.46 398.02,194.01C393.7,203.45 390.25,214.66 400.58,221.43" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M479.71,150.98C478.74,140.7 474.74,132.16 467.71,126.42C466.06,125.07 455.58,115.73 441.91,115.73C428.24,115.73 417.76,125.07 416.11,126.42C389.15,148.47 407.89,172.46 398.02,194.01C393.7,203.45 390.25,214.66 400.58,221.43" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M407.66,192.52C404.81,197.58 403.38,201.93 403.02,205.63C401.88,217.34 411.47,222.57 421.01,223.13" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M481.33,188.68C479.19,201.74 491.85,207.86 484.3,221.97" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M476.38,192.62C472.57,205.29 482.37,214.75 471.08,222.55" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M471.17,159.63C471.17,159.63 474.72,174.88 472.46,184.53C470.19,194.18 469.01,202.59 468.6,204.16C466.61,211.64 460.82,215.11 455.07,217.8C449.76,220.29 447.14,221.43 441.92,221.43C436.7,221.43 434.08,220.29 428.77,217.8C423.03,215.1 417.23,211.64 415.24,204.16C414.84,202.67 413.76,195.04 411.72,186.04" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M549.43,185.12C553.89,185.51 553.82,181.93 553.62,178.95C553.31,174.1 556.2,172 556.57,169.78C557.39,164.94 554.25,163.06 551.59,164.84" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M553.2,181.82C555.42,183.14 556.15,185.96 554.83,188.11C553.51,190.26 550.63,190.93 548.41,189.6C546.19,188.27 545.46,185.46 546.78,183.31" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M484.79,185.12C480.33,185.51 480.4,181.93 480.6,178.95C480.91,174.1 478.02,172 477.65,169.78C476.83,164.94 479.97,163.06 482.63,164.84" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M486.73,185.68C486.44,188.26 486.76,189.56 487.06,191.18C487.86,195.43 490.29,202.15 497.5,208.52C501.97,212.47 503.01,221.43 517.39,221.43C531.76,221.43 532.81,212.47 537.28,208.52C542.75,203.69 545.46,198.65 546.81,194.64C547.1,193.78 547.56,192.17 547.7,191.58" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M523.32,208.76C519.84,207.17 514.21,207.17 510.72,208.76" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M498.48,163.27C497.65,165.03 498.34,167.1 500.04,167.91C501.74,168.72 503.78,167.94 504.62,166.19C505.46,164.44 504.76,162.36 503.06,161.55C501.37,160.75 499.32,161.52 498.48,163.27ZM499.27,164.45C499.56,163.85 500.26,163.58 500.84,163.86C501.42,164.14 501.66,164.85 501.37,165.45C501.08,166.05 500.38,166.32 499.8,166.04C499.22,165.76 498.98,165.05 499.27,164.45Z" style="fill-rule:nonzero;"/>
<path d="M534.22,167.38C535.63,166.14 535.74,163.96 534.45,162.49C533.17,161.03 530.99,160.84 529.57,162.08C528.16,163.32 528.05,165.5 529.34,166.97C530.62,168.43 532.8,168.62 534.21,167.38L534.22,167.38ZM529.86,163.94C530.34,163.52 531.09,163.58 531.53,164.08C531.97,164.58 531.93,165.33 531.45,165.76C530.97,166.19 530.22,166.12 529.78,165.62C529.34,165.12 529.38,164.37 529.86,163.94Z" style="fill-rule:nonzero;"/>
<path d="M513.42,157.74C513.42,157.74 508.56,156.5 504.88,154.69C501.46,153.02 497.7,150.74 497.7,150.74C497.7,150.74 493.33,156.18 491.06,157.17" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M520.64,157.74C520.64,157.74 525.5,156.5 529.18,154.69C532.6,153.02 536.36,150.74 536.36,150.74C536.36,150.74 540.73,156.18 543,157.17" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M510.13,166.15C508.02,164.27 505.22,161.89 501.71,161.88C499.17,161.88 496.25,163.11 492.95,166.67" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M523.93,166.15C527.57,162.92 533.24,158.18 541.11,166.68" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M548.49,168.85C551.2,147.97 550.91,139.03 544.55,130.91C536.77,120.99 524.16,115.73 517.03,115.73C509.9,115.73 497.28,120.99 489.51,130.91C483.15,139.03 482.86,147.97 485.57,168.85" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M415.32,163.59C415.32,163.59 421.48,157.98 428.48,159.81C433.7,161.17 434.06,161.7 437.75,162.21" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M416.77,170.47C420.76,167.1 426.82,162.96 436.3,169.84" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M423.3,167.41C422.47,169.17 423.16,171.24 424.86,172.05C426.55,172.85 428.6,172.08 429.44,170.33C430.27,168.57 429.58,166.5 427.88,165.69C426.19,164.89 424.14,165.66 423.3,167.41ZM424.09,168.58C424.38,167.98 425.08,167.71 425.66,167.99C426.24,168.27 426.48,168.98 426.19,169.58C425.9,170.18 425.2,170.45 424.62,170.17C424.04,169.89 423.8,169.18 424.09,168.58Z" style="fill-rule:nonzero;"/>
<path d="M468.51,163.59C468.51,163.59 462.35,157.98 455.35,159.81C450.13,161.17 449.77,161.7 446.08,162.21" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M467.06,170.47C463.07,167.1 457.01,162.96 447.53,169.84" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M454.44,167.41C453.61,169.17 454.3,171.24 456,172.05C457.69,172.85 459.74,172.08 460.58,170.33C461.41,168.57 460.72,166.5 459.02,165.69C457.33,164.89 455.28,165.66 454.44,167.41ZM455.23,168.58C455.52,167.98 456.22,167.71 456.8,167.99C457.38,168.27 457.62,168.98 457.33,169.58C457.04,170.18 456.34,170.45 455.76,170.17C455.18,169.89 454.94,169.18 455.23,168.58Z" style="fill-rule:nonzero;"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.4 KiB

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

@ -30,11 +30,13 @@ export function initRollOutfit() {
return 0;
};
const switchImage = () => {
const switchImage = (targetIndex = null) => {
const now = performance.now();
if (now - lastSwitch < 50) return;
outfits[currentIndex]?.classList.remove("active");
currentIndex = (currentIndex + 1) % outfits.length;
currentIndex = targetIndex !== null
? targetIndex % outfits.length
: (currentIndex + 1) % outfits.length;
outfits[currentIndex]?.classList.add("active");
lastSwitch = now;
};
@ -54,6 +56,18 @@ export function initRollOutfit() {
}
};
const animDurationMs = parseFloat(getComputedStyle(outfits[0]).animationDuration) * 1000;
setTimeout(() => {
document.body.dataset.animationState = "finished";
}, animDurationMs);
document.querySelectorAll("nav a").forEach((link, index) => {
link.addEventListener("mouseenter", () => {
if (document.body.dataset.animationState !== "finished") return;
switchImage(index);
});
});
requestAnimationFrame(rollOutfit);
return { images, getRotateX, switchImage };

9
site/templates/home.php
View file

@ -1,9 +1,18 @@
<?php snippet('head') ?>
<nav>
<ul>
<li><a href="#">La compagnie</a></li>
<li><a href="#">Les spectacles</a></li>
<li><a href="#">Agenda</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="identity">
<img src="<?= url('assets/images/characters/characters-hypnotized.svg') ?>" alt="" class="outfit active">
<img src="<?= url('assets/images/characters/characters-kawai.svg') ?>" alt="" class="outfit">
<img src="<?= url('assets/images/characters/characters-pixels.svg') ?>" alt="" class="outfit">
<img src="<?= url('assets/images/characters/characters-spring.svg') ?>" alt="" class="outfit">
<img src="<?= url('assets/images/characters/characters-no-outfit.svg') ?>" alt="" class="outfit">
<img src="<?= url('assets/images/characters/characters-sunglasses.svg') ?>" alt="" class="outfit">
</div>
<?php snippet('footer') ?>