gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

2025-07-04

Browse source
This commit is contained in:
gcch 2025-07-03 20:23:26 +02:00
commit 445593c4b8
16 changed files with 153 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css
View file

@ -46,18 +46,18 @@
}
#page-accueil .storytelling__animation[hidden] {
display: grid !important;
/* visibility: hidden;
opacity: 0; */
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; */
visibility: hidden;
opacity: 0;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
#page-accueil .storytelling__animation .animation-conteneur {
overflow: visible;
inline-size: 120%;
width: 120vw;
block-size: var(--hauteur-animation);
}
#page-accueil .storytelling__animation .animation-texte {

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map
View file

@ -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;AAEA;AAAA;EAEA;;AAIF;AACE;AAAA;EAEA;;AAGF;EACE;EAGA;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;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"}

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css vendored
View file

@ -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]{transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-accueil .storytelling__animation.no-js{transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-accueil .storytelling__animation .animation-conteneur{inline-size:120%;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: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)}}

16
web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss
View file

@ -60,16 +60,15 @@
&[hidden] {
display: grid !important;
/* visibility: hidden;
opacity: 0; */
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; */
visibility: hidden;
opacity: 0;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
@ -77,18 +76,19 @@
overflow: visible;
// Nécessaire pour que les lettres apparaissent « en douceur » dans la vue.
inline-size: 120%;
// 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 et FF ?
// 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 et FF ?
// 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);

5
web/app/themes/haiku-atelier-2024/src/scripts/journalisation.ts
View file

@ -3,6 +3,9 @@ import chalk from "chalk";
import log, { type Logger } from "loglevel";
import prefix from "loglevel-plugin-prefix";
// Récupère les variables d'environnement au sein d'un objet.
const environment = import.meta.env;
const colors = {
DEBUG: chalk.cyan,
ERROR: chalk.red,
@ -26,7 +29,7 @@ configureSync({
loggers: [
{
category: HAIKU_ATELIER_LOGGER,
lowestLevel: "debug",
lowestLevel: environment.VITE_MODE === "production" ? "warning" : "debug",
sinks: ["console"],
},
],

7
web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts
View file

@ -67,7 +67,7 @@ const initDefilementStorytelling = (): void => {
nuLogger.debug`majDimensions | dimensionsImage ${dimensionsImage}`;
// Adapte la longueur du conteneur d'animation à la nouvelle longueur d'une image.
E.CONTENEUR_ANIMATION.style.inlineSize = `${String(dimensionsImage.width)}px`;
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`;
@ -113,11 +113,12 @@ const initGestionAnimation = (): void => {
};
const callback = (entries: Array<IntersectionObserverEntry>) => {
A.forEach(entries, e => {
e.intersectionRatio === 1
e.intersectionRatio >= 0.9
? E.CONTENEUR_ANIMATION.removeAttribute(ATTRIBUT_HIDDEN)
: E.CONTENEUR_ANIMATION.setAttribute(ATTRIBUT_HIDDEN, "");
nuLogger.debug`initGestionAnimation | estCache ${e.intersectionRatio === 1} | ${e}`;
nuLogger.debug`initGestionAnimation | estCache ${e.intersectionRatio >= 0.9} | ${e}`;
console.debug(e);
});
};

25
web/app/themes/haiku-atelier-2024/views/accueil.twig
View file

@ -23,17 +23,23 @@
xmlns="http://www.w3.org/2000/svg"
>
<svg
y="50%"
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">
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-1"
xlink:href="#curve-1"
@ -51,7 +57,10 @@
/>
</text>
<text dominant-baseline="middle">
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-2"
xlink:href="#curve-1"
@ -69,7 +78,10 @@
/>
</text>
<text dominant-baseline="middle">
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-3"
xlink:href="#curve-1"
@ -87,7 +99,10 @@
/>
</text>
<text dominant-baseline="middle">
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-4"
xlink:href="#curve-1"

10
web/app/themes/haiku-atelier-2024/views/base.twig
View file

@ -21,17 +21,21 @@
{# Bouton Revenir en haut #}
<button
aria-hidden
aria-hidden="true"
aria-labelled-by="bouton-retour-haut-label"
class="bouton-retour-haut"
id="bouton-retour-haut"
type="button"
>
<img
alt="An arrow pointing to the top"
aria-hidden="true"
src="{{ site.theme.link }}/assets/img/icons/arrow.svg"
aria-hidden
>
<span class="visuellement-cache">Back to top</span>
<span
class="visuellement-cache"
id="bouton-retour-haut-label"
>Back to top</span>
</button>
{# Pied de page #}

9
web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig
View file

@ -1,7 +1,8 @@
<header id="en-tete">
{# Bouton (dés)activant le menu mobile #}
<section class="logo">
<div class="logo">
<button
aria-label="Button to toggle the mobile navigation menu for small screen sizes"
id="bouton-menu-mobile"
type="button"
>
@ -14,7 +15,7 @@
width="307"
>
</button>
</section>
</div>
{# TODO: Utiliser un Menu WordPress ? #}
<nav
@ -79,7 +80,7 @@
</nav>
{# Bouton « Panier » avec l'indicateur de quantité de Produits #}
<section class="compte-panier">
<div class="compte-panier">
<a
class="lien-bouton"
data-contient-articles="{{ articles_presents }}"
@ -88,7 +89,7 @@
>
cart ({{ quantite_articles }})
</a>
</section>
</div>
{# Menu mobile #}
<div

8
web/app/themes/haiku-atelier-2024/views/parts/pied-de-page.twig
View file

@ -2,7 +2,7 @@
aria-label="Footer offering navigations links"
id="pied-de-page"
>
<section class="zone-menu-navigation-secondaire">
<div class="zone-menu-navigation-secondaire">
<nav
aria-label="Navigation for special pages"
class="menu-navigation"
@ -14,9 +14,9 @@
{# <li><a href="">Shipping & Returns</a></li> #}
</ul>
</nav>
</section>
</div>
<section class="zone-liens-reseaux-sociaux">
<div class="zone-liens-reseaux-sociaux">
<nav
aria-label="Navigation for Haiku Atelier's social links"
class="menu-navigation"
@ -37,5 +37,5 @@
{% endfor %}
</ul>
</nav>
</section>
</div>
</footer>