diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css index 0da15c7d..a34772db 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css @@ -1,158 +1,120 @@ +@charset "UTF-8"; #page-a-propos { - --images-longueur-maximale: 1300px; + --hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories); --page-marges-bloc-debut: var(--en-tete-hauteur); - --images-marges-ligne: var(--espace-xl) * 2; + --conteneur-marges-internes-ligne: var(--espace-xl); + overflow: hidden; display: flex; flex-flow: column nowrap; + min-block-size: var(--hauteur-conteneur); + max-block-size: var(--hauteur-conteneur); margin-top: var(--page-marges-bloc-debut); } #page-a-propos .storytelling { - padding: var(--espace-xl) 0; - color: var(--couleur-gris-fonce); + overflow-y: scroll; + overscroll-behavior: none; + min-block-size: inherit; + max-block-size: inherit; } #page-a-propos .storytelling__conteneur { - position: relative; - width: min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne)); - margin: auto; + overscroll-behavior: inherit; + display: flex; + flex-flow: column nowrap; + place-items: center; + min-block-size: calc(var(--hauteur-conteneur) * 13); + padding: 0 var(--conteneur-marges-internes-ligne); } -#page-a-propos .storytelling picture { - position: relative; -} -#page-a-propos .storytelling picture::before { - content: ""; +#page-a-propos .storytelling__animation { + --hauteur-animation: 90px; + --taille-police: calc(var(--espace-xl) * 2.5); + pointer-events: none; position: absolute; + z-index: 3; top: 0; + right: 0; left: 0; - width: 100%; - height: 100%; - background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg"); - background-repeat: space; - background-position: center; - background-size: contain; - filter: opacity(0%); - animation: 1s clignotement infinite alternate both linear; + overflow: hidden; + display: grid; + place-content: center; + place-items: center; + block-size: 100%; + margin: auto; + visibility: visible; + opacity: 1; + mask-image: linear-gradient( + var(--mask-direction, to right), + hsla(0, 0%, 0%, 0), + hsl(0, 0%, 0%) 20%, + hsl(0, 0%, 0%) 80%, + hsla(0, 0%, 0%, 0) + ); + transition: 1s opacity ease-in-out, 1s visibility ease-in-out; } -#page-a-propos .storytelling img { - position: relative; - width: max-content; - height: auto; +#page-a-propos .storytelling__animation[hidden] { + display: grid !important; + visibility: hidden; + opacity: 0; + transition: 1s opacity ease-in-out, 1s visibility ease-in-out; +} +#page-a-propos .storytelling__animation.no-js { + visibility: hidden; + opacity: 0; + transition: 1s opacity ease-in-out, 1s visibility ease-in-out; +} +#page-a-propos .storytelling__animation .animation-conteneur { + overflow: visible; + width: 120vw; + block-size: var(--hauteur-animation); +} +#page-a-propos .storytelling__animation .animation-texte { + overflow: visible; + font-size: var(--taille-police); + font-weight: 600; + text-shadow: 4px 4px 0 var(--couleur-blanc); + text-transform: uppercase; + letter-spacing: var(--espacement-inter-lettres-rapproche-s); +} +#page-a-propos .storytelling__image { + position: sticky; + top: 0; + align-content: center; + inline-size: max-content; + max-inline-size: 100%; + min-block-size: var(--hauteur-conteneur); + max-block-size: var(--hauteur-conteneur); +} +#page-a-propos .storytelling__image[data-caché] { + display: none !important; +} +#page-a-propos .storytelling__image picture { + max-block-size: inherit; +} +#page-a-propos .storytelling__image img { + scale: 0.95; + max-block-size: inherit; + margin: auto; object-fit: contain; background: transparent; } -#page-a-propos .storytelling .epingle { - position: absolute; - right: 46.5%; -} -#page-a-propos .storytelling .epingle img { - pointer-events: none; - display: block; - width: 1.75rem; - /* filter: drop-shadow(1px 1px 3px var(--couleur-gris-fonce)); */ - /* transition: 0.2s filter; */ -} -#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="1"] { - top: 1%; - right: 60%; -} -#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="2"] { - top: 25%; - right: 70%; -} -#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="3"] { - top: 37%; - right: 20%; -} -#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="4"] { - top: 58%; - right: 70%; -} -#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="5"] { - top: 76%; - right: 14%; -} -#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="6"] { - top: 95.5%; - right: 75%; -} -#page-a-propos .storytelling .epingle[data-ensemble-epingle-boite-actif] img { - /* filter: drop-shadow(1px 1px 5px var(--couleur-gris-fonce)); */ -} -#page-a-propos .storytelling .boite-texte { - position: absolute; - top: 0; - right: calc(46.5% - (15rem + var(--espace-l)) / 2); - display: flex; - flex-flow: column nowrap; - padding: var(--espace-l); - border: 1px solid var(--couleur-noir); - font-size: 0.8rem; - font-style: italic; - color: var(--couleur-noir); - visibility: hidden; - opacity: 0; - background: var(--couleur-fond); - transition: 0.2s opacity, 0.2s visibility; -} -#page-a-propos .storytelling .boite-texte button { - position: absolute; - top: 0; - right: calc(-1.5rem - var(--espace-m) - var(--espace-xs)); - align-self: end; - padding: var(--espace-xs); -} -#page-a-propos .storytelling .boite-texte button img { - pointer-events: none; - aspect-ratio: 1; - width: 1.5rem; -} -#page-a-propos .storytelling .boite-texte button:active { - background: var(--couleur-jaune); -} -#page-a-propos .storytelling .boite-texte p { - max-width: 15rem; -} -#page-a-propos .storytelling .boite-texte p + p { - margin-top: var(--espace-m); -} -#page-a-propos .storytelling .boite-texte[data-ensemble-epingle-boite-actif] { - visibility: visible; - opacity: 1; -} -#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="2"] { - --hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2); - top: calc(23% - var(--hauteur-boite) / 2); -} -#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] { - --hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2); - top: calc(35% - var(--hauteur-boite) / 2); -} -#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] button { - left: calc(-1.5rem - var(--espace-m) - var(--espace-xs)); -} -#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="4"] { - --hauteur-boite: calc(8lh + 2rem + var(--espace-l) * 2); - top: calc(58% - var(--hauteur-boite) / 2); -} -#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="5"] { - --hauteur-boite: calc(12lh + 2rem + var(--espace-l) * 2); - top: calc(76% - var(--hauteur-boite) / 2); -} -#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] { - --hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2); - top: calc(95.5% - var(--hauteur-boite) / 2); -} -#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] button { - left: calc(-1.5rem - var(--espace-m) - var(--espace-xs)); +@media (scripting: none) { + #page-a-propos .storytelling__animation { + visibility: hidden; + } } @media (width <= 700px) { #page-a-propos { - --images-marges-ligne: var(--espace-m); + --conteneur-marges-internes-ligne: var(--espace-l); + } +} +@media (width <= 500px) { + #page-a-propos { + --conteneur-marges-internes-ligne: var(--espace-m); } } -@keyframes clignotement { - to { - filter: opacity(30%); +@supports (-moz-appearance: none) { + #page-a-propos .storytelling__animation { + --taille-police: calc(var(--espace-xl) * 2.2); } } diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css.map b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css.map index 52f612ba..6df24b42 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css.map +++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css index 1d91cd98..1711e51e 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.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%)}} \ No newline at end of file +#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)}} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css index 7a8fc7fb..b7846a77 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css @@ -1,121 +1,10 @@ -@charset "UTF-8"; #page-accueil { - --hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories); - --page-marges-bloc-debut: var(--en-tete-hauteur); - --conteneur-marges-internes-ligne: var(--espace-xl); + --hauteur-conteneur: calc(100svh - var(--pied-de-page-hauteur)); overflow: hidden; display: flex; flex-flow: column nowrap; min-block-size: var(--hauteur-conteneur); max-block-size: var(--hauteur-conteneur); - margin-top: var(--page-marges-bloc-debut); -} -#page-accueil .storytelling { - overflow-y: scroll; - overscroll-behavior: none; - min-block-size: inherit; - max-block-size: inherit; -} -#page-accueil .storytelling__conteneur { - overscroll-behavior: inherit; - display: flex; - flex-flow: column nowrap; - place-items: center; - min-block-size: calc(var(--hauteur-conteneur) * 13); - padding: 0 var(--conteneur-marges-internes-ligne); -} -#page-accueil .storytelling__animation { - --hauteur-animation: 90px; - --taille-police: calc(var(--espace-xl) * 2.5); - pointer-events: none; - position: absolute; - z-index: 3; - top: 0; - right: 0; - left: 0; - overflow: hidden; - display: grid; - place-content: center; - place-items: center; - block-size: 100%; - margin: auto; - visibility: visible; - opacity: 1; - mask-image: linear-gradient( - var(--mask-direction, to right), - hsla(0, 0%, 0%, 0), - hsl(0, 0%, 0%) 20%, - hsl(0, 0%, 0%) 80%, - hsla(0, 0%, 0%, 0) - ); - transition: 1s opacity ease-in-out, 1s visibility ease-in-out; -} -#page-accueil .storytelling__animation[hidden] { - display: grid !important; - visibility: hidden; - opacity: 0; - transition: 1s opacity ease-in-out, 1s visibility ease-in-out; -} -#page-accueil .storytelling__animation.no-js { - visibility: hidden; - opacity: 0; - transition: 1s opacity ease-in-out, 1s visibility ease-in-out; -} -#page-accueil .storytelling__animation .animation-conteneur { - overflow: visible; - width: 120vw; - block-size: var(--hauteur-animation); -} -#page-accueil .storytelling__animation .animation-texte { - overflow: visible; - font-size: var(--taille-police); - font-weight: 600; - text-shadow: 4px 4px 0 var(--couleur-blanc); - text-transform: uppercase; - letter-spacing: var(--espacement-inter-lettres-rapproche-s); -} -#page-accueil .storytelling__image { - position: sticky; - top: 0; - align-content: center; - inline-size: max-content; - max-inline-size: 100%; - min-block-size: var(--hauteur-conteneur); - max-block-size: var(--hauteur-conteneur); -} -#page-accueil .storytelling__image[data-caché] { - display: none !important; -} -#page-accueil .storytelling__image picture { - max-block-size: inherit; -} -#page-accueil .storytelling__image img { - scale: 0.95; - max-block-size: inherit; - margin: auto; - object-fit: contain; - background: transparent; -} -@media (scripting: none) { - #page-accueil .storytelling__animation { - visibility: hidden; - } -} -@media (width <= 700px) { - #page-accueil { - --conteneur-marges-internes-ligne: var(--espace-l); - } -} -@media (width <= 500px) { - #page-accueil { - --conteneur-marges-internes-ligne: var(--espace-m); - } -} - -@supports (-moz-appearance: none) { - #page-accueil .storytelling__animation { - --taille-police: calc(var(--espace-xl) * 2.2); - } } /* # sourceMappingURL=page-accueil.css.map */ diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map index 85edc28a..167048b9 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map +++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAOA;;AAEA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;EAIA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-accueil.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;EAEE;EAEA;EACA;EACA;EACA;EACA","file":"page-accueil.css"} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css index a9044d2e..236d4ef2 100755 --- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.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)}} \ No newline at end of file +#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} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.m4v b/web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.m4v new file mode 100644 index 00000000..b0c5fc1b Binary files /dev/null and b/web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.m4v differ diff --git a/web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.webm b/web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.webm new file mode 100644 index 00000000..22dae7e9 Binary files /dev/null and b/web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.webm differ diff --git a/web/app/themes/haiku-atelier-2024/assets/video/intro-phone.m4v b/web/app/themes/haiku-atelier-2024/assets/video/intro-phone.m4v new file mode 100644 index 00000000..e2f6cd5f Binary files /dev/null and b/web/app/themes/haiku-atelier-2024/assets/video/intro-phone.m4v differ diff --git a/web/app/themes/haiku-atelier-2024/assets/video/intro-phone.webm b/web/app/themes/haiku-atelier-2024/assets/video/intro-phone.webm new file mode 100644 index 00000000..377523e1 Binary files /dev/null and b/web/app/themes/haiku-atelier-2024/assets/video/intro-phone.webm differ diff --git a/web/app/themes/haiku-atelier-2024/front-page.php b/web/app/themes/haiku-atelier-2024/front-page.php index 5b890db9..28d297c2 100755 --- a/web/app/themes/haiku-atelier-2024/front-page.php +++ b/web/app/themes/haiku-atelier-2024/front-page.php @@ -21,10 +21,6 @@ add_action('wp_enqueue_scripts', function (): void { handle: 'haiku-atelier-2024-styles-page-accueil', path: '/assets/css/pages/page-accueil.css', ); - Resource::enqueue_script_module_file( - id: 'haiku-atelier-2024-scripts-page-accueil', - path: '/assets/js/scripts-page-accueil.js', - ); }); Timber::render(data: $context, filenames: $templates); diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_dialogs.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_dialogs.scss new file mode 100644 index 00000000..65b1aab8 --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_dialogs.scss @@ -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; + } +} diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_media.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_media.scss new file mode 100644 index 00000000..8cf3917b --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_media.scss @@ -0,0 +1,8 @@ +video { + display: block; + inline-size: 100%; + min-inline-size: 100%; + block-size: 100%; + min-block-size: inherit; + object-fit: cover; +} diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss index 331a8d10..0c2a6c92 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss @@ -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 { diff --git a/web/app/themes/haiku-atelier-2024/src/sass/main.scss b/web/app/themes/haiku-atelier-2024/src/sass/main.scss index 53eb710d..3e693b76 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/main.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/main.scss @@ -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; diff --git a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-a-propos.scss b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-a-propos.scss index e9996045..3d7f592b 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-a-propos.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-a-propos.scss @@ -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); } } diff --git a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss index 5dfdb643..54e3df41 100755 --- a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss @@ -1,146 +1,12 @@ -// Styles pour la Page d'accueil +// Styles pour la Page d'Accueil #page-accueil { // Dimensions - --hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories); - - // Marges - --page-marges-bloc-debut: var(--en-tete-hauteur); - --conteneur-marges-internes-ligne: var(--espace-xl); + --hauteur-conteneur: calc(100svh - var(--pied-de-page-hauteur)); overflow: hidden; display: flex; flex-flow: column nowrap; min-block-size: var(--hauteur-conteneur); max-block-size: var(--hauteur-conteneur); - margin-top: var(--page-marges-bloc-debut); - - .storytelling { - overflow-y: scroll; - overscroll-behavior: none; - min-block-size: inherit; - max-block-size: inherit; - - &__conteneur { - overscroll-behavior: inherit; - display: flex; - flex-flow: column nowrap; - place-items: center; - min-block-size: calc(var(--hauteur-conteneur) * 13); - padding: 0 var(--conteneur-marges-internes-ligne); - } - - // Texte animé indiquant à l'Utilisateur de défiler vers le bas. - &__animation { - --hauteur-animation: 90px; - --taille-police: calc(var(--espace-xl) * 2.5); - - pointer-events: none; - position: absolute; - z-index: 3; - top: 0; - right: 0; - left: 0; - overflow: hidden; - display: grid; - place-content: center; - place-items: center; - block-size: 100%; - margin: auto; - visibility: visible; - opacity: 1; - mask-image: linear-gradient( - var(--mask-direction, to right), - hsl(0deg 0% 0% / 0%), - hsl(0deg 0% 0% / 100%) 20%, - hsl(0deg 0% 0% / 100%) 80%, - hsl(0deg 0% 0% / 0%) - ); - transition: 1s opacity ease-in-out, 1s visibility ease-in-out; - - &[hidden] { - display: grid !important; - visibility: hidden; - opacity: 0; - transition: 1s opacity ease-in-out, 1s visibility ease-in-out; - } - - // N'affiche rien si JavaScript n'est pas activé. - &.no-js { - visibility: hidden; - opacity: 0; - transition: 1s opacity ease-in-out, 1s visibility ease-in-out; - } - - .animation-conteneur { - overflow: visible; - - // Nécessaire pour que les lettres apparaissent « en douceur » dans la vue. - // Safari requiert des `vw` plutôt que des `%`. - width: 120vw; - block-size: var(--hauteur-animation); - } - - .animation-texte { - overflow: visible; - - // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ? - font-size: var(--taille-police); - font-weight: 600; - - // TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ? - text-shadow: 4px 4px 0 var(--couleur-blanc); - text-transform: uppercase; - letter-spacing: var(--espacement-inter-lettres-rapproche-s); - } - } - - &__image { - position: sticky; - top: 0; - align-content: center; - inline-size: max-content; - max-inline-size: 100%; - min-block-size: var(--hauteur-conteneur); - max-block-size: var(--hauteur-conteneur); - - &[data-caché] { - display: none !important; - } - - picture { - max-block-size: inherit; - } - - img { - scale: 0.95; - max-block-size: inherit; - margin: auto; - object-fit: contain; - background: transparent; - } - } - } - - // Désactive l'animation si JavaScript n'est pas disponible. - @media (scripting: none) { - .storytelling__animation { - visibility: hidden; - } - } - - @media (width <= 700px) { - --conteneur-marges-internes-ligne: var(--espace-l); - } - - @media (width <= 500px) { - --conteneur-marges-internes-ligne: var(--espace-m); - } -} - -// TODO: Réduit la taille de la police de l'animation sur FF car elle apparaît plus grande... -@supports (-moz-appearance: none) { - #page-accueil .storytelling__animation { - --taille-police: calc(var(--espace-xl) * 2.2); - } } diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/_scripts-page-a-propos.ts b/web/app/themes/haiku-atelier-2024/src/scripts/_scripts-page-a-propos.ts new file mode 100755 index 00000000..248a4584 --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/scripts/_scripts-page-a-propos.ts @@ -0,0 +1,96 @@ +/** + * Scripts pour les fonctionnalités de la Page À Propos (« About »). + */ + +import { A, O, pipe as beltPipe } from "@mobily/ts-belt"; + +import { + ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF, + ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE, + CLASS_BOUTON_FERMETURE_BOITE_TEXTE, + CLASS_EPINGLE, + DOM_BOITE_TEXTE, + DOM_CONTENEUR_STORYTELLING_A_PROPOS, + DOM_EPINGLE, +} from "./constantes/dom.ts"; +import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts"; + +/** Le Conteneur des images du storytelling. */ +const CONTENEUR_STORYTELLING = mustGetEleInDocument(DOM_CONTENEUR_STORYTELLING_A_PROPOS); +/** */ +const EPINGLES = mustGetElesInDocument(DOM_EPINGLE); +/** */ +const BOITES_TEXTE = mustGetElesInDocument(DOM_BOITE_TEXTE); +/** */ +const ENSEMBLES_EPINGLES_BOITES_TEXTE = new Map(); +A.forEachWithIndex(EPINGLES, (index, epingle) => { + beltPipe( + epingle, + O.flatMap((bouton: HTMLButtonElement) => bouton.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)), + O.tap((id: string) => { + ENSEMBLES_EPINGLES_BOITES_TEXTE.set(id, [epingle, BOITES_TEXTE[index]!]); + }), + ); +}); + +document.addEventListener("DOMContentLoaded", (): void => { + CONTENEUR_STORYTELLING.addEventListener("click", (evenement): void => { + // Délégation d'Évènements au clic sur un + {# TODO: Créer une fonction pour générer les images #} + + + Scroll down + + + - + + + Scroll down + + + - + + + Scroll down + + + - - - - - - - {# Boîtes de texte #} -
- - -

- Haïkus are short japanese poems written in three lines to capture the beauty of small details in the everyday life. -

- -

More than poetry, it’s a philosophy.

+ + + Scroll down + + + + +
-
- - -

- Haiku Atelier creates minimalist and subtil jewelry with an edgy twist, trying to distillate some poetry through those small objects. -

- -

- Handcrafted with care in sustainable materials, each pieces has its uniqueness and is made to last. -

+ {# Images #} +
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", '', 903, 1080, 'image-scroll1') }}
-
- - -

- After learning the art of jewelry making for two years in Paris, Manon Designere launched the brand Haiku, gleaning into the Japanese minimalist aesthetic. -

- -

- Now based in Brussels, she still makes everything by hand, pouring her soul into her work to share her vision of the world. -

+
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", '', 903, 1080, 'image-scroll2') }}
-
- - -

Here you can see some of the tools used at the studio.

-

- From sketches to models, from soldering to polishing, the numerous steps behind each piece are what makes it so unique. -

-

- A touch of animism to value handcrafted objects, restrain mass production and lead toward slow life. -

+
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", '', 903, 1080, 'image-scroll3') }}
-
- - -

- We pay a lot of attention choosing the materials we work on: all of the pieces are made in 80% recycled sterling silver. -

-

- 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. -

-

- 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. -

+
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", '', 903, 1080, 'image-scroll4') }}
-
- +
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5') }} +
-

- 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... -

-

Haiku jewelry are like a bit of poetry to wear everywhere.

+
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6') }} +
+ +
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", '', 903, 1080, 'image-scroll7') }} +
+ +
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", '', 903, 1080, 'image-scroll8') }} +
+ +
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", '', 903, 1080, 'image-scroll9') }} +
+ +
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", '', 903, 1080, 'image-scroll10') }} +
+ +
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", '', 903, 1080, 'image-scroll11') }} +
+ +
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", '', 903, 1080, 'image-scroll12') }} +
+ +
+ {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", '', 903, 1080, 'image-scroll13') }}
diff --git a/web/app/themes/haiku-atelier-2024/views/accueil.twig b/web/app/themes/haiku-atelier-2024/views/accueil.twig index d1091518..a0a2db6c 100755 --- a/web/app/themes/haiku-atelier-2024/views/accueil.twig +++ b/web/app/themes/haiku-atelier-2024/views/accueil.twig @@ -2,174 +2,24 @@ {% import 'macros/images.twig' as images %} {% block contenu %} -
-
- -
+
+
{% endblock contenu %}