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

2024-08-05

Browse source
This commit is contained in:
gcch 2024-08-05 12:42:23 +02:00
commit 68b42420a3
1004 changed files with 367652 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

0
web/app/themes/haiku-atelier-2024/.gitignore vendored Normal file
View file

0
web/app/themes/haiku-atelier-2024/README.md Normal file
View file

322
web/app/themes/haiku-atelier-2024/assets/css/main.css Normal file
View file

@ -0,0 +1,322 @@
@charset "UTF-8";
@font-face {
font-family: Lato;
font-weight: 100;
font-style: normal;
font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 100;
font-style: italic;
font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 300;
font-style: normal;
font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 300;
font-style: italic;
font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 400;
font-style: italic;
font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 700;
font-style: italic;
font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 900;
font-style: normal;
font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 900;
font-style: italic;
font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype");
}
@font-face {
font-family: Myriad;
font-weight: 300 900;
font-style: normal;
font-display: swap;
font-stretch: 70% 110%;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf") format("truetype");
}
@font-face {
font-family: Myriad;
font-weight: 300 900;
font-style: italic;
font-display: swap;
font-stretch: 70% 110%;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf") format("truetype");
}
:root {
/* Couleurs */
--couleur-noir: #000;
--couleur-gris: #eceaeb;
--couleur-jaune: #ebffb8;
--couleur-bordeaux: #490918;
/* Polices */
--police-lato: "Lato", sans-serif;
--police-myriad: "Myriad", sans-serif;
}
/**
* 1. Utilise un meilleur modèle de boîte.
* 2. Rendu des polices pour Safari/iOS
* 3. Rendu plus précis du texte
*/
html {
box-sizing: border-box; /* 1 */
-webkit-font-smoothing: antialiased; /* 2 */
text-size-adjust: none; /* 2 */
text-rendering: geometricprecision;
}
/**
* Réinitialise avec des styles par défaut plus simples.
*
* 1. Hérite du modèle de boîte du document par défaut.
* 2. Pas de marges par défaut.
* 3. Hérite par défaut des styles de texte et de couleur.
*/
*, *::before, *::after {
box-sizing: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 2 */
font: inherit; /* 3 */
color: inherit; /* 3 */
}
/**
* 1. Utilise une couleur d'arrière-plan définie
*/
body {
background: var(--couleur-gris); /* 1 */
}
body {
font: 1rem/1.4 var(--police-lato) 0.5px;
color: var(--couleur-noir);
}
/**
* 1. Désactive la bordure.
* 2. Ajoute un contour, qui sera colorisé au focus.
* 3. Anime le changement de couleur du bordure et du contour.
*/
a {
/* Couleurs */
--lien-contour-couleur-focus: var(--couleur-noir);
text-decoration: none; /* 1 */
outline: 1px solid transparent; /* 2 */
outline-offset: initial; /* 2 */
transition: 0.2s outline-color, 0.2s border-color; /* 3 */
/* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
/**
* Lien ressemblant visuellement à un bouton.
*/
}
a:focus, a:focus-visible {
outline-color: var(--lien-contour-couleur-focus);
}
a.lien-bouton {
/* Marges */
--lien-bouton-marges-internes-bloc: 0.25rem;
/* Couleurs */
--lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
padding: var(--lien-bouton-marges-internes-bloc) 0;
border: 1px solid var(--couleur-noir);
/* Change la couleur de l'arrière-plan pour marquer le focus. */
/* Change la couleur de la bordure pour qu'elle se fonde dans l'arrière-plan, donnant l'illusion que la bordure se déplace vers l'extérieur. */
/* Change la couleur de l'arrière-plan pour marquer le survol. */
}
a.lien-bouton:focus, a.lien-bouton:focus-visible {
background: var(--lien-bouton-arriere-plan-couleur-survol);
}
a.lien-bouton:active {
border-color: var(--lien-bouton-arriere-plan-couleur-survol);
}
@media (hover: hover) {
a.lien-bouton:hover {
background: var(--lien-bouton-arriere-plan-couleur-survol);
}
}
/**
* Réinitialise les styles des listes non ordonnées.
*
* 1. Pas de puce.
*/
ul {
list-style: none; /* 1 */
/**
* Utilise un SVG comme puce de liste via l'emploi d'un arrière-plan.
*
* 1. Ajoute de la marge interne pour que la puce ait de la place.
* 2. Centre verticalement la puce et la dimensionne correctement.
*/
}
ul.avec-puce-cercle {
/* Marges */
--liste-puce-cercle-lien-marges-internes-ligne-debut: 2ch;
/* Dispositions */
--liste-puce-cercle-puce-position-horizontale: 1ch;
/* Tailles */
--liste-puce-cercle-puce-taille: 1.25ex;
}
ul.avec-puce-cercle a {
padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */
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 */
}
#en-tete {
/* Marges */
--en-tete-marges-internes-ligne: 2rem;
--en-tete-marges-internes-bloc: 1rem;
/* Dimensions */
--en-tete-hauteur: 90px;
--en-tete-logo-longueur: 120px;
display: flex;
flex-flow: row nowrap;
place-items: center;
justify-content: space-between;
height: var(--en-tete-hauteur);
padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
background: var(--couleur-gris);
border: 1px solid var(--couleur-noir);
/* TODO: Déplacer au sein d'un Composant ? */
}
#en-tete .logo {
width: var(--en-tete-logo-longueur);
}
#en-tete .menu-navigation {
display: grid;
grid-template-columns: 1fr auto 1fr;
flex: 1;
text-align: center;
text-transform: lowercase;
/**
* Le conteneur d'une entrée du menu, nécessaire pour que le changement de couleur d'arrière-
* plan au survol soit possible.
*
* 1. Passe en bloc en ligne pour pouvoir ajouter des marges internes en bloc.
* 2. Augmente les marges internes pour créer des liens plus imposants.
* 3. Corrige la disposition de la puce, étant donné les marges internes en ligne augmentées.
* 4. Aligne le texte au centre.
*/
}
#en-tete .menu-navigation ul {
display: flex;
grid-column: 2;
flex-flow: row nowrap;
gap: max(2rem, 8vw);
justify-content: space-between;
}
#en-tete .menu-navigation__entree {
/* Couleurs */
--nav-entree-arriere-plan-couleur: var(--couleur-jaune);
/* Marges */
--nav-entree-marges-internes-bloc: 0.33rem;
--nav-entree-marges-internes-ligne: 3rem;
--liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */
/* Dispositions */
--liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
}
#en-tete .menu-navigation__entree a {
display: inline-block; /* 1 */
padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */
text-align: center; /* 4 */
}
@media (hover: hover) {
#en-tete .menu-navigation__entree:hover {
background: var(--nav-entree-arriere-plan-couleur);
}
}
#en-tete .panier {
display: inline-flex;
flex-flow: row nowrap;
place-content: center;
place-items: center;
text-align: center;
}
#en-tete .panier__lien {
min-width: 10ch;
}
#menu-categories-produits ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(21ch, 1fr));
place-items: center;
}
#menu-categories-produits ul li {
width: 100%;
font-style: italic;
color: white;
text-align: center;
text-transform: uppercase;
background: black;
}
#menu-categories-produits ul li a {
display: inline-block;
width: inherit;
padding: 1rem 0;
border-right: 1px solid var(--couleur-gris);
border-left: 1px solid var(--couleur-gris);
outline: initial;
}
#menu-categories-produits ul li a:focus, #menu-categories-produits ul li a:focus-visible {
color: var(--couleur-jaune);
border-right-color: var(--couleur-jaune);
border-left-color: var(--couleur-jaune);
outline: initial;
}
@media (hover: hover) {
#menu-categories-produits ul li a:hover {
color: var(--couleur-jaune);
outline: initial;
}
}
#menu-categories-produits ul li:first-of-type a {
border-left: initial;
}
#menu-categories-produits ul li:last-of-type a {
border-right: initial;
}
/*# sourceMappingURL=main.css.map */

1
web/app/themes/haiku-atelier-2024/assets/css/main.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../src/sass/base/polices/_lato.scss","../../src/sass/base/polices/_myriad.scss","../../src/sass/abstracts/_variables.scss","../../src/sass/base/_base.scss","../../src/sass/base/_typographie.scss","../../src/sass/base/elements/_liens.scss","../../src/sass/base/elements/_listes.scss","../../src/sass/layouts/_en-tete.scss","../../src/sass/layouts/_menu-categories-produits.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AChBJ;AACE;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;ACPF;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;ACjCF;EACE;EACA;;;ACFF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;AAEA;AAKA;AAAA;AAAA;;AAJA;EACE;;AAMF;AACE;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAKA;AAKA;;AATA;EACE;;AAIF;EACE;;AAIF;EACE;IACE;;;;AC7CR;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC5BxE;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AChFJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAUA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;IACE;IACA;;;AAMJ;EACE;;AAKF;EACE","file":"main.css"}

2
web/app/themes/haiku-atelier-2024/assets/css/main.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
web/app/themes/haiku-atelier-2024/assets/css/main.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2 Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf Normal file
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2 Normal file
View file

Binary file not shown.

1
web/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="32.026 31.499 14.793 16.534"><path d="m32.026 31.499 6.858 16.534 7.935-16.534s-3.883 3.968-7.396 3.968c-3.515 0-7.397-3.968-7.397-3.968"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 195 B

1
web/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="34.739 35.077 8.402 7.319"><path d="M39.895 41.075q-1.494.606-2.617.369-1.123-.239-1.597-1.406-.445-1.097.188-2.068.634-.97 2.128-1.576 1.553-.63 2.641-.379 1.088.253 1.556 1.409.44 1.086-.134 2.046-.576.961-2.165 1.605M38.4 37.387q-1.168.474-1.66 1.053-.492.58-.208 1.281.28.69 1.028.773.748.085 1.939-.398 1.18-.479 1.658-1.06.477-.581.198-1.27-.289-.712-1.032-.785-.743-.072-1.923.406"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 446 B

60585
web/app/themes/haiku-atelier-2024/assets/img/logos/logo-full.svg Normal file
View file

File diff suppressed because it is too large Load diff
Side by side

After

Width:  |  Height:  |  Size: 4.4 MiB

1
web/app/themes/haiku-atelier-2024/assets/img/logos/logo-lines.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="66.045 134.829 194 62.056"><path d="M73 195.773c15.5 2.5 165.69 0 175.47 0s9.028-6.834 9.028-6.834 1.959-4.05-31.998-5.666-60.152 2.646-76.576 5.573-65.882-.384-71.424-.601-20 5.028-4.5 7.528m175.495-26c-87.74-1.097-128.746 6.052-159.245 4.25-20.582-1.216-20.922-7.918-21.211-11.084s0-6.406 33.957-8.022 54.865 5.762 77.504 6.606c22.638.846 63.45.664 68.995.784 10.005.216 20.005 7.716 0 7.466M78.75 135.329s121.5-1.806 166.72 1.444c9.754.701 8.53 8 8.53 8s-4.541 6.668-33 6.5c-33.996-.201-52.361-8.656-75-9.5-22.638-.846-67.416 2.225-72.958 2.442s-11.43-8.886 5.708-8.886"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 631 B

60585
web/app/themes/haiku-atelier-2024/assets/img/logos/logo-text.svg Normal file
View file

File diff suppressed because it is too large Load diff
Side by side

After

Width:  |  Height:  |  Size: 4.4 MiB

33
web/app/themes/haiku-atelier-2024/front-page.php Normal file
View file

@ -0,0 +1,33 @@
<?php
/**
* Le modèle de la Page d'Accueil.
*/
declare(strict_types=1);
use Timber\Timber;
/* Récupère les Catégories de Produits */
$categories_produits = get_categories([
"hide_empty" => false,
"orderby" => "menu_order",
"taxonomy" => "product_cat",
]);
$cree_entree_menu = fn ($categorie) => [
"nom" => $categorie->name,
"slug" => $categorie->slug,
];
$entrees_menu_categories = array_map($callback = $cree_entree_menu, $array = $categories_produits);
// echo "<pre>";
// print_r($zzz);
// echo "</pre>";
/* Contexte et modèles */
$contexte = Timber::context();
$contexte["categories_produits"] = $entrees_menu_categories;
$modeles = ["accueil.twig"];
/* Rendu */
Timber::render($filenames = $modeles, $data = $contexte);

32
web/app/themes/haiku-atelier-2024/functions.php Normal file
View file

@ -0,0 +1,32 @@
<?php
declare(strict_types=1);
use HaikuAtelier\StarterSite;
use Timber\Timber;
// Récupère les dépendances Composer
require_once __DIR__ . "../../../../../vendor/autoload.php";
// Récupère la classe initialisant les fonctionnalités du thème
require_once __DIR__ . "/src/StarterSite.php";
// Initialise Timber
Timber::init();
// Sélectionne le répertoire contenant les modèles Twig
Timber::$dirname = ["views"];
// Charge les styles du thème
function charge_styles_haiku_atelier_2024() {
wp_enqueue_style(
$handle = "haiku-atelier-2024-styles",
$src = get_template_directory_uri() . "/assets/css/main.css",
$deps = [],
$ver = filemtime(get_template_directory() . "/assets/css/main.min.css"),
$media = false,
);
}
add_action("wp_enqueue_scripts", "charge_styles_haiku_atelier_2024");
// Initialise les fonctionnalités du thème
new StarterSite();

10
web/app/themes/haiku-atelier-2024/index.php Normal file
View file

@ -0,0 +1,10 @@
<?php
declare(strict_types=1);
use Timber\Timber;
$contexte = Timber::context();
$modeles = ["index.twig"];
Timber::render($filenames = $modeles, $data = $contexte);

65
web/app/themes/haiku-atelier-2024/src/StarterSite.php Normal file
View file

@ -0,0 +1,65 @@
<?php
declare(strict_types=1);
namespace HaikuAtelier;
use Timber\Site;
require_once __DIR__ . "/inc/Fonctionnalites.php";
class StarterSite extends Site {
public function __construct() {
add_action("after_setup_theme", [$this, "definis_fonctionnalites_theme"]);
add_action("after_setup_theme", [$this, "charge_traductions_theme"]);
add_action("timber/context", [$this, "ajoute_au_contexte_twig"]);
add_action("timber/twig/environment/options", [$this, "maj_environnement_twig"]);
parent::__construct();
}
public function ajoute_au_contexte_twig(array $context): array {
$context["site"] = $this;
// Logo personnalisée
$logo_personnalisee_id = get_theme_mod("custom_logo");
$logo_personnalisee = wp_get_attachment_image_src($logo_personnalisee_id, "full");
$context["logo"] = $logo_personnalisee;
// Politique de confidentialité
$politique_confidentialite_lien = esc_url(get_privacy_policy_url());
$context["lien_politique_confidentialite"] = $politique_confidentialite_lien;
return $context;
}
public function definis_fonctionnalites_theme(): void {
// Laisse WordPress gérer le titre de la page
add_theme_support("title-tag");
// Ajoute les Miniatures aux Posts et Pages
add_theme_support("post-thumbnails");
// Utilise des éléments sémantiques HTML5 pour ces éléments générés par WordPress
add_theme_support("html5", ["comment-list", "comment-form", "search-form", "gallery", "caption"]);
// Ajoute la possibilité d'un Logo personnalisé
add_theme_support("custom-logo");
}
/**
* Met à jour l'environnement de Twig.
*
* @param array $options Un tableau avec les options d'environnement.
*
* @return array
*/
public function maj_environnement_twig(array $options): array {
return $options;
}
public function charge_traductions_theme(): void {
load_theme_textdomain("haiku-atelier-2024", get_template_directory() . "/languages");
}
}

39
web/app/themes/haiku-atelier-2024/src/inc/Fonctionnalites.php Normal file
View file

@ -0,0 +1,39 @@
<?php
declare(strict_types=1);
add_action("init", "desactive_wpautop");
add_filter("tiny_mce_before_init", "desactive_transformation_contenu_tinymce");
add_filter("upload_mimes", "autorise_import_svg_mediatheque");
add_action("after_setup_theme", "retire_motifs_blocs_gutemberg");
// Désactive divers transformations du contenu par WordPress
function desactive_wpautop(): void {
remove_filter("the_content", "wpautop");
}
// Désactive divers transformations du contenu par TinyMCE
function desactive_transformation_contenu_tinymce($init): mixed {
// Ne supprime pas les retours à la ligne
$init["remove_linebreaks"] = false;
// Convertis les caractères de retours à la ligne en <br>
$init["convert_newlines_to_brs"] = true;
// Supprime les <br> redondants
$init["remove_redundant_brs"] = false;
// Retourne $init à WordPress
return $init;
}
// Autorise l'import de SVG dans la médiathèque
function autorise_import_svg_mediatheque($file_types) {
$new_filetypes = [];
$new_filetypes["svg"] = "image/svg+xml";
$file_types = array_merge($file_types, $new_filetypes);
return $file_types;
}
function retire_motifs_blocs_gutemberg(): void {
remove_theme_support("core-block-patterns");
}

1
web/app/themes/haiku-atelier-2024/src/main.js Normal file
View file

@ -0,0 +1 @@
import "./sass/main";

13
web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss Normal file
View file

@ -0,0 +1,13 @@
// Variables Sass et CSS
:root {
/* Couleurs */
--couleur-noir: #000;
--couleur-gris: #eceaeb;
--couleur-jaune: #ebffb8;
--couleur-bordeaux: #490918;
/* Polices */
--police-lato: "Lato", sans-serif;
--police-myriad: "Myriad", sans-serif;
}

37
web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss Normal file
View file

@ -0,0 +1,37 @@
// Styles basiques de base.
@use "../abstracts/variables" as variables;
/**
* 1. Utilise un meilleur modèle de boîte.
* 2. Rendu des polices pour Safari/iOS
* 3. Rendu plus précis du texte
*/
html {
box-sizing: border-box; /* 1 */
-webkit-font-smoothing: antialiased; /* 2 */
text-size-adjust: none; /* 2 */
text-rendering: geometricprecision;
}
/**
* Réinitialise avec des styles par défaut plus simples.
*
* 1. Hérite du modèle de boîte du document par défaut.
* 2. Pas de marges par défaut.
* 3. Hérite par défaut des styles de texte et de couleur.
*/
*, *::before, *::after {
box-sizing: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 2 */
font: inherit; /* 3 */
color: inherit; /* 3 */
}
/**
* 1. Utilise une couleur d'arrière-plan définie
*/
body {
background: var(--couleur-gris); /* 1 */
}

4
web/app/themes/haiku-atelier-2024/src/sass/base/_polices.scss Normal file
View file

@ -0,0 +1,4 @@
// Fichier appelant les @font-face des polices web.
@forward "./polices/lato";
@forward "./polices/myriad";

6
web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss Normal file
View file

@ -0,0 +1,6 @@
// Styles typographiques de base
body {
font: 1rem/1.4 var(--police-lato) 0.5px;
color: var(--couleur-noir);
}

3
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_boutons.scss Normal file
View file

@ -0,0 +1,3 @@
// Styles pour les boutons (<button>, <a> avec rôle de boutons)
button {}

52
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_liens.scss Normal file
View file

@ -0,0 +1,52 @@
// Styles de base pour les liens (<a>).
/**
* 1. Désactive la bordure.
* 2. Ajoute un contour, qui sera colorisé au focus.
* 3. Anime le changement de couleur du bordure et du contour.
*/
a {
/* Couleurs */
--lien-contour-couleur-focus: var(--couleur-noir);
text-decoration: none; /* 1 */
outline: 1px solid transparent; /* 2 */
outline-offset: initial; /* 2 */
transition: 0.2s outline-color, 0.2s border-color; /* 3 */
/* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
&:focus, &:focus-visible {
outline-color: var(--lien-contour-couleur-focus);
}
/**
* Lien ressemblant visuellement à un bouton.
*/
&.lien-bouton {
/* Marges */
--lien-bouton-marges-internes-bloc: 0.25rem;
/* Couleurs */
--lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
padding: var(--lien-bouton-marges-internes-bloc) 0;
border: 1px solid var(--couleur-noir);
/* Change la couleur de l'arrière-plan pour marquer le focus. */
&:focus, &:focus-visible {
background: var(--lien-bouton-arriere-plan-couleur-survol);
}
/* Change la couleur de la bordure pour qu'elle se fonde dans l'arrière-plan, donnant l'illusion que la bordure se déplace vers l'extérieur. */
&:active {
border-color: var(--lien-bouton-arriere-plan-couleur-survol);
}
/* Change la couleur de l'arrière-plan pour marquer le survol. */
@media (hover: hover) {
&:hover {
background: var(--lien-bouton-arriere-plan-couleur-survol);
}
}
}
}

34
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_listes.scss Normal file
View file

@ -0,0 +1,34 @@
// Styles de base pour les lists (<ul>, <ol>, <li>)
/**
* Réinitialise les styles des listes non ordonnées.
*
* 1. Pas de puce.
*/
ul {
list-style: none; /* 1 */
/**
* Utilise un SVG comme puce de liste via l'emploi d'un arrière-plan.
*
* 1. Ajoute de la marge interne pour que la puce ait de la place.
* 2. Centre verticalement la puce et la dimensionne correctement.
*/
&.avec-puce-cercle {
/* Marges */
--liste-puce-cercle-lien-marges-internes-ligne-debut: 2ch;
/* Dispositions */
--liste-puce-cercle-puce-position-horizontale: 1ch;
/* Tailles */
--liste-puce-cercle-puce-taille: 1.25ex;
a {
padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */
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 */
}
}
}

99
web/app/themes/haiku-atelier-2024/src/sass/base/polices/_lato.scss Normal file
View file

@ -0,0 +1,99 @@
@font-face {
font-family: Lato;
font-weight: 100;
font-style: normal;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 100;
font-style: italic;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 300;
font-style: normal;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 300;
font-style: italic;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 400;
font-style: normal;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 400;
font-style: italic;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 700;
font-style: normal;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 700;
font-style: italic;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 900;
font-style: normal;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype");
}
@font-face {
font-family: Lato;
font-weight: 900;
font-style: italic;
font-display: swap;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype");
}

21
web/app/themes/haiku-atelier-2024/src/sass/base/polices/_myriad.scss Normal file
View file

@ -0,0 +1,21 @@
@font-face {
font-family: Myriad;
font-weight: 300 900;
font-style: normal;
font-display: swap;
font-stretch: 70% 110%;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf") format("truetype");
}
@font-face {
font-family: Myriad;
font-weight: 300 900;
font-style: italic;
font-display: swap;
font-stretch: 70% 110%;
src:
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf") format("truetype");
}

87
web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss Normal file
View file

@ -0,0 +1,87 @@
// Styles pour le menu du site
#en-tete {
/* Marges */
--en-tete-marges-internes-ligne: 2rem;
--en-tete-marges-internes-bloc: 1rem;
/* Dimensions */
--en-tete-hauteur: 90px;
--en-tete-logo-longueur: 120px;
display: flex;
flex-flow: row nowrap;
place-items: center;
justify-content: space-between;
height: var(--en-tete-hauteur);
padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
background: var(--couleur-gris);
border: 1px solid var(--couleur-noir);
.logo {
width: var(--en-tete-logo-longueur);
}
/* TODO: Déplacer au sein d'un Composant ? */
.menu-navigation {
display: grid;
grid-template-columns: 1fr auto 1fr;
flex: 1;
text-align: center;
text-transform: lowercase;
ul {
display: flex;
grid-column: 2;
flex-flow: row nowrap;
gap: max(2rem, 8vw);
justify-content: space-between;
}
/**
* Le conteneur d'une entrée du menu, nécessaire pour que le changement de couleur d'arrière-
* plan au survol soit possible.
*
* 1. Passe en bloc en ligne pour pouvoir ajouter des marges internes en bloc.
* 2. Augmente les marges internes pour créer des liens plus imposants.
* 3. Corrige la disposition de la puce, étant donné les marges internes en ligne augmentées.
* 4. Aligne le texte au centre.
*/
&__entree {
/* Couleurs */
--nav-entree-arriere-plan-couleur: var(--couleur-jaune);
/* Marges */
--nav-entree-marges-internes-bloc: 0.33rem;
--nav-entree-marges-internes-ligne: 3rem;
--liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */
/* Dispositions */
--liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
a {
display: inline-block; /* 1 */
padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */
text-align: center; /* 4 */
}
@media (hover: hover) {
&:hover {
background: var(--nav-entree-arriere-plan-couleur);
}
}
}
}
.panier {
display: inline-flex;
flex-flow: row nowrap;
place-content: center;
place-items: center;
text-align: center;
&__lien {
min-width: 10ch;
}
}
}

61
web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss Normal file
View file

@ -0,0 +1,61 @@
// Styles pour le menu des Catégories de Produits
#menu-categories-produits {
ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(21ch, 1fr));
place-items: center;
li {
width: 100%;
font-style: italic;
color: white;
text-align: center;
text-transform: uppercase;
background: black;
&:focus-within + li a {
// border-left-color: var(--couleur-jaune);
}
&:has(+ li:focus-within) a {
// border-right-color: var(--couleur-jaune);
}
a {
display: inline-block;
width: inherit;
padding: 1rem 0;
border-right: 1px solid var(--couleur-gris);
border-left: 1px solid var(--couleur-gris);
outline: initial;
&:focus, &:focus-visible {
color: var(--couleur-jaune);
border-right-color: var(--couleur-jaune);
border-left-color: var(--couleur-jaune);
outline: initial;
}
@media (hover: hover) {
&:hover {
color: var(--couleur-jaune);
outline: initial;
}
}
}
&:first-of-type {
a {
border-left: initial;
}
}
&:last-of-type {
a {
border-right: initial;
}
}
}
}
}

16
web/app/themes/haiku-atelier-2024/src/sass/main.scss Normal file
View file

@ -0,0 +1,16 @@
@charset "UTF-8";
// 1. Base
// 1.1 Styles de base
@use "base/polices" as polices;
@use "base/base" as base;
@use "base/typographie" as typographie;
// 1.2 Éléments
@use "base/elements/boutons" as boutons;
@use "base/elements/liens" as liens;
@use "base/elements/listes" as listes;
// 3. Régions
@use "layouts/en-tete" as en-tete;
@use "layouts/menu-categories-produits" as menu-categories-produits;

1
web/app/themes/haiku-atelier-2024/style.css Normal file
View file

@ -0,0 +1 @@

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

@ -0,0 +1,10 @@
{% extends "base.twig" %}
{% block head %}
{% endblock %}
{% block contenu %}
{% endblock %}
{% block pied_de_page %}
{% endblock %}

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

@ -0,0 +1,22 @@
{# <head> #}
{% block conteneur_html_head %}
{% include "parts/html-head.twig" %}
{% block head %}
{% endblock %}
{% endblock %}
<body class="{{ body_class }}" data-langue="{{ langue_courante }}">
{# En-tête #}
{% include "parts/en-tete.twig" %}
{# Menu avec les catégories de produits #}
{% include "parts/menu-categories-produits.twig" %}
{# Contenu #}
{% block contenu %}
{% endblock %}
{# Pied de page #}
{% block pied_de_page %}
{% endblock %}
</body>

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

@ -0,0 +1,33 @@
<header id="en-tete">
<div class="logo">
<figure>
<picture>
<img
alt="Le logo Haiku Atelier"
src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg"
>
</picture>
</figure>
</div>
<nav class="menu-navigation" id="menu-navigation-en-tete">
<ul class="avec-puce-cercle">
<span class="menu-navigation__entree">
<li><a href="#">Home</a></li>
</span>
<span class="menu-navigation__entree">
<li><a href="#">About</a></li>
</span>
<span class="menu-navigation__entree">
<li><a href="#">E-Shop</a></li>
</span>
<span class="menu-navigation__entree">
<li><a href="#">Contact</a></li>
</span>
</ul>
</nav>
<div class="panier">
<a class="panier__lien lien-bouton" href="#" rel="cart">cart (0)</a>
</div>
</header>

27
web/app/themes/haiku-atelier-2024/views/parts/html-head.twig Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<head>
<meta charset="{{ site.charset }}" />
<meta
name="description"
content="{{ site.description }}"
/>
<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
{# <link
href="{{ site.theme.link }}/static/img/favicon.svg"
rel="shortcut icon"
type="image/svg+xml"
/> #}
{{ function("wp_head") }}
</head>

14
web/app/themes/haiku-atelier-2024/views/parts/menu-categories-produits.twig Normal file
View file

@ -0,0 +1,14 @@
<nav id="menu-categories-produits" class="menu-categories-produits">
<ul>
<li>
<a href="/boutique">Tout</a>
</li>
{% for categorie in categories_produits %}
<li id="categorie-{{ categorie.slug|e }}">
<a href="/categorie-produit/{{ categorie.slug|e }}">
{{ categorie.nom|e }}
</a>
</li>
{% endfor %}
</ul>
</nav>