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 {
|
||||
--images-longueur-maximale: 1300px;
|
||||
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
||||
--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;
|
||||
flex-flow: column nowrap;
|
||||
min-block-size: var(--hauteur-conteneur);
|
||||
max-block-size: var(--hauteur-conteneur);
|
||||
margin-top: var(--page-marges-bloc-debut);
|
||||
}
|
||||
#page-a-propos .storytelling {
|
||||
padding: var(--espace-xl) 0;
|
||||
color: var(--couleur-gris-fonce);
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: none;
|
||||
min-block-size: inherit;
|
||||
max-block-size: inherit;
|
||||
}
|
||||
#page-a-propos .storytelling__conteneur {
|
||||
position: relative;
|
||||
width: min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne));
|
||||
margin: auto;
|
||||
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-a-propos .storytelling picture {
|
||||
position: relative;
|
||||
}
|
||||
#page-a-propos .storytelling picture::before {
|
||||
content: "";
|
||||
#page-a-propos .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;
|
||||
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;
|
||||
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-a-propos .storytelling img {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
height: auto;
|
||||
#page-a-propos .storytelling__animation[hidden] {
|
||||
display: grid !important;
|
||||
visibility: hidden;
|
||||
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;
|
||||
background: transparent;
|
||||
}
|
||||
#page-a-propos .storytelling .epingle {
|
||||
position: absolute;
|
||||
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;
|
||||
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 (scripting: none) {
|
||||
#page-a-propos .storytelling__animation {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@media (width <= 700px) {
|
||||
#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 {
|
||||
to {
|
||||
filter: opacity(30%);
|
||||
@supports (-moz-appearance: none) {
|
||||
#page-a-propos .storytelling__animation {
|
||||
--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 {
|
||||
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
||||
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
||||
--conteneur-marges-internes-ligne: var(--espace-xl);
|
||||
--hauteur-conteneur: calc(100svh - var(--pied-de-page-hauteur));
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-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 */
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
border-top: 1px solid var(--couleur-noir);
|
||||
font-size: 0.8rem;
|
||||
background: var(--couleur-jaune);
|
||||
|
||||
// Liens vers les pages du site
|
||||
.zone-menu-navigation-secondaire {
|
||||
|
|
|
|||
|
|
@ -8,10 +8,12 @@
|
|||
|
||||
// 1.2 Éléments
|
||||
@use "base/elements/boutons" as boutons;
|
||||
@use "base/elements/dialogs" as dialogs;
|
||||
@use "base/elements/formulaires" as formulaires;
|
||||
@use "base/elements/images" as images;
|
||||
@use "base/elements/liens" as liens;
|
||||
@use "base/elements/listes" as listes;
|
||||
@use "base/elements/media" as media;
|
||||
|
||||
// 3. Régions
|
||||
@use "layouts/bandeau" as bandeau;
|
||||
|
|
|
|||
|
|
@ -1,201 +1,146 @@
|
|||
// Styles pour la Page À Propos (« About »).
|
||||
// Styles pour la Page « A propos »
|
||||
|
||||
#page-a-propos {
|
||||
// Dimensions
|
||||
--images-longueur-maximale: 1300px;
|
||||
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
||||
|
||||
// Marges
|
||||
--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;
|
||||
flex-flow: column nowrap;
|
||||
min-block-size: var(--hauteur-conteneur);
|
||||
max-block-size: var(--hauteur-conteneur);
|
||||
margin-top: var(--page-marges-bloc-debut);
|
||||
|
||||
.storytelling {
|
||||
padding: var(--espace-xl) 0;
|
||||
color: var(--couleur-gris-fonce);
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: none;
|
||||
min-block-size: inherit;
|
||||
max-block-size: inherit;
|
||||
|
||||
&__conteneur {
|
||||
position: relative;
|
||||
width: min(var(--images-longueur-maximale), calc(100% - var(--images-marges-ligne)));
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
picture {
|
||||
position: relative;
|
||||
|
||||
// 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 {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
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 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(46.5% - (15rem + var(--espace-l)) / 2);
|
||||
overscroll-behavior: inherit;
|
||||
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);
|
||||
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;
|
||||
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) {
|
||||
--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 {
|
||||
to {
|
||||
filter: opacity(30%);
|
||||
// TODO: Réduit la taille de la police de l'animation sur FF car elle apparaît plus grande...
|
||||
@supports (-moz-appearance: none) {
|
||||
#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 {
|
||||
// Dimensions
|
||||
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
||||
|
||||
// Marges
|
||||
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
||||
--conteneur-marges-internes-ligne: var(--espace-xl);
|
||||
--hauteur-conteneur: calc(100svh - var(--pied-de-page-hauteur));
|
||||
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-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 les fonctionnalités de la Page À Propos (« About »).
|
||||
*/
|
||||
// Scripts pour la Page d'accueil
|
||||
|
||||
import { A, O, pipe as beltPipe } from "@mobily/ts-belt";
|
||||
import { A, O, pipe } 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,
|
||||
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";
|
||||
|
||||
/** 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]!]);
|
||||
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 => {
|
||||
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))),
|
||||
);
|
||||
}),
|
||||
);
|
||||
});
|
||||
retireClasseGardeFouJs();
|
||||
initDefilementStorytelling();
|
||||
initGestionAnimation();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
{% 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__conteneur">
|
||||
{{ 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') }}
|
||||
<div
|
||||
aria-hidden="true" class="storytelling__conteneur"
|
||||
inert
|
||||
>
|
||||
{# Animation #}
|
||||
<div class="storytelling__animation no-js">
|
||||
<svg
|
||||
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)"
|
||||
/>
|
||||
|
||||
{# Épingles #}
|
||||
<button
|
||||
aria-label="First pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="1" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
{# TODO: Créer une fonction pour générer les images #}
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<textPath id="text-path-1" xlink:href="#curve-1">
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset" dur="5s"
|
||||
fill="remove" from="-50%"
|
||||
to="0%" repeatCount="indefinite"
|
||||
xlink:href="#text-path-1"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<button
|
||||
aria-label="Second pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="2" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<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>
|
||||
|
||||
<button
|
||||
aria-label="Third pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="3" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<button
|
||||
aria-label="Fourth pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="4" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
aria-label="Fifth pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="5" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
aria-label="Sixth pin" class="epingle"
|
||||
data-id-ensemble-epingle-boite="6" type="button"
|
||||
>
|
||||
<img
|
||||
alt="" height="56"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
/>
|
||||
</button>
|
||||
|
||||
{# Boîtes de texte #}
|
||||
<div class="boite-texte" data-id-ensemble-epingle-boite="1">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
width="20"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p>
|
||||
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>
|
||||
<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>
|
||||
|
||||
<div class="boite-texte" data-id-ensemble-epingle-boite="2">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
width="20"
|
||||
/>
|
||||
</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>
|
||||
{# 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="boite-texte" data-id-ensemble-epingle-boite="3">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
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
|
||||
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="boite-texte" data-id-ensemble-epingle-boite="4">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
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
|
||||
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="boite-texte" data-id-ensemble-epingle-boite="5">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
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
|
||||
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="boite-texte" data-id-ensemble-epingle-boite="6">
|
||||
<button class="boite-texte__bouton-fermeture" type="button">
|
||||
<img
|
||||
alt="An icon in form of a cross" height="20"
|
||||
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
|
||||
width="20"
|
||||
/>
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<p>
|
||||
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...
|
||||
</p>
|
||||
<p>Haiku jewelry are like a bit of poetry to wear everywhere.</p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -2,174 +2,24 @@
|
|||
{% import 'macros/images.twig' as images %}
|
||||
|
||||
{% block contenu %}
|
||||
<main id="page-accueil" aria-label="Scroll down to navigate through the pictures">
|
||||
<div class="storytelling">
|
||||
<div
|
||||
aria-hidden="true" class="storytelling__conteneur"
|
||||
inert
|
||||
>
|
||||
{# Animation #}
|
||||
<div class="storytelling__animation no-js">
|
||||
<svg
|
||||
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)"
|
||||
/>
|
||||
|
||||
{# TODO: Créer une fonction pour générer les images #}
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<textPath id="text-path-1" xlink:href="#curve-1">
|
||||
Scroll down
|
||||
</textPath>
|
||||
<animate
|
||||
attributeName="startOffset" dur="5s"
|
||||
fill="remove" from="-50%"
|
||||
to="0%" repeatCount="indefinite"
|
||||
xlink:href="#text-path-1"
|
||||
/>
|
||||
</text>
|
||||
|
||||
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
|
||||
<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 id="page-accueil">
|
||||
<video
|
||||
autoplay disablepictureinpicture
|
||||
id="intro-video" preload="auto"
|
||||
loop muted
|
||||
width="1280" height="720"
|
||||
>
|
||||
<source
|
||||
media="(width >= 500px)" src="{{ site.theme.link }}/assets/video/intro-desktop.m4v"
|
||||
type="video/mp4"
|
||||
/>
|
||||
<source src="{{ site.theme.link }}/assets/video/intro-phone.m4v" type="video/mp4" />
|
||||
<source
|
||||
media="(width >= 500px)" src="{{ site.theme.link }}/assets/video/intro-desktop.webm"
|
||||
type="video/webm"
|
||||
/>
|
||||
<source src="{{ site.theme.link }}/assets/video/intro-phone.webm" type="video/webm" />
|
||||
<p>Your device does not support videos.</p>
|
||||
</video>
|
||||
</main>
|
||||
{% endblock contenu %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue