ref: remplace l'animation de l'Accueil par une vidéo et la déplace dans A propos
This commit is contained in:
parent
7ec0027cce
commit
ca7ebdfbe2
48 changed files with 1231 additions and 1712 deletions
|
|
@ -279,6 +279,50 @@ button.bouton-retour-haut[data-actif] {
|
|||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
dialog::backdrop {
|
||||
background-color: transparent;
|
||||
transition: background-color 0.3s, display 0.3s, overlay 0.3s;
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
dialog:open {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
dialog:open::backdrop {
|
||||
background-color: var(--couleur-fond);
|
||||
}
|
||||
dialog * + * {
|
||||
margin-block-start: var(--espace-m);
|
||||
}
|
||||
dialog p {
|
||||
max-inline-size: 50ch;
|
||||
}
|
||||
dialog 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;
|
||||
}
|
||||
}
|
||||
fieldset {
|
||||
all: initial;
|
||||
display: flex;
|
||||
|
|
@ -502,6 +546,15 @@ ul.avec-puce-cercle a {
|
|||
background: no-repeat var(--liste-puce-cercle-puce-position-horizontale) center/var(--liste-puce-cercle-puce-taille) url("/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg"); /* 2 */
|
||||
}
|
||||
|
||||
video {
|
||||
display: block;
|
||||
inline-size: 100%;
|
||||
min-inline-size: 100%;
|
||||
block-size: 100%;
|
||||
min-block-size: inherit;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* * Styles pour un bandeau défilant. */
|
||||
.bandeau {
|
||||
overflow: hidden;
|
||||
|
|
@ -1437,7 +1490,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
padding: var(--espace-s) var(--espace-m);
|
||||
border-top: 1px solid var(--couleur-noir);
|
||||
font-size: 0.8rem;
|
||||
background: var(--couleur-jaune);
|
||||
}
|
||||
#pied-de-page .zone-menu-navigation-secondaire {
|
||||
justify-self: start;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,158 +1,114 @@
|
|||
@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,115 +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;
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
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));
|
||||
}
|
||||
#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;EACA;;AAQA;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}
|
||||
|
|
@ -1 +1 @@
|
|||
#page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{height:initial;padding:var(--espace-xl)0;margin:auto}
|
||||
#page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{height:initial;padding:var(--espace-xl) 0;margin:auto}
|
||||
|
|
@ -1 +1 @@
|
|||
.page-modele-simple{--page-hauteur-minimale:calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--espace-xl) - 1px);--page-marges-bloc-debut:var(--en-tete-hauteur);margin-top:var(--page-marges-bloc-debut);margin-bottom:var(--espace-xl);border-bottom:1px solid var(--couleur-noir);flex-flow:column;display:flex}.page-modele-simple .contenu{width:min(50rem,100%);min-height:var(--page-hauteur-minimale);border:1px solid var(--couleur-noir);border-bottom:initial;flex-flow:column;place-items:center;margin:auto;font-style:italic;font-weight:400;display:flex}.page-modele-simple .contenu__en-tete{width:100%;padding:var(--espace-m)var(--espace-xl);color:var(--couleur-blanc);background:var(--couleur-noir)}.page-modele-simple .contenu__en-tete h2{text-transform:uppercase;width:fit-content;letter-spacing:var(--espacement-inter-lettres-etendu-l);margin:auto}.page-modele-simple .contenu__textuel{max-width:34rem;height:100%;padding:0 var(--espace-xl);text-wrap:pretty;flex-flow:column;flex:1;place-content:center;display:flex}.page-modele-simple .contenu__textuel p+p{margin-top:var(--espace-m)}.page-modele-simple#page-cgv .contenu{font-style:normal}.page-modele-simple#page-cgv .contenu header{font-style:italic}.page-modele-simple#page-cgv .contenu__textuel{max-width:initial;padding:0}.page-modele-simple#page-cgv .contenu__textuel__section{width:100%}.page-modele-simple#page-cgv .contenu__textuel__section:first-of-type header{border-top:initial}.page-modele-simple#page-cgv .contenu__textuel__section header{width:100%;margin-bottom:var(--espace-l);padding:var(--espace-m)var(--espace-xl);border-top:1px solid var(--couleur-noir);border-bottom:1px solid var(--couleur-noir)}.page-modele-simple#page-cgv .contenu__textuel__section header h3{text-transform:uppercase;width:fit-content;letter-spacing:var(--espacement-inter-lettres-etendu-l);margin:auto}.page-modele-simple#page-cgv .contenu__textuel__section ul{padding:0 var(--espace-xl);margin-bottom:1lh;list-style:inside square}.page-modele-simple#page-cgv .contenu__textuel__section p{padding:0 var(--espace-xl)}.page-modele-simple#page-cgv .contenu__textuel__section p:last-of-type{margin-bottom:var(--espace-xl)}@media (width<=50rem){.page-modele-simple .contenu{border-right:initial;border-left:initial}}
|
||||
.page-modele-simple{--page-hauteur-minimale:calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--espace-xl) - 1px);--page-marges-bloc-debut:var(--en-tete-hauteur);margin-top:var(--page-marges-bloc-debut);margin-bottom:var(--espace-xl);border-bottom:1px solid var(--couleur-noir);flex-flow:column;display:flex}.page-modele-simple .contenu{width:min(50rem,100%);min-height:var(--page-hauteur-minimale);border:1px solid var(--couleur-noir);border-bottom:initial;flex-flow:column;place-items:center;margin:auto;font-style:italic;font-weight:400;display:flex}.page-modele-simple .contenu__en-tete{width:100%;padding:var(--espace-m) var(--espace-xl);color:var(--couleur-blanc);background:var(--couleur-noir)}.page-modele-simple .contenu__en-tete h2{text-transform:uppercase;width:fit-content;letter-spacing:var(--espacement-inter-lettres-etendu-l);margin:auto}.page-modele-simple .contenu__textuel{max-width:34rem;height:100%;padding:0 var(--espace-xl);text-wrap:pretty;flex-flow:column;flex:1;place-content:center;display:flex}.page-modele-simple .contenu__textuel p+p{margin-top:var(--espace-m)}.page-modele-simple#page-cgv .contenu{font-style:normal}.page-modele-simple#page-cgv .contenu header{font-style:italic}.page-modele-simple#page-cgv .contenu__textuel{max-width:initial;padding:0}.page-modele-simple#page-cgv .contenu__textuel__section{width:100%}.page-modele-simple#page-cgv .contenu__textuel__section:first-of-type header{border-top:initial}.page-modele-simple#page-cgv .contenu__textuel__section header{width:100%;margin-bottom:var(--espace-l);padding:var(--espace-m) var(--espace-xl);border-top:1px solid var(--couleur-noir);border-bottom:1px solid var(--couleur-noir)}.page-modele-simple#page-cgv .contenu__textuel__section header h3{text-transform:uppercase;width:fit-content;letter-spacing:var(--espacement-inter-lettres-etendu-l);margin:auto}.page-modele-simple#page-cgv .contenu__textuel__section ul{padding:0 var(--espace-xl);margin-bottom:1lh;list-style:inside square}.page-modele-simple#page-cgv .contenu__textuel__section p{padding:0 var(--espace-xl)}.page-modele-simple#page-cgv .contenu__textuel__section p:last-of-type{margin-bottom:var(--espace-xl)}@media (width<=50rem){.page-modele-simple .contenu{border-right:initial;border-left:initial}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
#page-succes-commande{--page-hauteur-minimale:calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--espace-xl) - 1px);--page-marges-bloc-debut:var(--en-tete-hauteur);margin-top:var(--page-marges-bloc-debut);margin-bottom:var(--espace-xl);border-bottom:1px solid var(--couleur-noir);flex-flow:column;display:flex}#page-succes-commande .contenu{width:min(50rem,100%);min-height:var(--page-hauteur-minimale);border:1px solid var(--couleur-noir);border-bottom:initial;flex-flow:column;place-items:center;margin:auto;font-style:italic;font-weight:500;display:flex}#page-succes-commande .contenu__en-tete{width:100%;padding:var(--espace-m)var(--espace-xl);color:var(--couleur-blanc);background:var(--couleur-noir)}#page-succes-commande .contenu__en-tete h2{text-transform:uppercase;width:fit-content;letter-spacing:var(--espacement-inter-lettres-etendu-l);margin:auto}#page-succes-commande .contenu__textuel{max-width:34rem;height:100%;padding:var(--espace-xl);flex-flow:column;flex:1;place-content:center;font-style:normal;display:flex}#page-succes-commande .contenu__textuel p+p{margin-top:var(--espace-m)}#page-succes-commande .contenu__rappel-commande{border-top:1px solid var(--couleur-noir);flex-flow:column;display:flex}#page-succes-commande .contenu__rappel-commande__produit{border-bottom:1px solid var(--couleur-noir);grid-template-rows:1fr;grid-template-columns:1fr 1fr;display:grid}#page-succes-commande .contenu__rappel-commande__produit:only-child,#page-succes-commande .contenu__rappel-commande__produit:last-of-type{border-bottom:initial}#page-succes-commande .contenu__rappel-commande__produit__illustratif{border-right:1px solid var(--couleur-noir)}#page-succes-commande .contenu__rappel-commande__produit__illustratif picture{overflow:hidden}#page-succes-commande .contenu__rappel-commande__produit__illustratif img{aspect-ratio:1;height:auto}#page-succes-commande .contenu__rappel-commande .detail-produit{width:100%;padding:0 var(--espace-xl);flex-flow:column;place-content:center;font-style:italic;display:flex}#page-succes-commande .contenu__rappel-commande .detail-produit__nom-prix{column-gap:var(--espace-xl);margin-bottom:var(--espace-xs);font-size:var(--espace-l);line-height:var(--hauteur-ligne-moitie);flex-flow:row;justify-content:space-between;display:flex}#page-succes-commande .contenu__rappel-commande .detail-produit__nom-prix span{min-width:4rem;font-weight:600;font-style:initial;text-align:right}#page-succes-commande .contenu__rappel-commande .detail-produit__description{margin-bottom:var(--espace-l);line-height:var(--hauteur-ligne-moitie);text-transform:lowercase}@media (width<=50rem){#page-succes-commande .contenu{border-right:initial;border-left:initial}}
|
||||
#page-succes-commande{--page-hauteur-minimale:calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--espace-xl) - 1px);--page-marges-bloc-debut:var(--en-tete-hauteur);margin-top:var(--page-marges-bloc-debut);margin-bottom:var(--espace-xl);border-bottom:1px solid var(--couleur-noir);flex-flow:column;display:flex}#page-succes-commande .contenu{width:min(50rem,100%);min-height:var(--page-hauteur-minimale);border:1px solid var(--couleur-noir);border-bottom:initial;flex-flow:column;place-items:center;margin:auto;font-style:italic;font-weight:500;display:flex}#page-succes-commande .contenu__en-tete{width:100%;padding:var(--espace-m) var(--espace-xl);color:var(--couleur-blanc);background:var(--couleur-noir)}#page-succes-commande .contenu__en-tete h2{text-transform:uppercase;width:fit-content;letter-spacing:var(--espacement-inter-lettres-etendu-l);margin:auto}#page-succes-commande .contenu__textuel{max-width:34rem;height:100%;padding:var(--espace-xl);flex-flow:column;flex:1;place-content:center;font-style:normal;display:flex}#page-succes-commande .contenu__textuel p+p{margin-top:var(--espace-m)}#page-succes-commande .contenu__rappel-commande{border-top:1px solid var(--couleur-noir);flex-flow:column;display:flex}#page-succes-commande .contenu__rappel-commande__produit{border-bottom:1px solid var(--couleur-noir);grid-template-rows:1fr;grid-template-columns:1fr 1fr;display:grid}#page-succes-commande .contenu__rappel-commande__produit:only-child,#page-succes-commande .contenu__rappel-commande__produit:last-of-type{border-bottom:initial}#page-succes-commande .contenu__rappel-commande__produit__illustratif{border-right:1px solid var(--couleur-noir)}#page-succes-commande .contenu__rappel-commande__produit__illustratif picture{overflow:hidden}#page-succes-commande .contenu__rappel-commande__produit__illustratif img{aspect-ratio:1;height:auto}#page-succes-commande .contenu__rappel-commande .detail-produit{width:100%;padding:0 var(--espace-xl);flex-flow:column;place-content:center;font-style:italic;display:flex}#page-succes-commande .contenu__rappel-commande .detail-produit__nom-prix{column-gap:var(--espace-xl);margin-bottom:var(--espace-xs);font-size:var(--espace-l);line-height:var(--hauteur-ligne-moitie);flex-flow:row;justify-content:space-between;display:flex}#page-succes-commande .contenu__rappel-commande .detail-produit__nom-prix span{min-width:4rem;font-weight:600;font-style:initial;text-align:right}#page-succes-commande .contenu__rappel-commande .detail-produit__description{margin-bottom:var(--espace-l);line-height:var(--hauteur-ligne-moitie);text-transform:lowercase}@media (width<=50rem){#page-succes-commande .contenu{border-right:initial;border-left:initial}}
|
||||
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.
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Le modèle de la Page d'Accueil.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Le modèle de la Page Panier (« Cart »).
|
||||
|
|
|
|||
|
|
@ -110,7 +110,6 @@ function get_discount_amount(WC_Coupon $coupon) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Met à jour les Codes promos
|
||||
$coupons_stripe = collect(Coupon::all()->data);
|
||||
$coupons_wc = collect(WC()->cart->get_coupons())
|
||||
|
|
@ -127,7 +126,10 @@ $coupons_wc = collect(WC()->cart->get_coupons())
|
|||
Coupon::create($item);
|
||||
}
|
||||
});
|
||||
$reductions_stripe = $coupons_wc->map(static fn($coupon): array => ['coupon' => $coupon['name']])->values()->toArray();
|
||||
$reductions_stripe = $coupons_wc
|
||||
->map(static fn($coupon): array => ['coupon' => $coupon['name']])
|
||||
->values()
|
||||
->toArray();
|
||||
|
||||
/** @var Session $session_checkout_stripe */
|
||||
$session_checkout_stripe = \Stripe\Checkout\Session::create([
|
||||
|
|
@ -138,12 +140,14 @@ $session_checkout_stripe = \Stripe\Checkout\Session::create([
|
|||
'mode' => 'payment',
|
||||
'success_url' => $urls['succes_commande'] . '?session_id={CHECKOUT_SESSION_ID}',
|
||||
'metadata' => ['order_id' => $order_id, 'order_key' => $order_key],
|
||||
'shipping_options' => [['shipping_rate_data' => [
|
||||
'display_name' => $methode_livraison['nom'],
|
||||
'fixed_amount' => ['amount' => $methode_livraison['cout'], 'currency' => 'EUR'],
|
||||
'tax_behavior' => 'inclusive',
|
||||
'type' => 'fixed_amount',
|
||||
]]],
|
||||
'shipping_options' => [[
|
||||
'shipping_rate_data' => [
|
||||
'display_name' => $methode_livraison['nom'],
|
||||
'fixed_amount' => ['amount' => $methode_livraison['cout'], 'currency' => 'EUR'],
|
||||
'tax_behavior' => 'inclusive',
|
||||
'type' => 'fixed_amount',
|
||||
],
|
||||
]],
|
||||
], ['idempotency_key' => Uuid::v4()]);
|
||||
// echo json_encode($session_checkout_stripe);
|
||||
header('HTTP/1.1 303 See Other');
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Modèle de la Page Contact.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Le modèle de la Page « Terms & Conditions ».
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Le modèle de la Page d'un Produit.
|
||||
|
|
|
|||
|
|
@ -46,7 +46,9 @@ function enregistre_controle_personnalise_tinymce(): void {
|
|||
<?php if (!empty($this->description)) { ?>
|
||||
<span class="customize-control-description"><?php echo esc_html($this->description); ?></span>
|
||||
<?php } ?>
|
||||
<textarea id="<?php echo esc_attr($this->id); ?>" class="customize-control-tinymce-editor" <?php $this->link(); ?>><?php echo
|
||||
<textarea id="<?php echo
|
||||
esc_attr($this->id)
|
||||
; ?>" class="customize-control-tinymce-editor" <?php $this->link(); ?>><?php echo
|
||||
esc_html($this->value())
|
||||
; ?></textarea>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace HaikuAtelier\Data;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace HaikuAtelier\Data;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace HaikuAtelier\Data;
|
||||
|
||||
|
|
|
|||
|
|
@ -197,9 +197,9 @@ function genere_prix_maximal_produit_variable_dans_reponse_rest(
|
|||
}
|
||||
|
||||
// Assigne le prix de la Variation la plus chère dans la Réponse
|
||||
$reponse->data['prix_maximal'] = collect($reponse->data['variations'])->map(wc_get_product(...))->map(
|
||||
static fn($p) => $p->get_price(),
|
||||
)->max();
|
||||
$reponse->data['prix_maximal'] = collect($reponse->data['variations'])
|
||||
->map(wc_get_product(...))
|
||||
->map(static fn($p) => $p->get_price())->max();
|
||||
|
||||
return $reponse;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Fonctions pour le traitement d'informations.
|
||||
|
|
@ -20,7 +22,7 @@ use WC_Product;
|
|||
*
|
||||
* @return string TODO
|
||||
*/
|
||||
function genere_balise_img_multiformats($id, bool $lazy = false): string {
|
||||
function genere_balise_img_multiformats(string $id, bool $lazy = false): string {
|
||||
$int_id = (int) $id;
|
||||
|
||||
if (-1 === $id) {
|
||||
|
|
@ -49,10 +51,10 @@ function genere_balise_img_multiformats($id, bool $lazy = false): string {
|
|||
'format' => pathinfo((string) $chemin_format)['extension'],
|
||||
'taille' => filesize($chemin_format),
|
||||
'url' => pathinfo($url)['dirname']
|
||||
. '/'
|
||||
. pathinfo($url)['filename']
|
||||
. '.'
|
||||
. pathinfo((string) $chemin_format)['extension'],
|
||||
. '/'
|
||||
. pathinfo($url)['filename']
|
||||
. '.'
|
||||
. pathinfo((string) $chemin_format)['extension'],
|
||||
],
|
||||
),
|
||||
);
|
||||
|
|
@ -72,18 +74,18 @@ function genere_balise_img_multiformats($id, bool $lazy = false): string {
|
|||
$loading = $lazy ? 'lazy' : 'eager';
|
||||
|
||||
return <<<EOD
|
||||
{$sources}
|
||||
{$sources}
|
||||
|
||||
<img
|
||||
alt="{$alt}"
|
||||
decoding="async"
|
||||
height="{$dimensions[0]}"
|
||||
loading="{$loading}"
|
||||
onload="this.style.opacity=1"
|
||||
src="{$url}"
|
||||
width="{$dimensions[1]}"
|
||||
/>
|
||||
EOD;
|
||||
<img
|
||||
alt="{$alt}"
|
||||
decoding="async"
|
||||
height="{$dimensions[0]}"
|
||||
loading="{$loading}"
|
||||
onload="this.style.opacity=1"
|
||||
src="{$url}"
|
||||
width="{$dimensions[1]}"
|
||||
/>
|
||||
EOD;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace HaikuAtelier\WP;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace HaikuAtelier\WP;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php declare(strict_types=1);
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace HaikuAtelier\WP;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
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%)
|
||||
);
|
||||
|
||||
&[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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,88 +1,128 @@
|
|||
/**
|
||||
* Scripts pour les fonctionnalités de la Page À Propos (« About »).
|
||||
*/
|
||||
// Scripts pour la Page d'accueil
|
||||
|
||||
import { A, pipe as beltPipe, O } 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,133 +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 { nuLogger } from "./journalisation.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;
|
||||
|
||||
nuLogger.debug`initStorytellingScroll | dimensionsImages ${dimensionsImage.height}`;
|
||||
|
||||
/**
|
||||
* 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 }),
|
||||
);
|
||||
nuLogger.debug`majDimensions | dimensionsImage ${dimensionsImage}`;
|
||||
|
||||
// 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;
|
||||
nuLogger.debug`majDimensions | nouvelleHauteurMax ${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: null,
|
||||
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, "");
|
||||
|
||||
nuLogger.debug`initGestionAnimation | estCache ${e.intersectionRatio >= 0.9} | ${e}`;
|
||||
});
|
||||
};
|
||||
|
||||
new IntersectionObserver(callback, options).observe(img);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", (): void => {
|
||||
retireClasseGardeFouJs();
|
||||
initDefilementStorytelling();
|
||||
initGestionAnimation();
|
||||
});
|
||||
|
|
@ -3,265 +3,270 @@
|
|||
{% 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", '', dimensions_image[0], dimensions_image[1], '')
|
||||
}}
|
||||
|
||||
{# Épingles #}
|
||||
<button
|
||||
aria-label="First pin"
|
||||
class="epingle"
|
||||
data-id-ensemble-epingle-boite="1"
|
||||
type="button"
|
||||
>
|
||||
<img
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="storytelling__conteneur"
|
||||
inert
|
||||
>
|
||||
{# Animation #}
|
||||
<div class="storytelling__animation no-js">
|
||||
<svg
|
||||
alt=""
|
||||
height="56"
|
||||
role="presentation"
|
||||
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
|
||||
width="82"
|
||||
class="animation-conteneur"
|
||||
height="90px"
|
||||
preserveAspectRatio="xMidYMin"
|
||||
viewBox="0 0 1200 90"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
</button>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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"
|
||||
<svg
|
||||
alt="Scroll down"
|
||||
class="animation-texte"
|
||||
height="100%"
|
||||
width="100%"
|
||||
y="50%"
|
||||
>
|
||||
</button>
|
||||
<path
|
||||
d="m0 0c600-90 600 90 1200 0"
|
||||
fill="transparent"
|
||||
id="curve-1"
|
||||
transform="translate3d(0,0,0)"
|
||||
/>
|
||||
|
||||
<p>
|
||||
Haïkus are short japanese poems written in three lines to capture the beauty of small details in the
|
||||
everyday life.
|
||||
</p>
|
||||
{# 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>
|
||||
|
||||
<p>More than poetry, it’s a philosophy.</p>
|
||||
<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="boite-texte"
|
||||
data-id-ensemble-epingle-boite="2"
|
||||
class="storytelling__image"
|
||||
data-caché
|
||||
data-index="2"
|
||||
tabindex="-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>
|
||||
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.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="3"
|
||||
class="storytelling__image"
|
||||
data-caché
|
||||
data-index="3"
|
||||
tabindex="-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>
|
||||
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>
|
||||
{{
|
||||
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="4"
|
||||
class="storytelling__image"
|
||||
data-caché
|
||||
data-index="4"
|
||||
tabindex="-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>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>
|
||||
{{
|
||||
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="5"
|
||||
class="storytelling__image"
|
||||
data-caché
|
||||
data-index="5"
|
||||
tabindex="-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>
|
||||
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>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5')
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="boite-texte"
|
||||
data-id-ensemble-epingle-boite="6"
|
||||
class="storytelling__image"
|
||||
data-caché
|
||||
data-index="6"
|
||||
tabindex="-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>
|
||||
{{
|
||||
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6')
|
||||
}}
|
||||
</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="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,272 +2,36 @@
|
|||
{% 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
|
||||
<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"
|
||||
>
|
||||
{# 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>
|
||||
<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 %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
|
||||
Loading…
Add table
Add a link
Reference in a new issue