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

events : implement new view buttons
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s
Details

Browse source
This commit is contained in:
isUnknown 2026-06-24 15:24:10 +02:00
parent 2cb641e4a8
commit 585437dcf1
11 changed files with 237 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
:root {
--color-green: #0bb786;
--color-green: #04c793;
--color-beige: #f3f0e7;
--color-grey: #a1a1bb;
--glow-green: var(--color-green) 0px 0px 30px;

20
assets/css/src/_view-buttons.scss
View file

@ -1,16 +1,24 @@
.sort-buttons {
background-color: transparent;
.view-buttons {
display: flex;
gap: 4rem;
box-sizing: border-box;
padding: 2rem;
margin: 3rem 0;
display: flex;
justify-content: center;
gap: 2rem;
li button {
font-family: var(--font-sans);
font-size: var(--font-size-L);
font-family: var(--font-sans-serif);
font-size: 1.2rem;
font-weight: 800;
padding: 0.3rem 0.7rem;
border-radius: 0.5rem;
border: var(--border);
box-shadow: inset 0 0 0px 0 0 var(--color-green);
transition: box-shadow 0.2s ease-in-out;
&.active {
text-decoration: underline;
box-shadow: inset 0 0 3px 1px var(--color-green);
}
}
}

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

@ -1,17 +1,19 @@
[data-template="events"] {
main {
.events-grid {
margin-top: -2px;
.events-grid-container {
box-sizing: border-box;
padding: 4rem 2rem;
padding: 0 2rem 4rem 2rem;
width: 100%;
background-color: var(--color-beige);
border-radius: var(--radius);
border: var(--border);
.events-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: flex-end;
column-gap: 2rem;
row-gap: 4rem;
background-color: var(--color-beige);
border-radius: var(--radius);
border: var(--border);
.event-card {
h2 {
@ -82,3 +84,4 @@
}
}
}
}

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

@ -16,7 +16,6 @@
nav {
position: absolute;
inset: 0;
z-index: 2;
ul {
display: grid;
@ -61,6 +60,12 @@
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
pointer-events: none;
svg {
pointer-events: all;
}
.outfit {
position: absolute;

61
assets/css/style.css
View file

@ -120,7 +120,7 @@ main {
font-style: italic;
}
:root {
--color-green: #0bb786;
--color-green: #04c793;
--color-beige: #f3f0e7;
--color-grey: #a1a1bb;
--glow-green: var(--color-green) 0px 0px 30px;
@ -220,19 +220,27 @@ main {
background-color: var(--color-beige);
}
.sort-buttons {
background-color: transparent;
.view-buttons {
display: flex;
gap: 4rem;
box-sizing: border-box;
padding: 2rem;
margin: 3rem 0;
display: flex;
justify-content: center;
gap: 2rem;
}
.sort-buttons li button {
font-family: var(--font-sans);
font-size: var(--font-size-L);
.view-buttons li button {
font-family: var(--font-sans-serif);
font-size: 1.2rem;
font-weight: 800;
padding: 0.3rem 0.7rem;
border-radius: 0.5rem;
border: var(--border);
box-shadow: inset 0 0 0px 0 0 var(--color-green);
transition: box-shadow 0.2s ease-in-out;
}
.sort-buttons li button.active {
text-decoration: underline;
.view-buttons li button.active {
box-shadow: inset 0 0 3px 1px var(--color-green);
}
.main-header {
@ -389,7 +397,6 @@ main {
[data-template=home] nav {
position: absolute;
inset: 0;
z-index: 2;
}
[data-template=home] nav ul {
display: grid;
@ -428,6 +435,11 @@ main {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
pointer-events: none;
}
[data-template=home] .identity svg {
pointer-events: all;
}
[data-template=home] .identity .outfit {
position: absolute;
@ -477,21 +489,26 @@ main {
transform: translateY(18vh);
}
[data-template=events] main .events-grid {
[data-template=events] main {
margin-top: -2px;
}
[data-template=events] main .events-grid-container {
box-sizing: border-box;
padding: 4rem 2rem;
padding: 0 2rem 4rem 2rem;
width: 100%;
background-color: var(--color-beige);
border-radius: var(--radius);
border: var(--border);
}
[data-template=events] main .events-grid-container .events-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: flex-end;
-moz-column-gap: 2rem;
column-gap: 2rem;
row-gap: 4rem;
background-color: var(--color-beige);
border-radius: var(--radius);
border: var(--border);
}
[data-template=events] main .events-grid .event-card h2 {
[data-template=events] main .events-grid-container .events-grid .event-card h2 {
box-sizing: border-box;
width: 100%;
padding: 0 2rem;
@ -504,13 +521,13 @@ main {
justify-content: center;
align-items: flex-end;
}
[data-template=events] main .events-grid .event-card .cover-wrapper {
[data-template=events] main .events-grid-container .events-grid .event-card .cover-wrapper {
position: relative;
overflow: hidden;
margin-top: 1rem;
aspect-ratio: 3/2;
}
[data-template=events] main .events-grid .event-card .cover-wrapper .playing-now {
[data-template=events] main .events-grid-container .events-grid .event-card .cover-wrapper .playing-now {
position: absolute;
display: flex;
justify-content: center;
@ -530,23 +547,23 @@ main {
padding: 0 0.15rem 0.3rem 0.15rem;
line-height: 1;
}
[data-template=events] main .events-grid .event-card .cover-wrapper .playing-now p {
[data-template=events] main .events-grid-container .events-grid .event-card .cover-wrapper .playing-now p {
width: -moz-max-content;
width: max-content;
padding: 0.2rem 0.5rem;
font-family: var(--font-serif);
}
[data-template=events] main .events-grid .event-card .cover-wrapper .hover-glow {
[data-template=events] main .events-grid-container .events-grid .event-card .cover-wrapper .hover-glow {
position: absolute;
inset: 0;
box-shadow: inset 0 0 0px 0 0 var(--color-green);
border-radius: 0.8rem;
transition: box-shadow 0.2s ease-in-out;
}
[data-template=events] main .events-grid .event-card .cover-wrapper picture img {
[data-template=events] main .events-grid-container .events-grid .event-card .cover-wrapper picture img {
border-radius: 0.8rem;
}
[data-template=events] main .events-grid .event-card:hover .hover-glow {
[data-template=events] main .events-grid-container .events-grid .event-card:hover .hover-glow {
box-shadow: inset 0 0 7px 5px var(--color-green);
}

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

File diff suppressed because one or more lines are too long

105
assets/images/characters/characters-kawai.svg
View file

@ -2,36 +2,79 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="205px" height="175px" 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,-374.034625,-558.885162)">
<path d="M561.64,643.47C564.37,644.2 565.97,646.94 565.21,649.59C564.46,652.24 561.64,653.8 558.91,653.06C556.18,652.33 554.58,649.59 555.34,646.94" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M487.99,648.37C483.09,648.8 483.24,646.17 482.53,641.47C481.73,636.19 479.7,633.83 479.28,631.39C478.38,626.07 481.83,624 484.76,625.96" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M558.6,649.77C560.81,648.61 560.78,645.07 561.32,641.47C562.12,636.19 564.38,634.49 565.08,632.11C566.37,627.72 563.62,626.12 560.38,627.06" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M556.59,656.18C556.4,656.97 556.16,657.83 555.86,658.73C554.38,663.13 551.4,668.67 545.38,673.99C540.47,678.33 539.32,688.19 523.51,688.19C507.7,688.19 506.55,678.33 501.64,673.99C488.7,662.55 489.77,650.09 489.77,650.09" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M557.17,630.36C560.15,607.4 559.83,597.57 552.84,588.64C544.29,577.73 530.42,571.95 522.58,571.95C514.74,571.95 500.87,577.73 492.32,588.64C485.32,597.57 485.01,607.4 487.99,630.36" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M402.29,649.88C412.71,631.08 393.44,606.17 426.99,594.31C436.19,591.06 447.36,590.25 448.42,581.69" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M481.55,610.71C480.48,599.4 476.08,590.02 468.35,583.7C466.54,582.22 455.01,571.95 439.99,571.95C424.97,571.95 413.44,582.22 411.63,583.7C381.98,607.94 402.59,634.32 391.74,658.02C386.99,668.4 383.19,680.73 394.56,688.17" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M402.32,656.38C399.19,661.94 397.61,666.72 397.22,670.79C395.97,683.67 406.51,689.42 417.01,690.03" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M483.33,652.16C480.97,666.52 494.9,673.25 486.6,688.77" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M477.88,656.5C473.69,670.43 484.46,680.84 472.05,689.4" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M472.15,620.22C472.15,620.22 476.06,636.98 473.57,647.6C471.08,658.21 469.78,667.46 469.32,669.19C467.14,677.41 460.76,681.23 454.45,684.19C448.61,686.93 445.73,688.19 439.99,688.19C434.25,688.19 431.37,686.93 425.53,684.19C419.21,681.23 412.84,677.41 410.66,669.19C410.23,667.55 409.04,659.17 406.79,649.26" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M448.22,720.73C448.22,720.73 458.48,722.69 462.17,725.32C465.86,727.94 446.76,726.72 446.76,726.72L448.22,720.74L448.22,720.73Z" style="fill-rule:nonzero;"/>
<path d="M446.89,719.99C455.4,704.66 446.89,690.14 446.89,690.14" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M431.76,720.73C431.76,720.73 421.5,722.69 417.81,725.32C414.12,727.94 433.22,726.72 433.22,726.72L431.76,720.74L431.76,720.73Z" style="fill-rule:nonzero;"/>
<path d="M433.08,719.99C424.57,704.66 433.08,690.14 433.08,690.14" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M514.8,720.5C514.8,720.5 504.54,722.46 500.85,725.09C497.16,727.71 516.26,726.49 516.26,726.49L514.8,720.51L514.8,720.5Z" style="fill-rule:nonzero;"/>
<path d="M516.13,719.76C507.62,704.43 516.13,689.91 516.13,689.91" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M531.27,720.5C531.27,720.5 541.53,722.46 545.22,725.09C548.91,727.71 529.81,726.49 529.81,726.49L531.27,720.51L531.27,720.5Z" style="fill-rule:nonzero;"/>
<path d="M529.94,719.76C538.45,704.43 529.94,689.91 529.94,689.91" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M425.06,613.37C417.75,613.37 411.82,621.35 411.82,631.19C411.82,641.03 417.75,649.01 425.06,649.01C432.37,649.01 438.3,641.03 438.3,631.19C438.3,621.35 432.37,613.37 425.06,613.37Z" style="fill-rule:nonzero;"/>
<path d="M451.26,658.94C451.26,665.25 446.15,670.36 439.84,670.36C433.53,670.36 428.42,665.25 428.42,658.94" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M471.65,615.38C474.41,617.14 477.19,618.28 479.84,618.4" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M449.4,589.68C450.57,591.89 454.18,597.61 458.93,603.37" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M534.59,653.99C534.59,660.3 529.48,665.41 523.17,665.41C516.86,665.41 511.75,660.3 511.75,653.99" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path d="M425.06,613.37C423.6,613.37 422.21,613.7 420.89,614.28C420.25,613 419.9,611.44 419.96,609.76C420.02,608.27 420.4,606.89 421,605.74C419.32,607 418.14,609.35 418.03,612.1C417.98,613.38 418.17,614.6 418.55,615.67C418.16,615.97 417.78,616.29 417.42,616.64C416.49,615.49 415.81,613.97 415.54,612.25C415.31,610.77 415.42,609.35 415.79,608.11C414.39,609.67 413.68,612.21 414.1,614.92C414.33,616.38 414.86,617.7 415.58,618.76C415.4,619.02 415.22,619.28 415.05,619.55C413.53,618.63 412.2,617.02 411.44,614.96C410.93,613.56 410.75,612.14 410.87,610.85C409.8,612.65 409.6,615.28 410.54,617.86C411.21,619.7 412.35,621.18 413.67,622.13C412.5,624.78 411.82,627.87 411.82,631.18C411.82,641.02 417.75,649 425.06,649C432.37,649 438.3,641.02 438.3,631.18C438.3,621.34 432.37,613.36 425.06,613.36L425.06,613.37ZM425.06,616.65C428.62,616.65 431.5,619.23 431.5,622.41C431.5,625.59 428.62,628.17 425.06,628.17C421.5,628.17 418.62,625.59 418.62,622.41C418.62,619.23 421.5,616.65 425.06,616.65ZM425.06,647.18C418.99,647.18 413.87,639.86 413.87,631.19C413.87,626.47 415.4,622.15 417.76,619.2C415.86,622.51 415.12,627.17 416.08,632C417.67,639.97 423.43,646.08 429.05,646.07C427.8,646.78 426.45,647.19 425.05,647.19L425.06,647.18ZM429.8,643.61C427.89,643.61 426.34,642.22 426.34,640.51C426.34,638.8 427.89,637.41 429.8,637.41C431.71,637.41 433.26,638.8 433.26,640.51C433.26,642.22 431.71,643.61 429.8,643.61Z" style="fill-rule:nonzero;"/>
<path d="M425.06,628.17C428.62,628.17 431.5,625.59 431.5,622.41C431.5,619.23 428.62,616.65 425.06,616.65C421.5,616.65 418.62,619.23 418.62,622.41C418.62,625.59 421.5,628.17 425.06,628.17Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M416.09,631.99C415.13,627.16 415.86,622.5 417.77,619.19C415.4,622.15 413.88,626.46 413.88,631.18C413.88,639.85 419,647.17 425.07,647.17C426.47,647.17 427.82,646.76 429.07,646.05C423.45,646.05 417.69,639.95 416.1,631.98L416.09,631.99Z" style="fill:white;fill-rule:nonzero;"/>
<ellipse cx="429.8" cy="640.52" rx="3.46" ry="3.1" style="fill:white;"/>
<path d="M441.38,631.19C441.38,641.03 447.31,649.01 454.62,649.01C461.93,649.01 467.86,641.03 467.86,631.19C467.86,627.88 467.18,624.79 466.01,622.14C467.33,621.19 468.46,619.71 469.14,617.87C470.08,615.29 469.88,612.66 468.81,610.86C468.93,612.15 468.76,613.57 468.24,614.97C467.48,617.03 466.15,618.64 464.63,619.56C464.46,619.29 464.28,619.02 464.1,618.77C464.82,617.7 465.35,616.39 465.58,614.93C466,612.22 465.29,609.68 463.89,608.12C464.26,609.36 464.37,610.79 464.14,612.26C463.87,613.99 463.19,615.5 462.26,616.65C461.9,616.3 461.52,615.98 461.13,615.68C461.51,614.61 461.7,613.39 461.65,612.11C461.54,609.37 460.36,607.01 458.68,605.75C459.28,606.9 459.66,608.28 459.72,609.77C459.79,611.45 459.43,613.01 458.79,614.29C457.48,613.7 456.08,613.38 454.62,613.38C447.31,613.38 441.38,621.36 441.38,631.2L441.38,631.19ZM461.06,622.41C461.06,625.59 458.18,628.17 454.62,628.17C451.06,628.17 448.18,625.59 448.18,622.41C448.18,619.23 451.06,616.65 454.62,616.65C458.18,616.65 461.06,619.23 461.06,622.41ZM450.62,646.07C456.24,646.07 462,639.97 463.59,632C464.55,627.17 463.82,622.51 461.91,619.2C464.28,622.16 465.8,626.47 465.8,631.19C465.8,639.86 460.68,647.18 454.61,647.18C453.21,647.18 451.86,646.77 450.61,646.06L450.62,646.07ZM446.42,640.52C446.42,638.81 447.97,637.42 449.88,637.42C451.79,637.42 453.34,638.81 453.34,640.52C453.34,642.23 451.79,643.62 449.88,643.62C447.97,643.62 446.42,642.23 446.42,640.52Z" style="fill-rule:nonzero;"/>
<path d="M524.72,623.01C524.72,632.85 530.65,640.83 537.96,640.83C545.27,640.83 551.2,632.85 551.2,623.01C551.2,619.7 550.52,616.61 549.35,613.96C550.67,613.01 551.8,611.53 552.48,609.69C553.42,607.11 553.22,604.48 552.15,602.68C552.27,603.97 552.1,605.39 551.58,606.79C550.82,608.85 549.49,610.46 547.97,611.38C547.8,611.11 547.62,610.84 547.44,610.59C548.16,609.52 548.69,608.21 548.92,606.75C549.34,604.04 548.63,601.5 547.23,599.94C547.6,601.18 547.71,602.61 547.48,604.08C547.21,605.81 546.53,607.32 545.6,608.47C545.24,608.12 544.86,607.8 544.47,607.5C544.85,606.43 545.04,605.21 544.99,603.93C544.88,601.19 543.7,598.83 542.02,597.57C542.62,598.72 543,600.1 543.06,601.59C543.13,603.27 542.77,604.83 542.13,606.11C540.82,605.52 539.42,605.2 537.96,605.2C530.65,605.2 524.72,613.18 524.72,623.02L524.72,623.01ZM544.39,614.23C544.39,617.41 541.51,619.99 537.95,619.99C534.39,619.99 531.51,617.41 531.51,614.23C531.51,611.05 534.39,608.47 537.95,608.47C541.51,608.47 544.39,611.05 544.39,614.23ZM533.95,637.88C539.57,637.88 545.33,631.78 546.92,623.81C547.88,618.98 547.15,614.32 545.24,611.01C547.61,613.97 549.13,618.28 549.13,623C549.13,631.67 544.01,638.99 537.94,638.99C536.54,638.99 535.19,638.58 533.94,637.87L533.95,637.88ZM529.75,632.34C529.75,630.63 531.3,629.24 533.21,629.24C535.12,629.24 536.67,630.63 536.67,632.34C536.67,634.05 535.12,635.44 533.21,635.44C531.3,635.44 529.75,634.05 529.75,632.34Z" style="fill-rule:nonzero;"/>
<path d="M508.39,605.19C506.93,605.19 505.54,605.52 504.22,606.1C503.58,604.82 503.23,603.26 503.29,601.58C503.35,600.09 503.73,598.71 504.33,597.56C502.65,598.82 501.47,601.17 501.36,603.92C501.31,605.2 501.5,606.42 501.88,607.49C501.49,607.79 501.11,608.11 500.75,608.46C499.82,607.31 499.14,605.79 498.87,604.07C498.64,602.59 498.75,601.17 499.12,599.93C497.72,601.49 497.01,604.03 497.43,606.74C497.66,608.2 498.19,609.52 498.91,610.58C498.73,610.84 498.55,611.1 498.38,611.37C496.86,610.45 495.53,608.84 494.77,606.78C494.26,605.38 494.08,603.96 494.2,602.67C493.13,604.47 492.93,607.1 493.87,609.68C494.54,611.52 495.68,613 497,613.95C495.83,616.6 495.15,619.69 495.15,623C495.15,632.84 501.08,640.82 508.39,640.82C515.7,640.82 521.63,632.84 521.63,623C521.63,613.16 515.7,605.18 508.39,605.18L508.39,605.19ZM508.39,608.47C511.95,608.47 514.83,611.05 514.83,614.23C514.83,617.41 511.95,619.99 508.39,619.99C504.83,619.99 501.95,617.41 501.95,614.23C501.95,611.05 504.83,608.47 508.39,608.47ZM508.39,639C502.32,639 497.2,631.68 497.2,623.01C497.2,618.29 498.73,613.97 501.09,611.02C499.19,614.33 498.45,618.99 499.41,623.82C501,631.79 506.76,637.9 512.38,637.89C511.13,638.6 509.78,639.01 508.38,639.01L508.39,639ZM513.13,635.43C511.22,635.43 509.67,634.04 509.67,632.33C509.67,630.62 511.22,629.23 513.13,629.23C515.04,629.23 516.59,630.62 516.59,632.33C516.59,634.04 515.04,635.43 513.13,635.43Z" style="fill-rule:nonzero;"/>
<!-- Personnage droit : tête et oreilles -->
<path id="rc-ear-r" d="M561.64,643.47C564.37,644.2 565.97,646.94 565.21,649.59C564.46,652.24 561.64,653.8 558.91,653.06C556.18,652.33 554.58,649.59 555.34,646.94" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="rc-ear-l" d="M487.99,648.37C483.09,648.8 483.24,646.17 482.53,641.47C481.73,636.19 479.7,633.83 479.28,631.39C478.38,626.07 481.83,624 484.76,625.96" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="rc-ear-r-inner" d="M558.6,649.77C560.81,648.61 560.78,645.07 561.32,641.47C562.12,636.19 564.38,634.49 565.08,632.11C566.37,627.72 563.62,626.12 560.38,627.06" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="rc-chin" d="M556.59,656.18C556.4,656.97 556.16,657.83 555.86,658.73C554.38,663.13 551.4,668.67 545.38,673.99C540.47,678.33 539.32,688.19 523.51,688.19C507.7,688.19 506.55,678.33 501.64,673.99C488.7,662.55 489.77,650.09 489.77,650.09" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="rc-head" d="M557.17,630.36C560.15,607.4 559.83,597.57 552.84,588.64C544.29,577.73 530.42,571.95 522.58,571.95C514.74,571.95 500.87,577.73 492.32,588.64C485.32,597.57 485.01,607.4 487.99,630.36" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<!-- Personnage gauche : tête et corps -->
<path id="lc-body-side-r" d="M402.29,649.88C412.71,631.08 393.44,606.17 426.99,594.31C436.19,591.06 447.36,590.25 448.42,581.69" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="lc-head" d="M481.55,610.71C480.48,599.4 476.08,590.02 468.35,583.7C466.54,582.22 455.01,571.95 439.99,571.95C424.97,571.95 413.44,582.22 411.63,583.7C381.98,607.94 402.59,634.32 391.74,658.02C386.99,668.4 383.19,680.73 394.56,688.17" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="lc-chin" d="M402.32,656.38C399.19,661.94 397.61,666.72 397.22,670.79C395.97,683.67 406.51,689.42 417.01,690.03" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<!-- Personnage droit : connexions corps→jambes -->
<path id="rc-leg-stem-r" d="M483.33,652.16C480.97,666.52 494.9,673.25 486.6,688.77" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="rc-leg-stem-l" d="M477.88,656.5C473.69,670.43 484.46,680.84 472.05,689.4" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<!-- Personnage gauche : bas du corps -->
<path id="lc-body" d="M472.15,620.22C472.15,620.22 476.06,636.98 473.57,647.6C471.08,658.21 469.78,667.46 469.32,669.19C467.14,677.41 460.76,681.23 454.45,684.19C448.61,686.93 445.73,688.19 439.99,688.19C434.25,688.19 431.37,686.93 425.53,684.19C419.21,681.23 412.84,677.41 410.66,669.19C410.23,667.55 409.04,659.17 406.79,649.26" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<!-- Personnage gauche : pieds et jambes -->
<path id="lc-foot-r" d="M448.22,720.73C448.22,720.73 458.48,722.69 462.17,725.32C465.86,727.94 446.76,726.72 446.76,726.72L448.22,720.74L448.22,720.73Z" style="fill-rule:nonzero;"/>
<path id="lc-leg-r" d="M446.89,719.99C455.4,704.66 446.89,690.14 446.89,690.14" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="lc-foot-l" d="M431.76,720.73C431.76,720.73 421.5,722.69 417.81,725.32C414.12,727.94 433.22,726.72 433.22,726.72L431.76,720.74L431.76,720.73Z" style="fill-rule:nonzero;"/>
<path id="lc-leg-l" d="M433.08,719.99C424.57,704.66 433.08,690.14 433.08,690.14" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<!-- Personnage droit : pieds et jambes -->
<path id="rc-foot-l" d="M514.8,720.5C514.8,720.5 504.54,722.46 500.85,725.09C497.16,727.71 516.26,726.49 516.26,726.49L514.8,720.51L514.8,720.5Z" style="fill-rule:nonzero;"/>
<path id="rc-leg-l" d="M516.13,719.76C507.62,704.43 516.13,689.91 516.13,689.91" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="rc-foot-r" d="M531.27,720.5C531.27,720.5 541.53,722.46 545.22,725.09C548.91,727.71 529.81,726.49 529.81,726.49L531.27,720.51L531.27,720.5Z" style="fill-rule:nonzero;"/>
<path id="rc-leg-r" d="M529.94,719.76C538.45,704.43 529.94,689.91 529.94,689.91" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<!-- Personnage gauche : bouche et détails -->
<path id="lc-mouth" d="M451.26,658.94C451.26,665.25 446.15,670.36 439.84,670.36C433.53,670.36 428.42,665.25 428.42,658.94" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="lc-brow-r" d="M471.65,615.38C474.41,617.14 477.19,618.28 479.84,618.4" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<path id="lc-head-top" d="M449.4,589.68C450.57,591.89 454.18,597.61 458.93,603.37" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<!-- Personnage droit : bouche -->
<path id="rc-mouth" d="M534.59,653.99C534.59,660.3 529.48,665.41 523.17,665.41C516.86,665.41 511.75,660.3 511.75,653.99" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.6px;"/>
<!-- Cibles de morphing : bouches version no-outfit (coords converties dans le repère kawai) -->
<g id="morph-targets" style="display:none">
<path id="lc-eye-l-target" d="M421.52,629.73C420.69,631.49 421.38,633.56 423.08,634.37C424.77,635.17 426.82,634.40 427.66,632.65C428.49,630.89 427.80,628.82 426.10,628.01C424.41,627.21 422.36,627.98 421.52,629.73Z"/>
<path id="lc-eye-r-target" d="M451.55,629.73C450.72,631.49 451.41,633.56 453.11,634.38C454.80,635.17 456.85,634.40 457.69,632.65C458.52,630.89 457.83,628.82 456.13,628.01C454.44,627.21 452.39,627.98 451.55,629.73Z"/>
<path id="rc-eye-l-target" d="M540.29,625.67C541.70,624.43 541.81,622.25 540.52,620.78C539.24,619.32 537.06,619.13 535.64,620.37C534.23,621.61 534.12,623.79 535.41,625.26C536.69,626.72 538.87,626.91 540.28,625.67L540.29,625.67Z"/>
<path id="rc-eye-r-target" d="M504.68,621.13C503.85,622.89 504.54,624.97 506.24,625.77C507.94,626.59 509.98,625.81 510.82,624.06C511.66,622.31 510.96,620.23 509.26,619.41C507.57,618.62 505.52,619.38 504.68,621.13Z"/>
<path id="lc-mouth-target" d="M441.31,660.99C442.16,660.50 443.35,660.10 446.50,661.20C451.96,663.11 454.85,662.74 454.85,662.74C454.85,662.74 449.25,668.32 439.84,668.32C430.43,668.32 424.83,662.74 424.83,662.74C424.83,662.74 427.72,663.11 433.18,661.20C436.34,660.10 437.52,660.50 438.37,660.99C438.62,661.14 439.17,661.43 439.83,661.43C440.49,661.43 441.03,661.13 441.29,660.99L441.31,660.99Z"/>
<path id="rc-mouth-target" d="M523.18,658.35C523.71,658.34 524.32,658.22 525.07,657.96C529.80,656.32 535.60,657.96 535.60,657.96C531.75,661.88 526.77,663.08 523.21,662.88L523.13,662.88C519.57,663.08 514.59,661.88 510.74,657.96C510.74,657.96 516.54,656.32 521.27,657.96C522.02,658.22 522.63,658.33 523.16,658.35L523.18,658.35Z"/>
</g>
<!-- Personnage gauche : œil gauche (base + iris kawai + overlays blancs) -->
<g id="lc-eye-l">
<path id="lc-eye-l-base" d="M425.06,613.37C417.75,613.37 411.82,621.35 411.82,631.19C411.82,641.03 417.75,649.01 425.06,649.01C432.37,649.01 438.3,641.03 438.3,631.19C438.3,621.35 432.37,613.37 425.06,613.37Z" style="fill-rule:nonzero;"/>
<path id="lc-eye-l-iris" d="M425.06,613.37C423.6,613.37 422.21,613.7 420.89,614.28C420.25,613 419.9,611.44 419.96,609.76C420.02,608.27 420.4,606.89 421,605.74C419.32,607 418.14,609.35 418.03,612.1C417.98,613.38 418.17,614.6 418.55,615.67C418.16,615.97 417.78,616.29 417.42,616.64C416.49,615.49 415.81,613.97 415.54,612.25C415.31,610.77 415.42,609.35 415.79,608.11C414.39,609.67 413.68,612.21 414.1,614.92C414.33,616.38 414.86,617.7 415.58,618.76C415.4,619.02 415.22,619.28 415.05,619.55C413.53,618.63 412.2,617.02 411.44,614.96C410.93,613.56 410.75,612.14 410.87,610.85C409.8,612.65 409.6,615.28 410.54,617.86C411.21,619.7 412.35,621.18 413.67,622.13C412.5,624.78 411.82,627.87 411.82,631.18C411.82,641.02 417.75,649 425.06,649C432.37,649 438.3,641.02 438.3,631.18C438.3,621.34 432.37,613.36 425.06,613.36L425.06,613.37ZM425.06,616.65C428.62,616.65 431.5,619.23 431.5,622.41C431.5,625.59 428.62,628.17 425.06,628.17C421.5,628.17 418.62,625.59 418.62,622.41C418.62,619.23 421.5,616.65 425.06,616.65ZM425.06,647.18C418.99,647.18 413.87,639.86 413.87,631.19C413.87,626.47 415.4,622.15 417.76,619.2C415.86,622.51 415.12,627.17 416.08,632C417.67,639.97 423.43,646.08 429.05,646.07C427.8,646.78 426.45,647.19 425.05,647.19L425.06,647.18ZM429.8,643.61C427.89,643.61 426.34,642.22 426.34,640.51C426.34,638.8 427.89,637.41 429.8,637.41C431.71,637.41 433.26,638.8 433.26,640.51C433.26,642.22 431.71,643.61 429.8,643.61Z" style="fill-rule:nonzero;"/>
<path id="lc-eye-l-sclera" d="M425.06,628.17C428.62,628.17 431.5,625.59 431.5,622.41C431.5,619.23 428.62,616.65 425.06,616.65C421.5,616.65 418.62,619.23 418.62,622.41C418.62,625.59 421.5,628.17 425.06,628.17Z" style="fill:white;fill-rule:nonzero;"/>
<path id="lc-eye-l-shadow" d="M416.09,631.99C415.13,627.16 415.86,622.5 417.77,619.19C415.4,622.15 413.88,626.46 413.88,631.18C413.88,639.85 419,647.17 425.07,647.17C426.47,647.17 427.82,646.76 429.07,646.05C423.45,646.05 417.69,639.95 416.1,631.98L416.09,631.99Z" style="fill:white;fill-rule:nonzero;"/>
<ellipse id="lc-eye-l-sparkle" cx="429.8" cy="640.52" rx="3.46" ry="3.1" style="fill:white;"/>
</g>
<!-- Personnage gauche : œil droit -->
<g id="lc-eye-r">
<path id="lc-eye-r-iris" d="M441.38,631.19C441.38,641.03 447.31,649.01 454.62,649.01C461.93,649.01 467.86,641.03 467.86,631.19C467.86,627.88 467.18,624.79 466.01,622.14C467.33,621.19 468.46,619.71 469.14,617.87C470.08,615.29 469.88,612.66 468.81,610.86C468.93,612.15 468.76,613.57 468.24,614.97C467.48,617.03 466.15,618.64 464.63,619.56C464.46,619.29 464.28,619.02 464.1,618.77C464.82,617.7 465.35,616.39 465.58,614.93C466,612.22 465.29,609.68 463.89,608.12C464.26,609.36 464.37,610.79 464.14,612.26C463.87,613.99 463.19,615.5 462.26,616.65C461.9,616.3 461.52,615.98 461.13,615.68C461.51,614.61 461.7,613.39 461.65,612.11C461.54,609.37 460.36,607.01 458.68,605.75C459.28,606.9 459.66,608.28 459.72,609.77C459.79,611.45 459.43,613.01 458.79,614.29C457.48,613.7 456.08,613.38 454.62,613.38C447.31,613.38 441.38,621.36 441.38,631.2L441.38,631.19ZM461.06,622.41C461.06,625.59 458.18,628.17 454.62,628.17C451.06,628.17 448.18,625.59 448.18,622.41C448.18,619.23 451.06,616.65 454.62,616.65C458.18,616.65 461.06,619.23 461.06,622.41ZM450.62,646.07C456.24,646.07 462,639.97 463.59,632C464.55,627.17 463.82,622.51 461.91,619.2C464.28,622.16 465.8,626.47 465.8,631.19C465.8,639.86 460.68,647.18 454.61,647.18C453.21,647.18 451.86,646.77 450.61,646.06L450.62,646.07ZM446.42,640.52C446.42,638.81 447.97,637.42 449.88,637.42C451.79,637.42 453.34,638.81 453.34,640.52C453.34,642.23 451.79,643.62 449.88,643.62C447.97,643.62 446.42,642.23 446.42,640.52Z" style="fill-rule:nonzero;"/>
</g>
<!-- Personnage droit : œil gauche -->
<g id="rc-eye-l">
<path id="rc-eye-l-iris" d="M524.72,623.01C524.72,632.85 530.65,640.83 537.96,640.83C545.27,640.83 551.2,632.85 551.2,623.01C551.2,619.7 550.52,616.61 549.35,613.96C550.67,613.01 551.8,611.53 552.48,609.69C553.42,607.11 553.22,604.48 552.15,602.68C552.27,603.97 552.1,605.39 551.58,606.79C550.82,608.85 549.49,610.46 547.97,611.38C547.8,611.11 547.62,610.84 547.44,610.59C548.16,609.52 548.69,608.21 548.92,606.75C549.34,604.04 548.63,601.5 547.23,599.94C547.6,601.18 547.71,602.61 547.48,604.08C547.21,605.81 546.53,607.32 545.6,608.47C545.24,608.12 544.86,607.8 544.47,607.5C544.85,606.43 545.04,605.21 544.99,603.93C544.88,601.19 543.7,598.83 542.02,597.57C542.62,598.72 543,600.1 543.06,601.59C543.13,603.27 542.77,604.83 542.13,606.11C540.82,605.52 539.42,605.2 537.96,605.2C530.65,605.2 524.72,613.18 524.72,623.02L524.72,623.01ZM544.39,614.23C544.39,617.41 541.51,619.99 537.95,619.99C534.39,619.99 531.51,617.41 531.51,614.23C531.51,611.05 534.39,608.47 537.95,608.47C541.51,608.47 544.39,611.05 544.39,614.23ZM533.95,637.88C539.57,637.88 545.33,631.78 546.92,623.81C547.88,618.98 547.15,614.32 545.24,611.01C547.61,613.97 549.13,618.28 549.13,623C549.13,631.67 544.01,638.99 537.94,638.99C536.54,638.99 535.19,638.58 533.94,637.87L533.95,637.88ZM529.75,632.34C529.75,630.63 531.3,629.24 533.21,629.24C535.12,629.24 536.67,630.63 536.67,632.34C536.67,634.05 535.12,635.44 533.21,635.44C531.3,635.44 529.75,634.05 529.75,632.34Z" style="fill-rule:nonzero;"/>
</g>
<!-- Personnage droit : œil droit -->
<g id="rc-eye-r">
<path id="rc-eye-r-iris" d="M508.39,605.19C506.93,605.19 505.54,605.52 504.22,606.1C503.58,604.82 503.23,603.26 503.29,601.58C503.35,600.09 503.73,598.71 504.33,597.56C502.65,598.82 501.47,601.17 501.36,603.92C501.31,605.2 501.5,606.42 501.88,607.49C501.49,607.79 501.11,608.11 500.75,608.46C499.82,607.31 499.14,605.79 498.87,604.07C498.64,602.59 498.75,601.17 499.12,599.93C497.72,601.49 497.01,604.03 497.43,606.74C497.66,608.2 498.19,609.52 498.91,610.58C498.73,610.84 498.55,611.1 498.38,611.37C496.86,610.45 495.53,608.84 494.77,606.78C494.26,605.38 494.08,603.96 494.2,602.67C493.13,604.47 492.93,607.1 493.87,609.68C494.54,611.52 495.68,613 497,613.95C495.83,616.6 495.15,619.69 495.15,623C495.15,632.84 501.08,640.82 508.39,640.82C515.7,640.82 521.63,632.84 521.63,623C521.63,613.16 515.7,605.18 508.39,605.18L508.39,605.19ZM508.39,608.47C511.95,608.47 514.83,611.05 514.83,614.23C514.83,617.41 511.95,619.99 508.39,619.99C504.83,619.99 501.95,617.41 501.95,614.23C501.95,611.05 504.83,608.47 508.39,608.47ZM508.39,639C502.32,639 497.2,631.68 497.2,623.01C497.2,618.29 498.73,613.97 501.09,611.02C499.19,614.33 498.45,618.99 499.41,623.82C501,631.79 506.76,637.9 512.38,637.89C511.13,638.6 509.78,639.01 508.38,639.01L508.39,639ZM513.13,635.43C511.22,635.43 509.67,634.04 509.67,632.33C509.67,630.62 511.22,629.23 513.13,629.23C515.04,629.23 516.59,630.62 516.59,632.33C516.59,634.04 515.04,635.43 513.13,635.43Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

6
assets/js/script.js
View file

@ -4,6 +4,8 @@ import { initCharactersResizeOnScroll } from "./characters/resizeOnScroll.js";
import { initEventFilters } from "./filters.js";
import { Slideshow } from "./slideshow.js";
import { initRollOutfit } from "./characters/roll.js";
import { initMorphMouth } from "./characters/morphMouth.js";
import { initMorphEyes } from "./characters/morphEyes.js";
document.addEventListener("DOMContentLoaded", () => {
const header = document.querySelector(".main-header");
@ -56,7 +58,9 @@ document.addEventListener("DOMContentLoaded", () => {
if (svg) initPupilTracking(svg);
if (document.body.dataset.template !== "event") initCharactersResizeOnScroll();
initEventFilters();
initRollOutfit();
if (document.body.dataset.template !== "home") initRollOutfit();
if (document.body.dataset.template === "home") initMorphMouth();
if (document.body.dataset.template === "home") initMorphEyes();
const gallery = new Slideshow(".gallery");
document.querySelectorAll("details > summary").forEach((summary) => {

2
site/snippets/head.php
View file

@ -8,6 +8,8 @@
<link rel="stylesheet" href="<?= url('assets/css/style.css') ?>">
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/MorphSVGPlugin.min.js"></script>
<script src="<?= url('assets/js/script.js') ?>" type="module"></script>
</head>
<body data-template="<?= $page->intendedTemplate() ?>">

9
site/templates/events.php
View file

@ -1,10 +1,10 @@
<?php snippet('head') ?>
<?php snippet('header') ?>
<ul class="sort-buttons">
<li><button class="filter active" data-target="all">tout</button></li>
<li><button class="filter" data-target="live">en tournée</button></li>
<div class="events-grid-container">
<ul class="view-buttons">
<li><button class="filter active" data-target="all">Tous les spectacles</button></li>
<li><button class="filter" data-target="live">En tournée</button></li>
</ul>
<ul class="events-grid">
<?php foreach ($page->children() as $event): ?>
@ -28,6 +28,7 @@
</li>
<?php endforeach ?>
</ul>
</div>
<?php snippet('footer') ?>

6
site/templates/home.php
View file

@ -13,10 +13,6 @@
Lesort<br>
Hecq
</h1>
<img src="<?= url('assets/images/characters/characters-no-outfit.svg') ?>" alt="" class="outfit active">
<img src="<?= url('assets/images/characters/characters-hypnotized.svg') ?>" alt="" class="outfit">
<img src="<?= url('assets/images/characters/characters-kawai.svg') ?>" alt="" class="outfit">
<img src="<?= url('assets/images/characters/characters-spring.svg') ?>" alt="" class="outfit">
<img src="<?= url('assets/images/characters/characters-sunglasses.svg') ?>" alt="" class="outfit">
<?= svg('assets/images/characters/characters-kawai.svg') ?>
</div>
<?php snippet('footer') ?>