ref: remplace l'animation de l'Accueil par une vidéo et la déplace dans A propos
This commit is contained in:
parent
8bd25821c0
commit
ff90b05977
22 changed files with 636 additions and 1078 deletions
|
|
@ -1,158 +1,120 @@
|
||||||
|
@charset "UTF-8";
|
||||||
#page-a-propos {
|
#page-a-propos {
|
||||||
--images-longueur-maximale: 1300px;
|
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
||||||
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
||||||
--images-marges-ligne: var(--espace-xl) * 2;
|
--conteneur-marges-internes-ligne: var(--espace-xl);
|
||||||
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
|
min-block-size: var(--hauteur-conteneur);
|
||||||
|
max-block-size: var(--hauteur-conteneur);
|
||||||
margin-top: var(--page-marges-bloc-debut);
|
margin-top: var(--page-marges-bloc-debut);
|
||||||
}
|
}
|
||||||
#page-a-propos .storytelling {
|
#page-a-propos .storytelling {
|
||||||
padding: var(--espace-xl) 0;
|
overflow-y: scroll;
|
||||||
color: var(--couleur-gris-fonce);
|
overscroll-behavior: none;
|
||||||
|
min-block-size: inherit;
|
||||||
|
max-block-size: inherit;
|
||||||
}
|
}
|
||||||
#page-a-propos .storytelling__conteneur {
|
#page-a-propos .storytelling__conteneur {
|
||||||
position: relative;
|
overscroll-behavior: inherit;
|
||||||
width: min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne));
|
display: flex;
|
||||||
margin: auto;
|
flex-flow: column nowrap;
|
||||||
|
place-items: center;
|
||||||
|
min-block-size: calc(var(--hauteur-conteneur) * 13);
|
||||||
|
padding: 0 var(--conteneur-marges-internes-ligne);
|
||||||
}
|
}
|
||||||
#page-a-propos .storytelling picture {
|
#page-a-propos .storytelling__animation {
|
||||||
position: relative;
|
--hauteur-animation: 90px;
|
||||||
}
|
--taille-police: calc(var(--espace-xl) * 2.5);
|
||||||
#page-a-propos .storytelling picture::before {
|
pointer-events: none;
|
||||||
content: "";
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
overflow: hidden;
|
||||||
height: 100%;
|
display: grid;
|
||||||
background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
|
place-content: center;
|
||||||
background-repeat: space;
|
place-items: center;
|
||||||
background-position: center;
|
block-size: 100%;
|
||||||
background-size: contain;
|
margin: auto;
|
||||||
filter: opacity(0%);
|
visibility: visible;
|
||||||
animation: 1s clignotement infinite alternate both linear;
|
opacity: 1;
|
||||||
|
mask-image: linear-gradient(
|
||||||
|
var(--mask-direction, to right),
|
||||||
|
hsla(0, 0%, 0%, 0),
|
||||||
|
hsl(0, 0%, 0%) 20%,
|
||||||
|
hsl(0, 0%, 0%) 80%,
|
||||||
|
hsla(0, 0%, 0%, 0)
|
||||||
|
);
|
||||||
|
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||||
}
|
}
|
||||||
#page-a-propos .storytelling img {
|
#page-a-propos .storytelling__animation[hidden] {
|
||||||
position: relative;
|
display: grid !important;
|
||||||
width: max-content;
|
visibility: hidden;
|
||||||
height: auto;
|
opacity: 0;
|
||||||
|
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||||
|
}
|
||||||
|
#page-a-propos .storytelling__animation.no-js {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||||
|
}
|
||||||
|
#page-a-propos .storytelling__animation .animation-conteneur {
|
||||||
|
overflow: visible;
|
||||||
|
width: 120vw;
|
||||||
|
block-size: var(--hauteur-animation);
|
||||||
|
}
|
||||||
|
#page-a-propos .storytelling__animation .animation-texte {
|
||||||
|
overflow: visible;
|
||||||
|
font-size: var(--taille-police);
|
||||||
|
font-weight: 600;
|
||||||
|
text-shadow: 4px 4px 0 var(--couleur-blanc);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
|
||||||
|
}
|
||||||
|
#page-a-propos .storytelling__image {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
align-content: center;
|
||||||
|
inline-size: max-content;
|
||||||
|
max-inline-size: 100%;
|
||||||
|
min-block-size: var(--hauteur-conteneur);
|
||||||
|
max-block-size: var(--hauteur-conteneur);
|
||||||
|
}
|
||||||
|
#page-a-propos .storytelling__image[data-caché] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
#page-a-propos .storytelling__image picture {
|
||||||
|
max-block-size: inherit;
|
||||||
|
}
|
||||||
|
#page-a-propos .storytelling__image img {
|
||||||
|
scale: 0.95;
|
||||||
|
max-block-size: inherit;
|
||||||
|
margin: auto;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
#page-a-propos .storytelling .epingle {
|
@media (scripting: none) {
|
||||||
position: absolute;
|
#page-a-propos .storytelling__animation {
|
||||||
right: 46.5%;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .epingle img {
|
|
||||||
pointer-events: none;
|
|
||||||
display: block;
|
|
||||||
width: 1.75rem;
|
|
||||||
/* filter: drop-shadow(1px 1px 3px var(--couleur-gris-fonce)); */
|
|
||||||
/* transition: 0.2s filter; */
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="1"] {
|
|
||||||
top: 1%;
|
|
||||||
right: 60%;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="2"] {
|
|
||||||
top: 25%;
|
|
||||||
right: 70%;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="3"] {
|
|
||||||
top: 37%;
|
|
||||||
right: 20%;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="4"] {
|
|
||||||
top: 58%;
|
|
||||||
right: 70%;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="5"] {
|
|
||||||
top: 76%;
|
|
||||||
right: 14%;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="6"] {
|
|
||||||
top: 95.5%;
|
|
||||||
right: 75%;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .epingle[data-ensemble-epingle-boite-actif] img {
|
|
||||||
/* filter: drop-shadow(1px 1px 5px var(--couleur-gris-fonce)); */
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: calc(46.5% - (15rem + var(--espace-l)) / 2);
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
padding: var(--espace-l);
|
|
||||||
border: 1px solid var(--couleur-noir);
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-style: italic;
|
|
||||||
color: var(--couleur-noir);
|
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
}
|
||||||
background: var(--couleur-fond);
|
|
||||||
transition: 0.2s opacity, 0.2s visibility;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte button {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: calc(-1.5rem - var(--espace-m) - var(--espace-xs));
|
|
||||||
align-self: end;
|
|
||||||
padding: var(--espace-xs);
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte button img {
|
|
||||||
pointer-events: none;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
width: 1.5rem;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte button:active {
|
|
||||||
background: var(--couleur-jaune);
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte p {
|
|
||||||
max-width: 15rem;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte p + p {
|
|
||||||
margin-top: var(--espace-m);
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte[data-ensemble-epingle-boite-actif] {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="2"] {
|
|
||||||
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
|
||||||
top: calc(23% - var(--hauteur-boite) / 2);
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] {
|
|
||||||
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
|
||||||
top: calc(35% - var(--hauteur-boite) / 2);
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] button {
|
|
||||||
left: calc(-1.5rem - var(--espace-m) - var(--espace-xs));
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="4"] {
|
|
||||||
--hauteur-boite: calc(8lh + 2rem + var(--espace-l) * 2);
|
|
||||||
top: calc(58% - var(--hauteur-boite) / 2);
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="5"] {
|
|
||||||
--hauteur-boite: calc(12lh + 2rem + var(--espace-l) * 2);
|
|
||||||
top: calc(76% - var(--hauteur-boite) / 2);
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] {
|
|
||||||
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
|
||||||
top: calc(95.5% - var(--hauteur-boite) / 2);
|
|
||||||
}
|
|
||||||
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] button {
|
|
||||||
left: calc(-1.5rem - var(--espace-m) - var(--espace-xs));
|
|
||||||
}
|
}
|
||||||
@media (width <= 700px) {
|
@media (width <= 700px) {
|
||||||
#page-a-propos {
|
#page-a-propos {
|
||||||
--images-marges-ligne: var(--espace-m);
|
--conteneur-marges-internes-ligne: var(--espace-l);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (width <= 500px) {
|
||||||
|
#page-a-propos {
|
||||||
|
--conteneur-marges-internes-ligne: var(--espace-m);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes clignotement {
|
@supports (-moz-appearance: none) {
|
||||||
to {
|
#page-a-propos .storytelling__animation {
|
||||||
filter: opacity(30%);
|
--taille-police: calc(var(--espace-xl) * 2.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-a-propos.scss"],"names":[],"mappings":"AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;AAEA;AAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIA;AACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EAEA;;AAGF;EACE;EAEA;;AAEA;EACE;;AAIJ;EACE;EAEA;;AAGF;EACE;EAEA;;AAGF;EACE;EAEA;;AAEA;EACE;;AAMR;EA7LF;IA8LI;;;;AAIJ;EACE;IACE","file":"page-a-propos.css"}
|
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-a-propos.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAOA;;AAEA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;EAIA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-a-propos.css"}
|
||||||
|
|
@ -1 +1 @@
|
||||||
#page-a-propos{--images-longueur-maximale:1300px;--page-marges-bloc-debut:var(--en-tete-hauteur);--images-marges-ligne:var(--espace-xl) * 2;margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex}#page-a-propos .storytelling{padding:var(--espace-xl) 0;color:var(--couleur-gris-fonce)}#page-a-propos .storytelling__conteneur{width:min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne));margin:auto;position:relative}#page-a-propos .storytelling picture{position:relative}#page-a-propos .storytelling picture:before{content:"";filter:opacity(0%);background-image:url(/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg);background-position:50%;background-repeat:space;background-size:contain;width:100%;height:100%;animation:1s linear infinite alternate both clignotement;position:absolute;top:0;left:0}#page-a-propos .storytelling img{object-fit:contain;background:0 0;width:max-content;height:auto;position:relative}#page-a-propos .storytelling .epingle{position:absolute;right:46.5%}#page-a-propos .storytelling .epingle img{pointer-events:none;width:1.75rem;display:block}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="1"]{top:1%;right:60%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="2"]{top:25%;right:70%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="3"]{top:37%;right:20%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="4"]{top:58%;right:70%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="5"]{top:76%;right:14%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="6"]{top:95.5%;right:75%}#page-a-propos .storytelling .boite-texte{top:0;right:calc(46.5% - (15rem + var(--espace-l)) / 2);padding:var(--espace-l);border:1px solid var(--couleur-noir);color:var(--couleur-noir);visibility:hidden;opacity:0;background:var(--couleur-fond);flex-flow:column;font-size:.8rem;font-style:italic;transition:opacity .2s,visibility .2s;display:flex;position:absolute}#page-a-propos .storytelling .boite-texte button{top:0;right:calc(-1.5rem - var(--espace-m) - var(--espace-xs));padding:var(--espace-xs);align-self:end;position:absolute}#page-a-propos .storytelling .boite-texte button img{pointer-events:none;aspect-ratio:1;width:1.5rem}#page-a-propos .storytelling .boite-texte button:active{background:var(--couleur-jaune)}#page-a-propos .storytelling .boite-texte p{max-width:15rem}#page-a-propos .storytelling .boite-texte p+p{margin-top:var(--espace-m)}#page-a-propos .storytelling .boite-texte[data-ensemble-epingle-boite-actif]{visibility:visible;opacity:1}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="2"]{--hauteur-boite:calc(7lh + 1rem + var(--espace-l) * 2);top:calc(23% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"]{--hauteur-boite:calc(7lh + 1rem + var(--espace-l) * 2);top:calc(35% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] button{left:calc(-1.5rem - var(--espace-m) - var(--espace-xs))}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="4"]{--hauteur-boite:calc(8lh + 2rem + var(--espace-l) * 2);top:calc(58% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="5"]{--hauteur-boite:calc(12lh + 2rem + var(--espace-l) * 2);top:calc(76% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"]{--hauteur-boite:calc(7lh + 1rem + var(--espace-l) * 2);top:calc(95.5% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] button{left:calc(-1.5rem - var(--espace-m) - var(--espace-xs))}@media (width<=700px){#page-a-propos{--images-marges-ligne:var(--espace-m)}}@keyframes clignotement{to{filter:opacity(30%)}}
|
#page-a-propos{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-a-propos .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-a-propos .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur) * 13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-a-propos .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl) * 2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right), #0000, #000 20%, #000 80%, #0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-a-propos .storytelling__animation[hidden]{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-a-propos .storytelling__animation.no-js{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-a-propos .storytelling__animation .animation-conteneur{width:120vw;block-size:var(--hauteur-animation);overflow:visible}#page-a-propos .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-a-propos .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-a-propos .storytelling__image[data-caché]{display:none!important}#page-a-propos .storytelling__image picture{max-block-size:inherit}#page-a-propos .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-a-propos .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-a-propos{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-a-propos{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-a-propos .storytelling__animation{--taille-police:calc(var(--espace-xl) * 2.2)}}
|
||||||
|
|
@ -1,121 +1,10 @@
|
||||||
@charset "UTF-8";
|
|
||||||
#page-accueil {
|
#page-accueil {
|
||||||
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
--hauteur-conteneur: calc(100svh - var(--pied-de-page-hauteur));
|
||||||
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
|
||||||
--conteneur-marges-internes-ligne: var(--espace-xl);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
min-block-size: var(--hauteur-conteneur);
|
min-block-size: var(--hauteur-conteneur);
|
||||||
max-block-size: var(--hauteur-conteneur);
|
max-block-size: var(--hauteur-conteneur);
|
||||||
margin-top: var(--page-marges-bloc-debut);
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling {
|
|
||||||
overflow-y: scroll;
|
|
||||||
overscroll-behavior: none;
|
|
||||||
min-block-size: inherit;
|
|
||||||
max-block-size: inherit;
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling__conteneur {
|
|
||||||
overscroll-behavior: inherit;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
place-items: center;
|
|
||||||
min-block-size: calc(var(--hauteur-conteneur) * 13);
|
|
||||||
padding: 0 var(--conteneur-marges-internes-ligne);
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling__animation {
|
|
||||||
--hauteur-animation: 90px;
|
|
||||||
--taille-police: calc(var(--espace-xl) * 2.5);
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 3;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
display: grid;
|
|
||||||
place-content: center;
|
|
||||||
place-items: center;
|
|
||||||
block-size: 100%;
|
|
||||||
margin: auto;
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
mask-image: linear-gradient(
|
|
||||||
var(--mask-direction, to right),
|
|
||||||
hsla(0, 0%, 0%, 0),
|
|
||||||
hsl(0, 0%, 0%) 20%,
|
|
||||||
hsl(0, 0%, 0%) 80%,
|
|
||||||
hsla(0, 0%, 0%, 0)
|
|
||||||
);
|
|
||||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling__animation[hidden] {
|
|
||||||
display: grid !important;
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling__animation.no-js {
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling__animation .animation-conteneur {
|
|
||||||
overflow: visible;
|
|
||||||
width: 120vw;
|
|
||||||
block-size: var(--hauteur-animation);
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling__animation .animation-texte {
|
|
||||||
overflow: visible;
|
|
||||||
font-size: var(--taille-police);
|
|
||||||
font-weight: 600;
|
|
||||||
text-shadow: 4px 4px 0 var(--couleur-blanc);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling__image {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
align-content: center;
|
|
||||||
inline-size: max-content;
|
|
||||||
max-inline-size: 100%;
|
|
||||||
min-block-size: var(--hauteur-conteneur);
|
|
||||||
max-block-size: var(--hauteur-conteneur);
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling__image[data-caché] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling__image picture {
|
|
||||||
max-block-size: inherit;
|
|
||||||
}
|
|
||||||
#page-accueil .storytelling__image img {
|
|
||||||
scale: 0.95;
|
|
||||||
max-block-size: inherit;
|
|
||||||
margin: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
@media (scripting: none) {
|
|
||||||
#page-accueil .storytelling__animation {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (width <= 700px) {
|
|
||||||
#page-accueil {
|
|
||||||
--conteneur-marges-internes-ligne: var(--espace-l);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (width <= 500px) {
|
|
||||||
#page-accueil {
|
|
||||||
--conteneur-marges-internes-ligne: var(--espace-m);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (-moz-appearance: none) {
|
|
||||||
#page-accueil .storytelling__animation {
|
|
||||||
--taille-police: calc(var(--espace-xl) * 2.2);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* # sourceMappingURL=page-accueil.css.map */
|
/* # sourceMappingURL=page-accueil.css.map */
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAOA;;AAEA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;EAIA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-accueil.css"}
|
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;EAEE;EAEA;EACA;EACA;EACA;EACA","file":"page-accueil.css"}
|
||||||
|
|
@ -1 +1 @@
|
||||||
#page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-accueil .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur) * 13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-accueil .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl) * 2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right), #0000, #000 20%, #000 80%, #0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-accueil .storytelling__animation[hidden]{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-accueil .storytelling__animation.no-js{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-accueil .storytelling__animation .animation-conteneur{width:120vw;block-size:var(--hauteur-animation);overflow:visible}#page-accueil .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-accueil .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-accueil .storytelling__image[data-caché]{display:none!important}#page-accueil .storytelling__image picture{max-block-size:inherit}#page-accueil .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-accueil .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-accueil .storytelling__animation{--taille-police:calc(var(--espace-xl) * 2.2)}}
|
#page-accueil{--hauteur-conteneur:calc(100svh - var(--pied-de-page-hauteur));min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);flex-flow:column;display:flex;overflow:hidden}
|
||||||
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.m4v
Normal file
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.m4v
Normal file
Binary file not shown.
Binary file not shown.
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-phone.m4v
Normal file
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-phone.m4v
Normal file
Binary file not shown.
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-phone.webm
Normal file
BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-phone.webm
Normal file
Binary file not shown.
|
|
@ -21,10 +21,6 @@ add_action('wp_enqueue_scripts', function (): void {
|
||||||
handle: 'haiku-atelier-2024-styles-page-accueil',
|
handle: 'haiku-atelier-2024-styles-page-accueil',
|
||||||
path: '/assets/css/pages/page-accueil.css',
|
path: '/assets/css/pages/page-accueil.css',
|
||||||
);
|
);
|
||||||
Resource::enqueue_script_module_file(
|
|
||||||
id: 'haiku-atelier-2024-scripts-page-accueil',
|
|
||||||
path: '/assets/js/scripts-page-accueil.js',
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
Timber::render(data: $context, filenames: $templates);
|
Timber::render(data: $context, filenames: $templates);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
dialog {
|
||||||
|
z-index: 999;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
place-self: center center;
|
||||||
|
padding: var(--espace-l);
|
||||||
|
opacity: 0;
|
||||||
|
background: white;
|
||||||
|
transition: display 0.3s, opacity 0.3s, overlay 0.3s;
|
||||||
|
transition-behavior: allow-discrete;
|
||||||
|
|
||||||
|
&::backdrop {
|
||||||
|
background-color: transparent;
|
||||||
|
transition: background-color 0.3s, display 0.3s, overlay 0.3s;
|
||||||
|
transition-behavior: allow-discrete;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:open {
|
||||||
|
display: flex;
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
&::backdrop {
|
||||||
|
background-color: var(--couleur-fond);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
* + * {
|
||||||
|
margin-block-start: var(--espace-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-inline-size: 50ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
align-self: end;
|
||||||
|
inline-size: fit-content;
|
||||||
|
padding: var(--espace-s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@starting-style {
|
||||||
|
dialog:open {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@starting-style {
|
||||||
|
dialog:open::backdrop {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
video {
|
||||||
|
display: block;
|
||||||
|
inline-size: 100%;
|
||||||
|
min-inline-size: 100%;
|
||||||
|
block-size: 100%;
|
||||||
|
min-block-size: inherit;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
@ -10,7 +10,6 @@
|
||||||
padding: var(--espace-s) var(--espace-m);
|
padding: var(--espace-s) var(--espace-m);
|
||||||
border-top: 1px solid var(--couleur-noir);
|
border-top: 1px solid var(--couleur-noir);
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
background: var(--couleur-jaune);
|
|
||||||
|
|
||||||
// Liens vers les pages du site
|
// Liens vers les pages du site
|
||||||
.zone-menu-navigation-secondaire {
|
.zone-menu-navigation-secondaire {
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,12 @@
|
||||||
|
|
||||||
// 1.2 Éléments
|
// 1.2 Éléments
|
||||||
@use "base/elements/boutons" as boutons;
|
@use "base/elements/boutons" as boutons;
|
||||||
|
@use "base/elements/dialogs" as dialogs;
|
||||||
@use "base/elements/formulaires" as formulaires;
|
@use "base/elements/formulaires" as formulaires;
|
||||||
@use "base/elements/images" as images;
|
@use "base/elements/images" as images;
|
||||||
@use "base/elements/liens" as liens;
|
@use "base/elements/liens" as liens;
|
||||||
@use "base/elements/listes" as listes;
|
@use "base/elements/listes" as listes;
|
||||||
|
@use "base/elements/media" as media;
|
||||||
|
|
||||||
// 3. Régions
|
// 3. Régions
|
||||||
@use "layouts/bandeau" as bandeau;
|
@use "layouts/bandeau" as bandeau;
|
||||||
|
|
|
||||||
|
|
@ -1,201 +1,146 @@
|
||||||
// Styles pour la Page À Propos (« About »).
|
// Styles pour la Page « A propos »
|
||||||
|
|
||||||
#page-a-propos {
|
#page-a-propos {
|
||||||
// Dimensions
|
// Dimensions
|
||||||
--images-longueur-maximale: 1300px;
|
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
||||||
|
|
||||||
// Marges
|
// Marges
|
||||||
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
||||||
--images-marges-ligne: var(--espace-xl) * 2;
|
--conteneur-marges-internes-ligne: var(--espace-xl);
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
|
min-block-size: var(--hauteur-conteneur);
|
||||||
|
max-block-size: var(--hauteur-conteneur);
|
||||||
margin-top: var(--page-marges-bloc-debut);
|
margin-top: var(--page-marges-bloc-debut);
|
||||||
|
|
||||||
.storytelling {
|
.storytelling {
|
||||||
padding: var(--espace-xl) 0;
|
overflow-y: scroll;
|
||||||
color: var(--couleur-gris-fonce);
|
overscroll-behavior: none;
|
||||||
|
min-block-size: inherit;
|
||||||
|
max-block-size: inherit;
|
||||||
|
|
||||||
&__conteneur {
|
&__conteneur {
|
||||||
position: relative;
|
overscroll-behavior: inherit;
|
||||||
width: min(var(--images-longueur-maximale), calc(100% - var(--images-marges-ligne)));
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
place-items: center;
|
||||||
|
min-block-size: calc(var(--hauteur-conteneur) * 13);
|
||||||
|
padding: 0 var(--conteneur-marges-internes-ligne);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Texte animé indiquant à l'Utilisateur de défiler vers le bas.
|
||||||
|
&__animation {
|
||||||
|
--hauteur-animation: 90px;
|
||||||
|
--taille-police: calc(var(--espace-xl) * 2.5);
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
block-size: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
mask-image: linear-gradient(
|
||||||
|
var(--mask-direction, to right),
|
||||||
|
hsl(0deg 0% 0% / 0%),
|
||||||
|
hsl(0deg 0% 0% / 100%) 20%,
|
||||||
|
hsl(0deg 0% 0% / 100%) 80%,
|
||||||
|
hsl(0deg 0% 0% / 0%)
|
||||||
|
);
|
||||||
|
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||||
|
|
||||||
|
&[hidden] {
|
||||||
|
display: grid !important;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
// N'affiche rien si JavaScript n'est pas activé.
|
||||||
|
&.no-js {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-conteneur {
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
// Nécessaire pour que les lettres apparaissent « en douceur » dans la vue.
|
||||||
|
// Safari requiert des `vw` plutôt que des `%`.
|
||||||
|
width: 120vw;
|
||||||
|
block-size: var(--hauteur-animation);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-texte {
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
// TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ?
|
||||||
|
font-size: var(--taille-police);
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
// TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ?
|
||||||
|
text-shadow: 4px 4px 0 var(--couleur-blanc);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__image {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
align-content: center;
|
||||||
|
inline-size: max-content;
|
||||||
|
max-inline-size: 100%;
|
||||||
|
min-block-size: var(--hauteur-conteneur);
|
||||||
|
max-block-size: var(--hauteur-conteneur);
|
||||||
|
|
||||||
|
&[data-caché] {
|
||||||
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
picture {
|
picture {
|
||||||
position: relative;
|
max-block-size: inherit;
|
||||||
|
|
||||||
// Image de préchargement
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
|
|
||||||
background-repeat: space;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
filter: opacity(0%);
|
|
||||||
animation: 1s clignotement infinite alternate both linear;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Image du storytelling
|
|
||||||
img {
|
img {
|
||||||
position: relative;
|
scale: 0.95;
|
||||||
width: max-content;
|
max-block-size: inherit;
|
||||||
height: auto;
|
margin: auto;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.epingle {
|
|
||||||
position: absolute;
|
|
||||||
right: 46.5%;
|
|
||||||
|
|
||||||
img {
|
|
||||||
pointer-events: none;
|
|
||||||
display: block;
|
|
||||||
width: 1.75rem;
|
|
||||||
|
|
||||||
/* filter: drop-shadow(1px 1px 3px var(--couleur-gris-fonce)); */
|
|
||||||
|
|
||||||
/* transition: 0.2s filter; */
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="1"] {
|
|
||||||
top: 1%;
|
|
||||||
right: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="2"] {
|
|
||||||
top: 25%;
|
|
||||||
right: 70%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="3"] {
|
|
||||||
top: 37%;
|
|
||||||
right: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="4"] {
|
|
||||||
top: 58%;
|
|
||||||
right: 70%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="5"] {
|
|
||||||
top: 76%;
|
|
||||||
right: 14%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="6"] {
|
|
||||||
top: 95.5%;
|
|
||||||
right: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-ensemble-epingle-boite-actif] {
|
|
||||||
img {
|
|
||||||
/* filter: drop-shadow(1px 1px 5px var(--couleur-gris-fonce)); */
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.boite-texte {
|
// Désactive l'animation si JavaScript n'est pas disponible.
|
||||||
position: absolute;
|
@media (scripting: none) {
|
||||||
top: 0;
|
.storytelling__animation {
|
||||||
right: calc(46.5% - (15rem + var(--espace-l)) / 2);
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
padding: var(--espace-l);
|
|
||||||
border: 1px solid var(--couleur-noir);
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-style: italic;
|
|
||||||
color: var(--couleur-noir);
|
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
|
||||||
background: var(--couleur-fond);
|
|
||||||
transition: 0.2s opacity, 0.2s visibility;
|
|
||||||
|
|
||||||
button {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: calc(1.5rem * -1 - var(--espace-m) - var(--espace-xs));
|
|
||||||
align-self: end;
|
|
||||||
padding: var(--espace-xs);
|
|
||||||
|
|
||||||
img {
|
|
||||||
pointer-events: none;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
width: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background: var(--couleur-jaune);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
max-width: 15rem;
|
|
||||||
|
|
||||||
+ p {
|
|
||||||
margin-top: var(--espace-m);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-ensemble-epingle-boite-actif] {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="2"] {
|
|
||||||
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
|
||||||
|
|
||||||
top: calc(23% - var(--hauteur-boite) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="3"] {
|
|
||||||
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
|
||||||
|
|
||||||
top: calc(35% - var(--hauteur-boite) / 2);
|
|
||||||
|
|
||||||
button {
|
|
||||||
left: calc(1.5rem * -1 - var(--espace-m) - var(--espace-xs));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="4"] {
|
|
||||||
--hauteur-boite: calc(8lh + 2rem + var(--espace-l) * 2);
|
|
||||||
|
|
||||||
top: calc(58% - var(--hauteur-boite) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="5"] {
|
|
||||||
--hauteur-boite: calc(12lh + 2rem + var(--espace-l) * 2);
|
|
||||||
|
|
||||||
top: calc(76% - var(--hauteur-boite) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-id-ensemble-epingle-boite="6"] {
|
|
||||||
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
|
||||||
|
|
||||||
top: calc(95.5% - var(--hauteur-boite) / 2);
|
|
||||||
|
|
||||||
button {
|
|
||||||
left: calc(1.5rem * -1 - var(--espace-m) - var(--espace-xs));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (width <= 700px) {
|
@media (width <= 700px) {
|
||||||
--images-marges-ligne: var(--espace-m);
|
--conteneur-marges-internes-ligne: var(--espace-l);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width <= 500px) {
|
||||||
|
--conteneur-marges-internes-ligne: var(--espace-m);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes clignotement {
|
// TODO: Réduit la taille de la police de l'animation sur FF car elle apparaît plus grande...
|
||||||
to {
|
@supports (-moz-appearance: none) {
|
||||||
filter: opacity(30%);
|
#page-a-propos .storytelling__animation {
|
||||||
|
--taille-police: calc(var(--espace-xl) * 2.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,146 +1,12 @@
|
||||||
// Styles pour la Page d'accueil
|
// Styles pour la Page d'Accueil
|
||||||
|
|
||||||
#page-accueil {
|
#page-accueil {
|
||||||
// Dimensions
|
// Dimensions
|
||||||
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
--hauteur-conteneur: calc(100svh - var(--pied-de-page-hauteur));
|
||||||
|
|
||||||
// Marges
|
|
||||||
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
|
||||||
--conteneur-marges-internes-ligne: var(--espace-xl);
|
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
min-block-size: var(--hauteur-conteneur);
|
min-block-size: var(--hauteur-conteneur);
|
||||||
max-block-size: var(--hauteur-conteneur);
|
max-block-size: var(--hauteur-conteneur);
|
||||||
margin-top: var(--page-marges-bloc-debut);
|
|
||||||
|
|
||||||
.storytelling {
|
|
||||||
overflow-y: scroll;
|
|
||||||
overscroll-behavior: none;
|
|
||||||
min-block-size: inherit;
|
|
||||||
max-block-size: inherit;
|
|
||||||
|
|
||||||
&__conteneur {
|
|
||||||
overscroll-behavior: inherit;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
place-items: center;
|
|
||||||
min-block-size: calc(var(--hauteur-conteneur) * 13);
|
|
||||||
padding: 0 var(--conteneur-marges-internes-ligne);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Texte animé indiquant à l'Utilisateur de défiler vers le bas.
|
|
||||||
&__animation {
|
|
||||||
--hauteur-animation: 90px;
|
|
||||||
--taille-police: calc(var(--espace-xl) * 2.5);
|
|
||||||
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 3;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
display: grid;
|
|
||||||
place-content: center;
|
|
||||||
place-items: center;
|
|
||||||
block-size: 100%;
|
|
||||||
margin: auto;
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
mask-image: linear-gradient(
|
|
||||||
var(--mask-direction, to right),
|
|
||||||
hsl(0deg 0% 0% / 0%),
|
|
||||||
hsl(0deg 0% 0% / 100%) 20%,
|
|
||||||
hsl(0deg 0% 0% / 100%) 80%,
|
|
||||||
hsl(0deg 0% 0% / 0%)
|
|
||||||
);
|
|
||||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
|
||||||
|
|
||||||
&[hidden] {
|
|
||||||
display: grid !important;
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
// N'affiche rien si JavaScript n'est pas activé.
|
|
||||||
&.no-js {
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animation-conteneur {
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
// Nécessaire pour que les lettres apparaissent « en douceur » dans la vue.
|
|
||||||
// Safari requiert des `vw` plutôt que des `%`.
|
|
||||||
width: 120vw;
|
|
||||||
block-size: var(--hauteur-animation);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animation-texte {
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
// TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ?
|
|
||||||
font-size: var(--taille-police);
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
// TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ?
|
|
||||||
text-shadow: 4px 4px 0 var(--couleur-blanc);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__image {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
align-content: center;
|
|
||||||
inline-size: max-content;
|
|
||||||
max-inline-size: 100%;
|
|
||||||
min-block-size: var(--hauteur-conteneur);
|
|
||||||
max-block-size: var(--hauteur-conteneur);
|
|
||||||
|
|
||||||
&[data-caché] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
picture {
|
|
||||||
max-block-size: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
scale: 0.95;
|
|
||||||
max-block-size: inherit;
|
|
||||||
margin: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Désactive l'animation si JavaScript n'est pas disponible.
|
|
||||||
@media (scripting: none) {
|
|
||||||
.storytelling__animation {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width <= 700px) {
|
|
||||||
--conteneur-marges-internes-ligne: var(--espace-l);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width <= 500px) {
|
|
||||||
--conteneur-marges-internes-ligne: var(--espace-m);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: Réduit la taille de la police de l'animation sur FF car elle apparaît plus grande...
|
|
||||||
@supports (-moz-appearance: none) {
|
|
||||||
#page-accueil .storytelling__animation {
|
|
||||||
--taille-police: calc(var(--espace-xl) * 2.2);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
96
web/app/themes/haiku-atelier-2024/src/scripts/_scripts-page-a-propos.ts
Executable file
96
web/app/themes/haiku-atelier-2024/src/scripts/_scripts-page-a-propos.ts
Executable file
|
|
@ -0,0 +1,96 @@
|
||||||
|
/**
|
||||||
|
* Scripts pour les fonctionnalités de la Page À Propos (« About »).
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { A, O, pipe as beltPipe } from "@mobily/ts-belt";
|
||||||
|
|
||||||
|
import {
|
||||||
|
ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF,
|
||||||
|
ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE,
|
||||||
|
CLASS_BOUTON_FERMETURE_BOITE_TEXTE,
|
||||||
|
CLASS_EPINGLE,
|
||||||
|
DOM_BOITE_TEXTE,
|
||||||
|
DOM_CONTENEUR_STORYTELLING_A_PROPOS,
|
||||||
|
DOM_EPINGLE,
|
||||||
|
} from "./constantes/dom.ts";
|
||||||
|
import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts";
|
||||||
|
|
||||||
|
/** Le Conteneur des images du storytelling. */
|
||||||
|
const CONTENEUR_STORYTELLING = mustGetEleInDocument<HTMLElement>(DOM_CONTENEUR_STORYTELLING_A_PROPOS);
|
||||||
|
/** */
|
||||||
|
const EPINGLES = mustGetElesInDocument<HTMLButtonElement>(DOM_EPINGLE);
|
||||||
|
/** */
|
||||||
|
const BOITES_TEXTE = mustGetElesInDocument<HTMLDivElement>(DOM_BOITE_TEXTE);
|
||||||
|
/** */
|
||||||
|
const ENSEMBLES_EPINGLES_BOITES_TEXTE = new Map<string, [HTMLButtonElement, HTMLDivElement]>();
|
||||||
|
A.forEachWithIndex(EPINGLES, (index, epingle) => {
|
||||||
|
beltPipe(
|
||||||
|
epingle,
|
||||||
|
O.flatMap((bouton: HTMLButtonElement) => bouton.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
|
||||||
|
O.tap((id: string) => {
|
||||||
|
ENSEMBLES_EPINGLES_BOITES_TEXTE.set(id, [epingle, BOITES_TEXTE[index]!]);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", (): void => {
|
||||||
|
CONTENEUR_STORYTELLING.addEventListener("click", (evenement): void => {
|
||||||
|
// Délégation d'Évènements au clic sur un <button>
|
||||||
|
const cible: HTMLElement = evenement.target as HTMLElement;
|
||||||
|
|
||||||
|
// Clic sur un Bouton de fermeture de Boîte
|
||||||
|
beltPipe(
|
||||||
|
cible,
|
||||||
|
// TODO: Créer une fonction « liftPredicate » agissant comme prédicat de type
|
||||||
|
O.fromPredicate((element: HTMLElement) => element.className === CLASS_BOUTON_FERMETURE_BOITE_TEXTE),
|
||||||
|
O.mapNullable((bouton: HTMLButtonElement) => bouton.parentElement),
|
||||||
|
O.flatMap((boite: HTMLDivElement) => boite.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
|
||||||
|
O.tap((id: string) => {
|
||||||
|
beltPipe(
|
||||||
|
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
|
||||||
|
O.tap(
|
||||||
|
A.forEach(element => {
|
||||||
|
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Clic sur une Épingle
|
||||||
|
beltPipe(
|
||||||
|
cible,
|
||||||
|
// Vérifier la classe plutôt que le bouton
|
||||||
|
O.fromPredicate((element: HTMLElement) => element.className === CLASS_EPINGLE),
|
||||||
|
O.flatMap((bouton: HTMLButtonElement) => bouton.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
|
||||||
|
O.tap((id: string) => {
|
||||||
|
// Désactive l'Attribut actif si la cible est déjà active et retourne précocement
|
||||||
|
if (cible.hasAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF)) {
|
||||||
|
beltPipe(
|
||||||
|
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
|
||||||
|
O.tap(
|
||||||
|
A.forEach(element => {
|
||||||
|
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Désactive tous les Ensembles
|
||||||
|
beltPipe(
|
||||||
|
Array.from(ENSEMBLES_EPINGLES_BOITES_TEXTE.values()),
|
||||||
|
A.flat,
|
||||||
|
A.forEach(element => {
|
||||||
|
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
// Active l'Attribut sur l'Ensemble
|
||||||
|
beltPipe(
|
||||||
|
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
|
||||||
|
O.tap(A.forEach(element => element.toggleAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF))),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -1,96 +1,128 @@
|
||||||
/**
|
// Scripts pour la Page d'accueil
|
||||||
* Scripts pour les fonctionnalités de la Page À Propos (« About »).
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { A, O, pipe as beltPipe } from "@mobily/ts-belt";
|
import { A, O, pipe } from "@mobily/ts-belt";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF,
|
ATTRIBUT_CACHÉ,
|
||||||
ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE,
|
ATTRIBUT_HIDDEN,
|
||||||
CLASS_BOUTON_FERMETURE_BOITE_TEXTE,
|
DOM_CONTENEUR_ANIMATION,
|
||||||
CLASS_EPINGLE,
|
DOM_CONTENEUR_STORYTELLING,
|
||||||
DOM_BOITE_TEXTE,
|
DOM_GARDE_FOU_JS,
|
||||||
DOM_CONTENEUR_STORYTELLING_A_PROPOS,
|
DOM_IMAGES_STORYTELLING,
|
||||||
DOM_EPINGLE,
|
|
||||||
} from "./constantes/dom.ts";
|
} from "./constantes/dom.ts";
|
||||||
import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts";
|
import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts";
|
||||||
|
import { estEntreDeuxNombres } from "./lib/nombres.ts";
|
||||||
|
|
||||||
/** Le Conteneur des images du storytelling. */
|
const E = {
|
||||||
const CONTENEUR_STORYTELLING = mustGetEleInDocument<HTMLElement>(DOM_CONTENEUR_STORYTELLING_A_PROPOS);
|
/** Le bloc contenant l'animation. */
|
||||||
/** */
|
CONTENEUR_ANIMATION: mustGetEleInDocument<HTMLDivElement>(DOM_CONTENEUR_ANIMATION),
|
||||||
const EPINGLES = mustGetElesInDocument<HTMLButtonElement>(DOM_EPINGLE);
|
/** Le conteneur des images du storytelling. */
|
||||||
/** */
|
CONTENEUR_STORYTELLING: mustGetEleInDocument<HTMLElement>(".storytelling__conteneur"),
|
||||||
const BOITES_TEXTE = mustGetElesInDocument<HTMLDivElement>(DOM_BOITE_TEXTE);
|
/** Les images du storytelling. */
|
||||||
/** */
|
IMAGES_STORYTELLING: mustGetElesInDocument<HTMLDivElement>(DOM_IMAGES_STORYTELLING),
|
||||||
const ENSEMBLES_EPINGLES_BOITES_TEXTE = new Map<string, [HTMLButtonElement, HTMLDivElement]>();
|
/** Le bloc contenant le storytelling. */
|
||||||
A.forEachWithIndex(EPINGLES, (index, epingle) => {
|
STORYTELLING: mustGetEleInDocument<HTMLElement>(DOM_CONTENEUR_STORYTELLING),
|
||||||
beltPipe(
|
};
|
||||||
epingle,
|
|
||||||
O.flatMap((bouton: HTMLButtonElement) => bouton.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
|
/**
|
||||||
O.tap((id: string) => {
|
* Retire la classe garde-fou `.js` cachant les éléments nécessitant JavaScript pour s'afficher/fonctionner correctement.
|
||||||
ENSEMBLES_EPINGLES_BOITES_TEXTE.set(id, [epingle, BOITES_TEXTE[index]!]);
|
*/
|
||||||
|
const retireClasseGardeFouJs = (): void => {
|
||||||
|
E.CONTENEUR_ANIMATION.classList.remove(DOM_GARDE_FOU_JS);
|
||||||
|
};
|
||||||
|
|
||||||
|
const initDefilementStorytelling = (): void => {
|
||||||
|
/** La hauteur d'une image du storytelling. */
|
||||||
|
let dimensionsImage = {
|
||||||
|
height: E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().height ?? 0,
|
||||||
|
width: E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().width ?? 0,
|
||||||
|
};
|
||||||
|
/** La position du défilement (en pixels) du Conteneur des images du storytelling. */
|
||||||
|
let positionDefilementConteneur = 0;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bascule la visibilité d'une image en
|
||||||
|
* @param image
|
||||||
|
* @param estVisible
|
||||||
|
*/
|
||||||
|
const basculeVisibilitéImage = (image: HTMLDivElement, estVisible: boolean) => {
|
||||||
|
image.toggleAttribute(ATTRIBUT_CACHÉ, estVisible);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
|
const majDimensionsStorytelling = (): void => {
|
||||||
|
dimensionsImage = pipe(
|
||||||
|
A.getBy(E.IMAGES_STORYTELLING, (i: HTMLDivElement) => !i.hasAttribute(ATTRIBUT_CACHÉ)),
|
||||||
|
O.map((i: HTMLDivElement) => ({
|
||||||
|
height: i.getBoundingClientRect().height,
|
||||||
|
width: i.getBoundingClientRect().width,
|
||||||
|
})),
|
||||||
|
O.getWithDefault({ height: 0, width: 0 }),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Adapte la longueur du conteneur d'animation à la nouvelle longueur d'une image.
|
||||||
|
E.CONTENEUR_ANIMATION.style.width = `${String(dimensionsImage.width)}px`;
|
||||||
|
|
||||||
|
// Adapte la hauteur du conteneur des images pour un défilement « seamless ».
|
||||||
|
const nouvelleHauteurMax = `${String(dimensionsImage.height * E.IMAGES_STORYTELLING.length + 61)}px`;
|
||||||
|
E.CONTENEUR_STORYTELLING.style.minHeight = nouvelleHauteurMax;
|
||||||
|
E.CONTENEUR_STORYTELLING.style.maxHeight = nouvelleHauteurMax;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
|
const majVisibilitéImagesStorytelling = (): void => {
|
||||||
|
// Met à jour la position du défilement dans le Conteneur.
|
||||||
|
positionDefilementConteneur = E.STORYTELLING.scrollTop;
|
||||||
|
|
||||||
|
// Met à jour l'attribut de visibilité des images en fonction du défilement.
|
||||||
|
E.IMAGES_STORYTELLING.forEach((image: HTMLDivElement, index: number): void => {
|
||||||
|
const debutYImage = dimensionsImage.height * index;
|
||||||
|
const finYImage = dimensionsImage.height * (index + 1);
|
||||||
|
|
||||||
|
basculeVisibilitéImage(image, !estEntreDeuxNombres(positionDefilementConteneur, debutYImage, finYImage));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialise l'Observateur de Redimensionnement (ResizeObserver).
|
||||||
|
new ResizeObserver((): void => {
|
||||||
|
majDimensionsStorytelling();
|
||||||
|
majVisibilitéImagesStorytelling();
|
||||||
|
}).observe(E.STORYTELLING);
|
||||||
|
|
||||||
|
// Initialise la mise à jour des images au défilement sur le Conteneur.
|
||||||
|
E.STORYTELLING.addEventListener("scroll", (): void => {
|
||||||
|
majVisibilitéImagesStorytelling();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initGestionAnimation = (): void => {
|
||||||
|
pipe(
|
||||||
|
A.at(E.IMAGES_STORYTELLING, 0),
|
||||||
|
O.tap(img => {
|
||||||
|
const options: IntersectionObserverInit = {
|
||||||
|
root: undefined,
|
||||||
|
rootMargin: "0px",
|
||||||
|
threshold: 0,
|
||||||
|
};
|
||||||
|
const callback = (entries: Array<IntersectionObserverEntry>) => {
|
||||||
|
A.forEach(entries, e => {
|
||||||
|
e.intersectionRatio >= 0.9 ?
|
||||||
|
E.CONTENEUR_ANIMATION.removeAttribute(ATTRIBUT_HIDDEN) :
|
||||||
|
E.CONTENEUR_ANIMATION.setAttribute(ATTRIBUT_HIDDEN, "");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
new IntersectionObserver(callback, options).observe(img);
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
});
|
};
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", (): void => {
|
document.addEventListener("DOMContentLoaded", (): void => {
|
||||||
CONTENEUR_STORYTELLING.addEventListener("click", (evenement): void => {
|
retireClasseGardeFouJs();
|
||||||
// Délégation d'Évènements au clic sur un <button>
|
initDefilementStorytelling();
|
||||||
const cible: HTMLElement = evenement.target as HTMLElement;
|
initGestionAnimation();
|
||||||
|
|
||||||
// Clic sur un Bouton de fermeture de Boîte
|
|
||||||
beltPipe(
|
|
||||||
cible,
|
|
||||||
// TODO: Créer une fonction « liftPredicate » agissant comme prédicat de type
|
|
||||||
O.fromPredicate((element: HTMLElement) => element.className === CLASS_BOUTON_FERMETURE_BOITE_TEXTE),
|
|
||||||
O.mapNullable((bouton: HTMLButtonElement) => bouton.parentElement),
|
|
||||||
O.flatMap((boite: HTMLDivElement) => boite.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
|
|
||||||
O.tap((id: string) => {
|
|
||||||
beltPipe(
|
|
||||||
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
|
|
||||||
O.tap(
|
|
||||||
A.forEach(element => {
|
|
||||||
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
// Clic sur une Épingle
|
|
||||||
beltPipe(
|
|
||||||
cible,
|
|
||||||
// Vérifier la classe plutôt que le bouton
|
|
||||||
O.fromPredicate((element: HTMLElement) => element.className === CLASS_EPINGLE),
|
|
||||||
O.flatMap((bouton: HTMLButtonElement) => bouton.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
|
|
||||||
O.tap((id: string) => {
|
|
||||||
// Désactive l'Attribut actif si la cible est déjà active et retourne précocement
|
|
||||||
if (cible.hasAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF)) {
|
|
||||||
beltPipe(
|
|
||||||
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
|
|
||||||
O.tap(
|
|
||||||
A.forEach(element => {
|
|
||||||
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Désactive tous les Ensembles
|
|
||||||
beltPipe(
|
|
||||||
Array.from(ENSEMBLES_EPINGLES_BOITES_TEXTE.values()),
|
|
||||||
A.flat,
|
|
||||||
A.forEach(element => {
|
|
||||||
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
// Active l'Attribut sur l'Ensemble
|
|
||||||
beltPipe(
|
|
||||||
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
|
|
||||||
O.tap(A.forEach(element => element.toggleAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF))),
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
// Scripts pour la Page d'accueil
|
|
||||||
|
|
||||||
import { A, O, pipe } from "@mobily/ts-belt";
|
|
||||||
|
|
||||||
import {
|
|
||||||
ATTRIBUT_CACHÉ,
|
|
||||||
ATTRIBUT_HIDDEN,
|
|
||||||
DOM_CONTENEUR_ANIMATION,
|
|
||||||
DOM_CONTENEUR_STORYTELLING,
|
|
||||||
DOM_GARDE_FOU_JS,
|
|
||||||
DOM_IMAGES_STORYTELLING,
|
|
||||||
} from "./constantes/dom.ts";
|
|
||||||
import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts";
|
|
||||||
import { estEntreDeuxNombres } from "./lib/nombres.ts";
|
|
||||||
|
|
||||||
const E = {
|
|
||||||
/** Le bloc contenant l'animation. */
|
|
||||||
CONTENEUR_ANIMATION: mustGetEleInDocument<HTMLDivElement>(DOM_CONTENEUR_ANIMATION),
|
|
||||||
/** Le conteneur des images du storytelling. */
|
|
||||||
CONTENEUR_STORYTELLING: mustGetEleInDocument<HTMLElement>(".storytelling__conteneur"),
|
|
||||||
/** Les images du storytelling. */
|
|
||||||
IMAGES_STORYTELLING: mustGetElesInDocument<HTMLDivElement>(DOM_IMAGES_STORYTELLING),
|
|
||||||
/** Le bloc contenant le storytelling. */
|
|
||||||
STORYTELLING: mustGetEleInDocument<HTMLElement>(DOM_CONTENEUR_STORYTELLING),
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Retire la classe garde-fou `.js` cachant les éléments nécessitant JavaScript pour s'afficher/fonctionner correctement.
|
|
||||||
*/
|
|
||||||
const retireClasseGardeFouJs = (): void => {
|
|
||||||
E.CONTENEUR_ANIMATION.classList.remove(DOM_GARDE_FOU_JS);
|
|
||||||
};
|
|
||||||
|
|
||||||
const initDefilementStorytelling = (): void => {
|
|
||||||
/** La hauteur d'une image du storytelling. */
|
|
||||||
let dimensionsImage = {
|
|
||||||
height: E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().height ?? 0,
|
|
||||||
width: E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().width ?? 0,
|
|
||||||
};
|
|
||||||
/** La position du défilement (en pixels) du Conteneur des images du storytelling. */
|
|
||||||
let positionDefilementConteneur = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Bascule la visibilité d'une image en
|
|
||||||
* @param image
|
|
||||||
* @param estVisible
|
|
||||||
*/
|
|
||||||
const basculeVisibilitéImage = (image: HTMLDivElement, estVisible: boolean) => {
|
|
||||||
image.toggleAttribute(ATTRIBUT_CACHÉ, estVisible);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* TODO
|
|
||||||
*/
|
|
||||||
const majDimensionsStorytelling = (): void => {
|
|
||||||
dimensionsImage = pipe(
|
|
||||||
A.getBy(E.IMAGES_STORYTELLING, (i: HTMLDivElement) => !i.hasAttribute(ATTRIBUT_CACHÉ)),
|
|
||||||
O.map((i: HTMLDivElement) => ({
|
|
||||||
height: i.getBoundingClientRect().height,
|
|
||||||
width: i.getBoundingClientRect().width,
|
|
||||||
})),
|
|
||||||
O.getWithDefault({ height: 0, width: 0 }),
|
|
||||||
);
|
|
||||||
|
|
||||||
// Adapte la longueur du conteneur d'animation à la nouvelle longueur d'une image.
|
|
||||||
E.CONTENEUR_ANIMATION.style.width = `${String(dimensionsImage.width)}px`;
|
|
||||||
|
|
||||||
// Adapte la hauteur du conteneur des images pour un défilement « seamless ».
|
|
||||||
const nouvelleHauteurMax = `${String(dimensionsImage.height * E.IMAGES_STORYTELLING.length + 61)}px`;
|
|
||||||
E.CONTENEUR_STORYTELLING.style.minHeight = nouvelleHauteurMax;
|
|
||||||
E.CONTENEUR_STORYTELLING.style.maxHeight = nouvelleHauteurMax;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* TODO
|
|
||||||
*/
|
|
||||||
const majVisibilitéImagesStorytelling = (): void => {
|
|
||||||
// Met à jour la position du défilement dans le Conteneur.
|
|
||||||
positionDefilementConteneur = E.STORYTELLING.scrollTop;
|
|
||||||
|
|
||||||
// Met à jour l'attribut de visibilité des images en fonction du défilement.
|
|
||||||
E.IMAGES_STORYTELLING.forEach((image: HTMLDivElement, index: number): void => {
|
|
||||||
const debutYImage = dimensionsImage.height * index;
|
|
||||||
const finYImage = dimensionsImage.height * (index + 1);
|
|
||||||
|
|
||||||
basculeVisibilitéImage(image, !estEntreDeuxNombres(positionDefilementConteneur, debutYImage, finYImage));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initialise l'Observateur de Redimensionnement (ResizeObserver).
|
|
||||||
new ResizeObserver((): void => {
|
|
||||||
majDimensionsStorytelling();
|
|
||||||
majVisibilitéImagesStorytelling();
|
|
||||||
}).observe(E.STORYTELLING);
|
|
||||||
|
|
||||||
// Initialise la mise à jour des images au défilement sur le Conteneur.
|
|
||||||
E.STORYTELLING.addEventListener("scroll", (): void => {
|
|
||||||
majVisibilitéImagesStorytelling();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const initGestionAnimation = (): void => {
|
|
||||||
pipe(
|
|
||||||
A.at(E.IMAGES_STORYTELLING, 0),
|
|
||||||
O.tap(img => {
|
|
||||||
const options: IntersectionObserverInit = {
|
|
||||||
root: undefined,
|
|
||||||
rootMargin: "0px",
|
|
||||||
threshold: 0,
|
|
||||||
};
|
|
||||||
const callback = (entries: Array<IntersectionObserverEntry>) => {
|
|
||||||
A.forEach(entries, e => {
|
|
||||||
e.intersectionRatio >= 0.9 ?
|
|
||||||
E.CONTENEUR_ANIMATION.removeAttribute(ATTRIBUT_HIDDEN) :
|
|
||||||
E.CONTENEUR_ANIMATION.setAttribute(ATTRIBUT_HIDDEN, "");
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
new IntersectionObserver(callback, options).observe(img);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", (): void => {
|
|
||||||
retireClasseGardeFouJs();
|
|
||||||
initDefilementStorytelling();
|
|
||||||
initGestionAnimation();
|
|
||||||
});
|
|
||||||
|
|
@ -3,182 +3,172 @@
|
||||||
{% import 'macros/images.twig' as images %}
|
{% import 'macros/images.twig' as images %}
|
||||||
|
|
||||||
{% block contenu %}
|
{% block contenu %}
|
||||||
<main id="page-a-propos">
|
<main id="page-a-propos" aria-label="Scroll down to navigate through the pictures">
|
||||||
<div class="storytelling">
|
<div class="storytelling">
|
||||||
<div class="storytelling__conteneur">
|
<div
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/haikuabout", 'A montage of many different pictures/drawings of jewelry and of someone working.', image_dimensions[0], image_dimensions[1], 'storytelling-montage') }}
|
aria-hidden="true" class="storytelling__conteneur"
|
||||||
|
inert
|
||||||
{# Épingles #}
|
|
||||||
<button
|
|
||||||
aria-label="First pin" class="epingle"
|
|
||||||
data-id-ensemble-epingle-boite="1" type="button"
|
|
||||||
>
|
>
|
||||||
<img
|
{# Animation #}
|
||||||
alt="" height="56"
|
<div class="storytelling__animation no-js">
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
<svg
|
||||||
width="82"
|
alt="" class="animation-conteneur"
|
||||||
/>
|
height="90px" preserveAspectRatio="xMidYMin"
|
||||||
</button>
|
viewBox="0 0 1200 90" width="100%"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<button
|
|
||||||
aria-label="Second pin" class="epingle"
|
|
||||||
data-id-ensemble-epingle-boite="2" type="button"
|
|
||||||
>
|
>
|
||||||
<img
|
<svg
|
||||||
alt="" height="56"
|
alt="Scroll down" class="animation-texte"
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
height="100%" width="100%"
|
||||||
width="82"
|
y="50%"
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
aria-label="Third pin" class="epingle"
|
|
||||||
data-id-ensemble-epingle-boite="3" type="button"
|
|
||||||
>
|
>
|
||||||
<img
|
<path
|
||||||
alt="" height="56"
|
d="m0 0c600-90 600 90 1200 0" fill="transparent"
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
id="curve-1" transform="translate3d(0,0,0)"
|
||||||
width="82"
|
|
||||||
/>
|
/>
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
{# TODO: Créer une fonction pour générer les images #}
|
||||||
aria-label="Fourth pin" class="epingle"
|
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||||
data-id-ensemble-epingle-boite="4" type="button"
|
<textPath id="text-path-1" xlink:href="#curve-1">
|
||||||
>
|
Scroll down
|
||||||
<img
|
</textPath>
|
||||||
alt="" height="56"
|
<animate
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
attributeName="startOffset" dur="5s"
|
||||||
width="82"
|
fill="remove" from="-50%"
|
||||||
|
to="0%" repeatCount="indefinite"
|
||||||
|
xlink:href="#text-path-1"
|
||||||
/>
|
/>
|
||||||
</button>
|
</text>
|
||||||
|
|
||||||
<button
|
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||||
aria-label="Fifth pin" class="epingle"
|
<textPath id="text-path-2" xlink:href="#curve-1">
|
||||||
data-id-ensemble-epingle-boite="5" type="button"
|
Scroll down
|
||||||
>
|
</textPath>
|
||||||
<img
|
<animate
|
||||||
alt="" height="56"
|
attributeName="startOffset" dur="5s"
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
fill="remove" from="0%"
|
||||||
width="82"
|
to="50%" repeatCount="indefinite"
|
||||||
|
xlink:href="#text-path-2"
|
||||||
/>
|
/>
|
||||||
</button>
|
</text>
|
||||||
|
|
||||||
<button
|
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||||
aria-label="Sixth pin" class="epingle"
|
<textPath id="text-path-3" xlink:href="#curve-1">
|
||||||
data-id-ensemble-epingle-boite="6" type="button"
|
Scroll down
|
||||||
>
|
</textPath>
|
||||||
<img
|
<animate
|
||||||
alt="" height="56"
|
attributeName="startOffset" dur="5s"
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
fill="remove" from="50%"
|
||||||
width="82"
|
to="100%" repeatCount="indefinite"
|
||||||
|
xlink:href="#text-path-3"
|
||||||
/>
|
/>
|
||||||
</button>
|
</text>
|
||||||
|
|
||||||
{# Boîtes de texte #}
|
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||||
<div class="boite-texte" data-id-ensemble-epingle-boite="1">
|
<textPath id="text-path-4" xlink:href="#curve-1">
|
||||||
<button class="boite-texte__bouton-fermeture" type="button">
|
Scroll down
|
||||||
<img
|
</textPath>
|
||||||
alt="An icon in form of a cross" height="20"
|
<animate
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
attributeName="startOffset" dur="5s"
|
||||||
width="20"
|
fill="remove" from="100%"
|
||||||
|
to="150%" repeatCount="indefinite"
|
||||||
|
xlink:href="#text-path-4"
|
||||||
/>
|
/>
|
||||||
</button>
|
</text>
|
||||||
|
</svg>
|
||||||
<p>
|
</svg>
|
||||||
Haïkus are short japanese poems written in three lines to capture the beauty of small details in the everyday life.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>More than poetry, it’s a philosophy.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="boite-texte" data-id-ensemble-epingle-boite="2">
|
{# Images #}
|
||||||
<button class="boite-texte__bouton-fermeture" type="button">
|
<div
|
||||||
<img
|
class="storytelling__image" data-index="1"
|
||||||
alt="An icon in form of a cross" height="20"
|
tabindex="-1"
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
>
|
||||||
width="20"
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", '', 903, 1080, 'image-scroll1') }}
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Haiku Atelier creates minimalist and subtil jewelry with an edgy twist, trying to distillate some poetry through those small objects.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Handcrafted with care in sustainable materials, each pieces has its uniqueness and is made to last.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="boite-texte" data-id-ensemble-epingle-boite="3">
|
<div
|
||||||
<button class="boite-texte__bouton-fermeture" type="button">
|
class="storytelling__image" data-caché
|
||||||
<img
|
data-index="2" tabindex="-1"
|
||||||
alt="An icon in form of a cross" height="20"
|
>
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", '', 903, 1080, 'image-scroll2') }}
|
||||||
width="20"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
After learning the art of jewelry making for two years in Paris, Manon Designere launched the brand Haiku, gleaning into the Japanese minimalist aesthetic.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Now based in Brussels, she still makes everything by hand, pouring her soul into her work to share her vision of the world.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="boite-texte" data-id-ensemble-epingle-boite="4">
|
<div
|
||||||
<button class="boite-texte__bouton-fermeture" type="button">
|
class="storytelling__image" data-caché
|
||||||
<img
|
data-index="3" tabindex="-1"
|
||||||
alt="An icon in form of a cross" height="20"
|
>
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", '', 903, 1080, 'image-scroll3') }}
|
||||||
width="20"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p>Here you can see some of the tools used at the studio.</p>
|
|
||||||
<p>
|
|
||||||
From sketches to models, from soldering to polishing, the numerous steps behind each piece are what makes it so unique.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
A touch of animism to value handcrafted objects, restrain mass production and lead toward slow life.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="boite-texte" data-id-ensemble-epingle-boite="5">
|
<div
|
||||||
<button class="boite-texte__bouton-fermeture" type="button">
|
class="storytelling__image" data-caché
|
||||||
<img
|
data-index="4" tabindex="-1"
|
||||||
alt="An icon in form of a cross" height="20"
|
>
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", '', 903, 1080, 'image-scroll4') }}
|
||||||
width="20"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
We pay a lot of attention choosing the materials we work on: all of the pieces are made in 80% recycled sterling silver.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
We also choose to propose many designs in a mix of sterling silver and silver gilded parts to avoid relying too much on the gold plating process, which can be pollutant.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
The packagings are also carefully selected, produced nearby, made in eco-friendly coton or paper. Our gift bags are even handmade in dead-stock fabrics.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="boite-texte" data-id-ensemble-epingle-boite="6">
|
<div
|
||||||
<button class="boite-texte__bouton-fermeture" type="button">
|
class="storytelling__image" data-caché
|
||||||
<img
|
data-index="5" tabindex="-1"
|
||||||
alt="An icon in form of a cross" height="20"
|
>
|
||||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5') }}
|
||||||
width="20"
|
</div>
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p>
|
<div
|
||||||
We hope that those small objects will move you, as we are moved by the beauty hidden behind a ray of sunshine, a leaf falling from a branch, the smell of an old book, the song of birds before dawn...
|
class="storytelling__image" data-caché
|
||||||
</p>
|
data-index="6" tabindex="-1"
|
||||||
<p>Haiku jewelry are like a bit of poetry to wear everywhere.</p>
|
>
|
||||||
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="storytelling__image" data-caché
|
||||||
|
data-index="7" tabindex="-1"
|
||||||
|
>
|
||||||
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", '', 903, 1080, 'image-scroll7') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="storytelling__image" data-caché
|
||||||
|
data-index="8" tabindex="-1"
|
||||||
|
>
|
||||||
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", '', 903, 1080, 'image-scroll8') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="storytelling__image" data-caché
|
||||||
|
data-index="9" tabindex="-1"
|
||||||
|
>
|
||||||
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", '', 903, 1080, 'image-scroll9') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="storytelling__image" data-caché
|
||||||
|
data-index="10" tabindex="-1"
|
||||||
|
>
|
||||||
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", '', 903, 1080, 'image-scroll10') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="storytelling__image" data-caché
|
||||||
|
data-index="11" tabindex="-1"
|
||||||
|
>
|
||||||
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", '', 903, 1080, 'image-scroll11') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="storytelling__image" data-caché
|
||||||
|
data-index="12" tabindex="-1"
|
||||||
|
>
|
||||||
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", '', 903, 1080, 'image-scroll12') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="storytelling__image" data-caché
|
||||||
|
data-index="13" tabindex="-1"
|
||||||
|
>
|
||||||
|
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", '', 903, 1080, 'image-scroll13') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,174 +2,24 @@
|
||||||
{% import 'macros/images.twig' as images %}
|
{% import 'macros/images.twig' as images %}
|
||||||
|
|
||||||
{% block contenu %}
|
{% block contenu %}
|
||||||
<main id="page-accueil" aria-label="Scroll down to navigate through the pictures">
|
<main id="page-accueil">
|
||||||
<div class="storytelling">
|
<video
|
||||||
<div
|
autoplay disablepictureinpicture
|
||||||
aria-hidden="true" class="storytelling__conteneur"
|
id="intro-video" preload="auto"
|
||||||
inert
|
loop muted
|
||||||
|
width="1280" height="720"
|
||||||
>
|
>
|
||||||
{# Animation #}
|
<source
|
||||||
<div class="storytelling__animation no-js">
|
media="(width >= 500px)" src="{{ site.theme.link }}/assets/video/intro-desktop.m4v"
|
||||||
<svg
|
type="video/mp4"
|
||||||
alt="" class="animation-conteneur"
|
|
||||||
height="90px" preserveAspectRatio="xMidYMin"
|
|
||||||
viewBox="0 0 1200 90" width="100%"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
alt="Scroll down" class="animation-texte"
|
|
||||||
height="100%" width="100%"
|
|
||||||
y="50%"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="m0 0c600-90 600 90 1200 0" fill="transparent"
|
|
||||||
id="curve-1" transform="translate3d(0,0,0)"
|
|
||||||
/>
|
/>
|
||||||
|
<source src="{{ site.theme.link }}/assets/video/intro-phone.m4v" type="video/mp4" />
|
||||||
{# TODO: Créer une fonction pour générer les images #}
|
<source
|
||||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
media="(width >= 500px)" src="{{ site.theme.link }}/assets/video/intro-desktop.webm"
|
||||||
<textPath id="text-path-1" xlink:href="#curve-1">
|
type="video/webm"
|
||||||
Scroll down
|
|
||||||
</textPath>
|
|
||||||
<animate
|
|
||||||
attributeName="startOffset" dur="5s"
|
|
||||||
fill="remove" from="-50%"
|
|
||||||
to="0%" repeatCount="indefinite"
|
|
||||||
xlink:href="#text-path-1"
|
|
||||||
/>
|
/>
|
||||||
</text>
|
<source src="{{ site.theme.link }}/assets/video/intro-phone.webm" type="video/webm" />
|
||||||
|
<p>Your device does not support videos.</p>
|
||||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
</video>
|
||||||
<textPath id="text-path-2" xlink:href="#curve-1">
|
|
||||||
Scroll down
|
|
||||||
</textPath>
|
|
||||||
<animate
|
|
||||||
attributeName="startOffset" dur="5s"
|
|
||||||
fill="remove" from="0%"
|
|
||||||
to="50%" repeatCount="indefinite"
|
|
||||||
xlink:href="#text-path-2"
|
|
||||||
/>
|
|
||||||
</text>
|
|
||||||
|
|
||||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
|
||||||
<textPath id="text-path-3" xlink:href="#curve-1">
|
|
||||||
Scroll down
|
|
||||||
</textPath>
|
|
||||||
<animate
|
|
||||||
attributeName="startOffset" dur="5s"
|
|
||||||
fill="remove" from="50%"
|
|
||||||
to="100%" repeatCount="indefinite"
|
|
||||||
xlink:href="#text-path-3"
|
|
||||||
/>
|
|
||||||
</text>
|
|
||||||
|
|
||||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
|
||||||
<textPath id="text-path-4" xlink:href="#curve-1">
|
|
||||||
Scroll down
|
|
||||||
</textPath>
|
|
||||||
<animate
|
|
||||||
attributeName="startOffset" dur="5s"
|
|
||||||
fill="remove" from="100%"
|
|
||||||
to="150%" repeatCount="indefinite"
|
|
||||||
xlink:href="#text-path-4"
|
|
||||||
/>
|
|
||||||
</text>
|
|
||||||
</svg>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{# Images #}
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-index="1"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", '', 903, 1080, 'image-scroll1') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="2" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", '', 903, 1080, 'image-scroll2') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="3" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", '', 903, 1080, 'image-scroll3') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="4" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", '', 903, 1080, 'image-scroll4') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="5" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="6" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="7" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", '', 903, 1080, 'image-scroll7') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="8" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", '', 903, 1080, 'image-scroll8') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="9" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", '', 903, 1080, 'image-scroll9') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="10" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", '', 903, 1080, 'image-scroll10') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="11" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", '', 903, 1080, 'image-scroll11') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="12" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", '', 903, 1080, 'image-scroll12') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="storytelling__image" data-caché
|
|
||||||
data-index="13" tabindex="-1"
|
|
||||||
>
|
|
||||||
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", '', 903, 1080, 'image-scroll13') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
{% endblock contenu %}
|
{% endblock contenu %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue