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

wip

Browse source
This commit is contained in:
gcch 2026-04-25 10:29:10 +02:00
commit 7fcc90f052
35 changed files with 302 additions and 233 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -90,17 +90,17 @@
}
:root {
/* Couleurs */
--couleur-blanc: #ffffff;
--couleur-blanc-fond: rgb(255 255 255 / 90%);
--couleur-gris: #eceaeb;
--couleur-gris-fonce: #808080;
--couleur-gris-fonce-fond: rgb(128 128 128 / 80%);
--couleur-bordeaux: #490918;
--couleur-bordeaux-fond: rgb(73 9 24 / 80%);
--couleur-jaune: #defdb5;
--couleur-jaune-fond: rgb(235 255 184 / 80%);
--couleur-noir: #202020;
--couleur-fond: rgb(236 234 235 / 80%);
--couleur-blanc: oklch(100% 0 0deg / 100%);
--couleur-blanc-fond: oklch(1 0 0 / 90%);
--couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%);
--couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%);
--couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 50%);
--couleur-gris-fonce: oklch(59.99% 0 0deg / 100%);
--couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%);
--couleur-noir: oklch(24.35% 0 0deg / 100%);
/* Arrières-plan */
--arriere-plan-points: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%)
1px 0.5px/2px 2px;
/* Polices */
--police-lato: "Lato", sans-serif;
/* Hauteurs de ligne */
@ -169,7 +169,7 @@ html {
*/
body {
overscroll-behavior: none;
accent-color: var(--couleur-jaune); /* 2 */
accent-color: var(--couleur-gris-fonce); /* 2 */
background: var(--couleur-gris); /* 1 */
}
@ -184,7 +184,7 @@ button, input, select, textarea {
* Change la couleur d'arrière-plan à la sélection du texte.
*/
*::selection {
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
/* Cache tout élément avec l'attribut hidden */
@ -283,7 +283,7 @@ button:not[disabled]:active {
@media (hover: hover) {
button:not[disabled]:hover {
color: var(--couleur-noir);
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
}
button:disabled, button[disabled] {
@ -302,7 +302,7 @@ button.bouton-case-pleine.bouton-blanc-sur-noir {
}
button.bouton-case-pleine.bouton-blanc-sur-noir:focus-visible {
color: var(--couleur-noir);
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
button.bouton-blanc-sur-noir {
color: var(--couleur-blanc);
@ -323,8 +323,8 @@ button.bouton-retour-haut {
border: 1px solid var(--couleur-noir);
border-radius: 100%;
visibility: hidden;
opacity: 0;
background: var(--couleur-fond);
opacity: 0%;
background: var(--couleur-gris-fond);
box-shadow: initial;
transition: 0.2s background, 0.2s opacity, 0.2s visibility;
}
@ -335,11 +335,11 @@ button.bouton-retour-haut img {
}
button.bouton-retour-haut[data-actif] {
visibility: visible;
opacity: 0.6;
opacity: 60%;
}
@media (hover: hover) {
button.bouton-retour-haut[data-actif]:hover {
opacity: 1;
opacity: 100%;
background: var(--couleur-jaune-fond);
}
}
@ -349,8 +349,8 @@ dialog {
flex-flow: column nowrap;
place-self: center center;
padding: var(--espace-l);
opacity: 0;
background: white;
opacity: 0%;
background: var(--couleur-blanc);
transition: display 0.3s, opacity 0.3s, overlay 0.3s;
transition-behavior: allow-discrete;
}
@ -361,10 +361,10 @@ dialog::backdrop {
}
dialog:open {
display: flex;
opacity: 1;
opacity: 100%;
}
dialog:open::backdrop {
background-color: var(--couleur-fond);
background-color: var(--couleur-gris-fond);
}
dialog * + * {
margin-block-start: var(--espace-m);
@ -380,7 +380,7 @@ dialog button {
@starting-style {
dialog:open {
opacity: 0;
opacity: 0%;
}
}
@starting-style {
@ -399,7 +399,7 @@ fieldset {
input, select, textarea {
padding: var(--espace-xs);
border: 1px solid var(--couleur-noir);
accent-color: var(--couleur-jaune);
accent-color: var(--couleur-gris-fonce);
background: var(--couleur-gris);
transition: 0.2s background;
}
@ -435,7 +435,7 @@ input:is([type="email"], [type="text"], [type="tel"])::selection, textarea::sele
background: var(--couleur-noir);
}
input:is([type="email"], [type="text"], [type="tel"]):user-valid, textarea:user-valid {
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
input:is([type="email"], [type="text"], [type="tel"]):user-invalid, textarea:user-invalid {
background: var(--couleur-gris);
@ -454,7 +454,7 @@ input[type="checkbox"], input[type="radio"] {
transition: 0.2s background;
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
content: "x";
@ -483,7 +483,7 @@ input[type="radio"] + label {
}
@media (hover: hover) {
input[type="checkbox"]:hover, input[type="radio"]:hover {
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
}
@ -524,7 +524,7 @@ img, picture {
img {
object-fit: cover; /* 2 */
background: var(--couleur-jaune); /* 3 */
background: var(--couleur-gris-fonce); /* 3 */
}
/*
@ -560,7 +560,7 @@ a.lien-bouton {
--lien-bouton-marges-internes-bloc: var(--espace-xs);
--lien-bouton-marges-internes-ligne: var(--espace-m);
/* Couleurs */
--lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
--lien-bouton-arriere-plan-couleur-survol: var(--couleur-gris-fonce);
padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);
border: 1px solid var(--couleur-noir);
/* Change la couleur de l'arrière-plan pour marquer le focus. */
@ -589,13 +589,13 @@ a.lien-lien {
text-decoration: underline;
}
a.lien-lien:active {
text-decoration-color: var(--couleur-jaune);
background: var(--couleur-jaune);
text-decoration-color: var(--couleur-gris-fonce);
background: var(--couleur-gris-fonce);
}
@media (hover: hover) {
a.lien-lien:hover {
text-decoration-color: var(--couleur-jaune);
background: var(--couleur-jaune);
text-decoration-color: var(--couleur-gris-fonce);
background: var(--couleur-gris-fonce);
}
}
a {
@ -656,7 +656,7 @@ video {
color: var(--couleur-noir);
text-transform: uppercase;
white-space: nowrap;
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
.bandeau__conteneur {
display: flex;
@ -665,7 +665,7 @@ video {
animation: marquee linear 15s infinite both;
}
.bandeau__conteneur *::selection {
color: var(--couleur-jaune);
color: var(--couleur-gris-fonce);
background: var(--couleur-noir);
}
.bandeau__conteneur p {
@ -721,8 +721,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
z-index: 998;
inset: var(--en-tete-hauteur) 0 0 0;
height: var(--menu-mobile-hauteur);
opacity: 0;
background-color: var(--couleur-fond);
opacity: 0%;
background-color: var(--couleur-gris-fond);
animation: fade-in 400ms both;
}
#menu-mobile .menu-modale__conteneur {
@ -734,7 +734,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
height: fit-content;
padding: var(--espace-xl);
border-bottom: 1px solid var(--couleur-noir);
opacity: 0;
opacity: 0%;
background-color: var(--couleur-gris);
animation: fade-in 400ms 200ms both;
}
@ -761,12 +761,12 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
@keyframes fade-in {
to {
opacity: 1;
opacity: 100%;
}
}
@keyframes fade-out {
to {
opacity: 0;
opacity: 0%;
}
}
@keyframes slide-in {
@ -791,7 +791,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
height: var(--en-tete-hauteur);
padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
border-bottom: 1px solid var(--couleur-noir);
background: var(--couleur-gris);
background: var(--couleur-gris-fond-extra);
backdrop-filter: brightness(125%) blur(6px);
}
#en-tete picture, #en-tete img {
background: transparent;
@ -846,12 +847,12 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
--liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
}
#en-tete .menu-navigation__entree:has(a[aria-current="page"]) {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto
90% no-repeat;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
}
#en-tete .menu-navigation__entree--courante {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto
90% no-repeat;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
}
#en-tete .menu-navigation__entree a {
display: inline-block; /* 1 */
@ -860,8 +861,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
@media (hover: hover) {
#en-tete .menu-navigation__entree:hover {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto
90% no-repeat;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
}
}
@media (width <= 1000px) {
@ -876,6 +877,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
place-items: center;
text-align: center;
}
#en-tete .compte-panier a:hover,
#en-tete .compte-panier a:active,
#en-tete .compte-panier a:focus-within {
background: var(--couleur-gris-fond) !important;
}
#en-tete .compte-panier[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px
0.5px/2px 2px;
@ -890,12 +896,13 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
padding-block: var(--espace-2xs);
padding-inline: var(--espace-s);
text-transform: lowercase;
background: var(--couleur-gris);
}
#en-tete .compte-panier a.lien-compte {
border-color: transparent;
}
#en-tete .compte-panier a[data-contient-articles="true"] {
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
#en-tete .conteneur {
display: flex;
@ -938,10 +945,10 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
}
#menu-categories-produits[data-entrees-presentes-debut] svg:first-of-type {
opacity: 1;
opacity: 100%;
}
#menu-categories-produits[data-entrees-presentes-fin] svg:last-of-type {
opacity: 1;
opacity: 100%;
}
#menu-categories-produits svg {
pointer-events: none;
@ -949,7 +956,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
bottom: calc(17.59px - 0.35rem);
width: 0.8rem;
height: 0.8rem;
opacity: 0;
opacity: 0%;
mix-blend-mode: exclusion;
shape-rendering: geometricprecision;
transition: 0.2s opacity;
@ -997,7 +1004,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
#menu-categories-produits ul li.categorie-courante a {
font-weight: 600;
color: var(--couleur-noir);
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
@media (hover: hover) {
#menu-categories-produits ul li.categorie-courante a:hover {
@ -1019,13 +1026,12 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
outline: initial; /* 3 */
}
#menu-categories-produits ul li a:focus-visible {
color: var(--couleur-jaune);
color: var(--couleur-gris-fonce);
outline: initial; /* 3 */
}
@media (hover: hover) {
#menu-categories-produits ul li a:hover {
color: var(--couleur-noir);
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
}
@media (width <= 1000px) {
@ -1185,7 +1191,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
@media (hover: hover) {
.grille-produits article figure a:hover .produit__illustration__survol {
visibility: visible;
opacity: 1;
opacity: 100%;
transition: 0.3s opacity, 0.3s visibility;
}
}
@ -1208,7 +1214,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
left: 0;
width: 100%;
height: 100%;
opacity: 0;
opacity: 0%;
background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
background-repeat: no-repeat;
background-position: center;
@ -1217,7 +1223,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
animation: 1.5s 0.5s test infinite alternate both linear;
}
.grille-produits article figure .produit__illustration__principale img {
opacity: 0;
opacity: 0%;
transition: opacity 1s;
}
.grille-produits article figure .produit__illustration__survol {
@ -1228,11 +1234,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
opacity: 0%;
transition: 0.15s opacity, 0.15s visibility;
}
.grille-produits article figure .produit__illustration__survol img {
background: var(--couleur-fond);
background: var(--couleur-gris-fond);
}
.grille-produits article figure figcaption {
display: flex;
@ -1270,7 +1276,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
@keyframes test {
to {
opacity: 1;
opacity: 100%;
}
}
/*
@ -1340,7 +1346,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
text-align: center;
letter-spacing: initial;
appearance: none;
background: var(--couleur-fond);
background: var(--couleur-gris-fond);
}
@supports selector(:user-valid) {
.resume-produit .selecteur-produit__attribut-variation select:user-valid {
@ -1348,7 +1354,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
}
.resume-produit .selecteur-produit__attribut-variation option {
background: var(--couleur-fond);
background: var(--couleur-gris-fond);
}
.resume-produit .selecteur-produit__attribut-variation {
/* Conteneur des sélecteurs */
@ -1368,20 +1374,20 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
height: 0.9rem;
text-align: center;
visibility: visible;
opacity: 1;
opacity: 100%;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
transition: opacity 0.2s, visibility 0.2s;
}
@supports not selector(:user-valid) {
.resume-produit .selecteur-produit__attribut-variation__selecteurs:has(select:valid)::after {
visibility: hidden;
opacity: 0;
opacity: 0%;
}
}
@supports selector(:user-valid) {
.resume-produit .selecteur-produit__attribut-variation__selecteurs:has(select:user-valid)::after {
visibility: hidden;
opacity: 0;
opacity: 0%;
}
}
.resume-produit .selecteur-produit__prix {
@ -1464,18 +1470,22 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
--section-marges-internes: var(--espace-l);
overflow: hidden;
border-block: 1px solid var(--couleur-noir);
background: var(--couleur-jaune);
background: var(--arriere-plan-points);
transition: 0.2s background;
}
.details-produit__actions:has(button[disabled]) {
background: var(--couleur-fond);
background: var(--couleur-gris-fond);
}
.details-produit__actions button {
height: initial;
padding: var(--section-marges-internes);
font-style: italic;
text-transform: uppercase;
transition: 0.2s background, 0.2s font-weight;
transition: 0.2s color, 0.2s background, 0.2s font-weight;
}
.details-produit__actions button:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
@media (hover: hover) {
.details-produit__actions button:not([disabled]):hover {
@ -1538,7 +1548,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
article figure a:hover
.produit__illustration__survol {
visibility: visible;
opacity: 1;
opacity: 100%;
transition: 0.3s opacity, 0.3s visibility;
}
}
@ -1553,7 +1563,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
opacity: 0%;
transition: 0.15s opacity, 0.15s visibility;
}
.produits-similaires .grille-produits-similaires article figure img {

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

6
web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css
View file

@ -40,7 +40,7 @@
block-size: 100%;
margin: auto;
visibility: visible;
opacity: 1;
opacity: 100%;
mask-image: linear-gradient(
var(--mask-direction, to right),
hsla(0, 0%, 0%, 0),
@ -53,12 +53,12 @@
#page-a-propos .storytelling__animation[hidden] {
display: grid !important;
visibility: hidden;
opacity: 0;
opacity: 0%;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
#page-a-propos .storytelling__animation.no-js {
visibility: hidden;
opacity: 0;
opacity: 0%;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
#page-a-propos .storytelling__animation .animation-conteneur {

8
web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css
View file

@ -176,7 +176,7 @@
text-align: right;
}
#panneau-panier .panneau__sous-totaux__ligne#sous-total-livraison p:last-of-type span {
color: grey;
color: var(--couleur-gris-fonce);
}
#panneau-panier .panneau__sous-totaux__choix-methode-livraison {
flex-flow: row wrap;
@ -189,7 +189,7 @@
cursor: revert;
flex-basis: 100%;
margin-bottom: var(--espace-xs);
color: grey;
color: var(--couleur-gris-fonce);
text-align: center;
text-transform: lowercase;
}
@ -203,7 +203,7 @@
margin-top: var(--espace-l);
font-size: 0.8rem;
font-weight: 450;
color: grey;
color: var(--couleur-gris-fonce);
letter-spacing: var(--espacement-inter-lettres-etendu-s);
}
#panneau-panier .panneau__pied-de-page {
@ -318,7 +318,7 @@
padding: 0;
font-size: 0.8rem;
font-weight: 450;
color: grey;
color: var(--couleur-gris-fonce);
text-align: center;
}
#panneau-informations-client

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

File diff suppressed because one or more lines are too long

6
web/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg Executable file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.433 9.473 85.134 70.17">
<path
fill="transparent" stroke="oklch(59.99% 0 0deg / 100%)"
stroke-width="2px" d="M84.857 38.272c-2.238-3.079-6.335-4.365-11.182-3.978 6.131-6.94 8.302-14.885 4.751-19.772-4.576-6.298-16.933-5.12-27.595 2.63-2.749 1.998-5.11 4.235-7.031 6.565l-.041-.06c-4.577-6.299-16.937-5.12-27.597 2.632C5.498 34.041.565 45.429 5.143 51.729c2.068 2.845 5.73 4.16 10.101 4.038-5.506 6.701-7.337 14.156-3.945 18.821 4.577 6.3 16.935 5.12 27.596-2.63 2.666-1.939 4.974-4.103 6.866-6.36.147.255.303.504.478.745 4.578 6.301 16.935 5.121 27.596-2.628 10.667-7.755 15.599-19.146 11.022-25.443"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 674 B

2
web/app/themes/haiku-atelier-2024/assets/site.webmanifest
View file

@ -15,6 +15,6 @@
],
"name": "Haiku Atelier",
"short_name": "Haiku Atelier",
"theme_color": "#E7FFB4",
"theme_color": "#ECEAEB",
"start_url": "https://haikuatelier.fr.ddev.site"
}

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

@ -17,6 +17,10 @@ $context = Timber::context();
$templates = ['accueil.twig'];
add_action('wp_enqueue_scripts', function (): void {
Resource::enqueue_script_module_file(
id: 'haiku-atelier-2024-scripts-page-accueil',
path: '/assets/js/scripts-page-accueil.js',
);
Resource::enqueue_style_file(
handle: 'haiku-atelier-2024-styles-page-accueil',
path: '/assets/css/pages/page-accueil.css',

3
web/app/themes/haiku-atelier-2024/single-product.php
View file

@ -82,6 +82,9 @@ $page_states = [
assert(is_string($page_states));
$context['page_states'] = $page_states;
print_r($page_states);
exit;
add_action('wp_enqueue_scripts', function (): void {
Resource::enqueue_script_module_file(
id: 'haiku-atelier-2024-scripts-page-produit',

5
web/app/themes/haiku-atelier-2024/src/inc/Data/Product.php
View file

@ -126,9 +126,10 @@ final readonly class Product {
public static function recupere_et_formate_attributs_produit(mixed $attributs_produit): mixed {
return [
'taille' => ['nom' => 'Size', 'valeur' => $attributs_produit['pa_size'] ?? false],
'pierre' => ['nom' => 'Stone', 'valeur' => $attributs_produit['pa_stone'] ?? false],
'cote' => ['nom' => 'Side', 'valeur' => $attributs_produit['pa_side'] ?? false],
'materiel' => ['nom' => 'Material', 'valeur' => $attributs_produit['pa_material-workshop'] ?? false],
'pierre' => ['nom' => 'Stone', 'valeur' => $attributs_produit['pa_stone'] ?? false],
'taille' => ['nom' => 'Size', 'valeur' => $attributs_produit['pa_size'] ?? false],
];
}
}

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

@ -2,17 +2,18 @@
:root {
/* Couleurs */
--couleur-blanc: #ffffff;
--couleur-blanc-fond: rgb(255 255 255 / 90%);
--couleur-gris: #eceaeb;
--couleur-gris-fonce: #808080;
--couleur-gris-fonce-fond: rgb(128 128 128 / 80%);
--couleur-bordeaux: #490918;
--couleur-bordeaux-fond: rgb(73 9 24 / 80%);
--couleur-jaune: #defdb5;
--couleur-jaune-fond: rgb(235 255 184 / 80%);
--couleur-noir: #202020;
--couleur-fond: rgb(236 234 235 / 80%);
--couleur-blanc: oklch(100% 0 0deg / 100%);
--couleur-blanc-fond: oklch(1 0 0 / 90%);
--couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%);
--couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%);
--couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 50%);
--couleur-gris-fonce: oklch(59.99% 0 0deg / 100%);
--couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%);
--couleur-noir: oklch(24.35% 0 0deg / 100%);
/* Arrières-plan */
--arriere-plan-points: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%)
1px 0.5px/2px 2px;
/* Polices */
--police-lato: "Lato", sans-serif;

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

@ -37,7 +37,7 @@ html {
*/
body {
overscroll-behavior: none;
accent-color: var(--couleur-jaune); /* 2 */
accent-color: var(--couleur-gris-fonce); /* 2 */
background: var(--couleur-gris); /* 1 */
}
@ -52,7 +52,7 @@ button, input, select, textarea {
* Change la couleur d'arrière-plan à la sélection du texte.
*/
*::selection {
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
/* Cache tout élément avec l'attribut hidden */

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

@ -28,7 +28,7 @@ button {
@media (hover: hover) {
&:hover {
color: var(--couleur-noir);
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
}
}
@ -51,7 +51,7 @@ button {
&:focus-visible {
color: var(--couleur-noir);
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
}
}
@ -77,8 +77,8 @@ button {
border: 1px solid var(--couleur-noir);
border-radius: 100%;
visibility: hidden;
opacity: 0;
background: var(--couleur-fond);
opacity: 0%;
background: var(--couleur-gris-fond);
box-shadow: initial;
transition: 0.2s background, 0.2s opacity, 0.2s visibility;
@ -90,11 +90,11 @@ button {
&[data-actif] {
visibility: visible;
opacity: 0.6;
opacity: 60%;
@media (hover: hover) {
&:hover {
opacity: 1;
opacity: 100%;
background: var(--couleur-jaune-fond);
}
}

10
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_dialogs.scss
View file

@ -3,8 +3,8 @@ dialog {
flex-flow: column nowrap;
place-self: center center;
padding: var(--espace-l);
opacity: 0;
background: white;
opacity: 0%;
background: var(--couleur-blanc);
transition: display 0.3s, opacity 0.3s, overlay 0.3s;
transition-behavior: allow-discrete;
@ -16,10 +16,10 @@ dialog {
&:open {
display: flex;
opacity: 1;
opacity: 100%;
&::backdrop {
background-color: var(--couleur-fond);
background-color: var(--couleur-gris-fond);
}
}
@ -40,7 +40,7 @@ dialog {
@starting-style {
dialog:open {
opacity: 0;
opacity: 0%;
}
}

8
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss
View file

@ -11,7 +11,7 @@ fieldset {
input, select, textarea {
padding: var(--espace-xs);
border: 1px solid var(--couleur-noir);
accent-color: var(--couleur-jaune);
accent-color: var(--couleur-gris-fonce);
background: var(--couleur-gris);
transition: 0.2s background;
@ -39,7 +39,7 @@ input:is([type="email"], [type="text"], [type="tel"]), textarea {
}
&:user-valid {
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
&:user-invalid {
@ -65,7 +65,7 @@ input[type="checkbox"], input[type="radio"] {
transition: 0.2s background;
&:checked {
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
// TODO: Utiliser un SVG plutôt qu'un « x » ?
&::before {
@ -96,7 +96,7 @@ input[type="checkbox"], input[type="radio"] {
@media (hover: hover) {
&:hover {
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
}
}

2
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss
View file

@ -12,5 +12,5 @@ img, picture {
img {
object-fit: cover; /* 2 */
background: var(--couleur-jaune); /* 3 */
background: var(--couleur-gris-fonce); /* 3 */
}

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

@ -35,7 +35,7 @@ a {
--lien-bouton-marges-internes-ligne: var(--espace-m);
/* Couleurs */
--lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
--lien-bouton-arriere-plan-couleur-survol: var(--couleur-gris-fonce);
padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);
border: 1px solid var(--couleur-noir);
@ -63,14 +63,14 @@ a {
text-decoration: underline;
&:active {
text-decoration-color: var(--couleur-jaune);
background: var(--couleur-jaune);
text-decoration-color: var(--couleur-gris-fonce);
background: var(--couleur-gris-fonce);
}
@media (hover: hover) {
&:hover {
text-decoration-color: var(--couleur-jaune);
background: var(--couleur-jaune);
text-decoration-color: var(--couleur-gris-fonce);
background: var(--couleur-gris-fonce);
}
}
}

4
web/app/themes/haiku-atelier-2024/src/sass/layouts/_bandeau.scss
View file

@ -10,7 +10,7 @@
color: var(--couleur-noir);
text-transform: uppercase;
white-space: nowrap;
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
&__conteneur {
display: flex;
@ -19,7 +19,7 @@
animation: marquee linear 15s infinite both;
*::selection {
color: var(--couleur-jaune);
color: var(--couleur-gris-fonce);
background: var(--couleur-noir);
}

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

@ -23,7 +23,8 @@
height: var(--en-tete-hauteur);
padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
border-bottom: 1px solid var(--couleur-noir);
background: var(--couleur-gris);
background: var(--couleur-gris-fond-extra);
backdrop-filter: brightness(125%) blur(6px);
picture, img {
background: transparent;
@ -81,14 +82,14 @@
// BASELINE001: Marchera seulement pour les navigateurs > 2023.
&:has(a[aria-current="page"]) {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg")
center/auto 90% no-repeat;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
}
// COMPAT001: Pour les navigateurs < 2023.
&--courante {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg")
center/auto 90% no-repeat;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
}
a {
@ -101,8 +102,8 @@
@media (hover: hover) {
&:hover {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg")
center/auto 90% no-repeat;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
}
}
}
@ -121,6 +122,10 @@
place-items: center;
text-align: center;
a:hover, a:active, a:focus-within {
background: var(--couleur-gris-fond) !important;
}
&[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px
0.5px / 2px 2px;
@ -135,13 +140,14 @@
padding-block: var(--espace-2xs);
padding-inline: var(--espace-s);
text-transform: lowercase;
background: var(--couleur-gris);
&.lien-compte {
border-color: transparent;
}
&[data-contient-articles="true"] {
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
}
}

13
web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss
View file

@ -23,7 +23,6 @@
grid-auto-rows: 1fr;
grid-template-columns:
repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
gap: 1px; /* 2 */
min-height: var(--grille-produits-hauteur-minimale);
@ -43,7 +42,7 @@
&:hover {
.produit__illustration__survol {
visibility: visible;
opacity: 1;
opacity: 100%;
transition: 0.3s opacity, 0.3s visibility;
}
}
@ -70,7 +69,7 @@
left: 0;
width: 100%;
height: 100%;
opacity: 0;
opacity: 0%;
background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
background-repeat: no-repeat;
background-position: center;
@ -80,7 +79,7 @@
}
img {
opacity: 0;
opacity: 0%;
transition: opacity 1s;
}
}
@ -93,11 +92,11 @@
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
opacity: 0%;
transition: 0.15s opacity, 0.15s visibility;
img {
background: var(--couleur-fond);
background: var(--couleur-gris-fond);
}
}
@ -146,6 +145,6 @@
@keyframes test {
to {
opacity: 1;
opacity: 100%;
}
}

21
web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss
View file

@ -79,7 +79,7 @@
text-align: center;
letter-spacing: initial;
appearance: none;
background: var(--couleur-fond);
background: var(--couleur-gris-fond);
@supports selector(:user-valid) {
&:user-valid {
@ -89,7 +89,7 @@
}
option {
background: var(--couleur-fond);
background: var(--couleur-gris-fond);
}
/* Conteneur des sélecteurs */
@ -108,7 +108,7 @@
height: 0.9rem;
text-align: center;
visibility: visible;
opacity: 1;
opacity: 100%;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
transition: opacity 0.2s, visibility 0.2s;
}
@ -117,7 +117,7 @@
&:has(select:valid) {
&::after {
visibility: hidden;
opacity: 0;
opacity: 0%;
}
}
}
@ -126,7 +126,7 @@
&:has(select:user-valid) {
&::after {
visibility: hidden;
opacity: 0;
opacity: 0%;
}
}
}
@ -230,12 +230,12 @@
overflow: hidden;
border-block: 1px solid var(--couleur-noir);
background: var(--couleur-jaune);
background: var(--arriere-plan-points);
transition: 0.2s background;
// Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif
&:has(button[disabled]) {
background: var(--couleur-fond);
background: var(--couleur-gris-fond);
}
button {
@ -243,7 +243,12 @@
padding: var(--section-marges-internes);
font-style: italic;
text-transform: uppercase;
transition: 0.2s background, 0.2s font-weight;
transition: 0.2s color, 0.2s background, 0.2s font-weight;
&:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
// Change la casse de la police au survol quand le Bouton n'est pas désactivé
&:not([disabled]) {

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

@ -21,13 +21,13 @@
&[data-entrees-presentes-debut] {
svg:first-of-type {
opacity: 1;
opacity: 100%;
}
}
&[data-entrees-presentes-fin] {
svg:last-of-type {
opacity: 1;
opacity: 100%;
}
}
@ -37,7 +37,7 @@
bottom: calc(35.18px / 2 - 0.35rem);
width: 0.8rem;
height: 0.8rem;
opacity: 0;
opacity: 0%;
mix-blend-mode: exclusion;
shape-rendering: geometricprecision;
transition: 0.2s opacity;
@ -67,7 +67,6 @@
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
gap: 1px;
place-items: center;
@ -88,7 +87,7 @@
a {
font-weight: 600;
color: var(--couleur-noir);
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
@media (hover: hover) {
&:hover {
@ -111,14 +110,13 @@
outline: initial; /* 3 */
&:focus-visible {
color: var(--couleur-jaune);
color: var(--couleur-gris-fonce);
outline: initial; /* 3 */
}
@media (hover: hover) {
&:hover {
color: var(--couleur-noir);
background: var(--couleur-jaune);
background: var(--couleur-gris-fonce);
}
}
}

10
web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-mobile.scss
View file

@ -37,8 +37,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
z-index: 998;
inset: var(--en-tete-hauteur) 0 0 0;
height: var(--menu-mobile-hauteur);
opacity: 0;
background-color: var(--couleur-fond);
opacity: 0%;
background-color: var(--couleur-gris-fond);
animation: fade-in 400ms both;
}
@ -51,7 +51,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
height: fit-content;
padding: var(--espace-xl);
border-bottom: 1px solid var(--couleur-noir);
opacity: 0;
opacity: 0%;
background-color: var(--couleur-gris);
animation: fade-in 400ms 200ms both;
@ -82,13 +82,13 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
@keyframes fade-in {
to {
opacity: 1;
opacity: 100%;
}
}
@keyframes fade-out {
to {
opacity: 0;
opacity: 0%;
}
}

2
web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-informations-client.scss
View file

@ -79,7 +79,7 @@
padding: 0;
font-size: 0.8rem;
font-weight: 450;
color: grey;
color: var(--couleur-gris-fonce);
text-align: center;
p {

6
web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-panier.scss
View file

@ -193,7 +193,7 @@
text-align: right;
span {
color: grey;
color: var(--couleur-gris-fonce);
}
}
}
@ -210,7 +210,7 @@
cursor: revert;
flex-basis: 100%;
margin-bottom: var(--espace-xs);
color: grey;
color: var(--couleur-gris-fonce);
text-align: center;
text-transform: lowercase;
}
@ -229,7 +229,7 @@
margin-top: var(--espace-l);
font-size: 0.8rem;
font-weight: 450;
color: grey;
color: var(--couleur-gris-fonce);
letter-spacing: var(--espacement-inter-lettres-etendu-s);
}
}

4
web/app/themes/haiku-atelier-2024/src/sass/layouts/_produits-similaires.scss
View file

@ -59,7 +59,7 @@
&:hover {
.produit__illustration__survol {
visibility: visible;
opacity: 1;
opacity: 100%;
transition: 0.3s opacity, 0.3s visibility;
}
}
@ -78,7 +78,7 @@
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
opacity: 0%;
transition: 0.15s opacity, 0.15s visibility;
}

6
web/app/themes/haiku-atelier-2024/src/sass/pages/page-a-propos.scss
View file

@ -48,7 +48,7 @@
block-size: 100%;
margin: auto;
visibility: visible;
opacity: 1;
opacity: 100%;
mask-image: linear-gradient(
var(--mask-direction, to right),
hsl(0deg 0% 0% / 0%),
@ -61,14 +61,14 @@
&[hidden] {
display: grid !important;
visibility: hidden;
opacity: 0;
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;
opacity: 0%;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}

19
web/app/themes/haiku-atelier-2024/src/scripts-effect/lib/api.ts
View file

@ -30,6 +30,20 @@ class APIResponseError extends Schema.TaggedErrorClass<APIResponseError>()("APIR
type APIError = APIRequestError | APIResponseError;
class WooCommerceErrorBody extends Schema.Class<WooCommerceErrorBody>("WooCommerceErrorBody")({
code: Schema.String,
data: Schema.Struct({
status: Schema.Int,
}),
message: Schema.String,
}) {}
class WooCommerceError extends Schema.Class<WooCommerceError>("WooCommerceError")({
body: WooCommerceErrorBody,
status: Schema.Number,
}) {}
type APIResponse<T> = T | WooCommerceError;
/** Client `fetch` contenant les options et en-têtes de Requêtes pré-renseignées. */
const APIFetchClient = FetchHttpClient.layer.pipe(
Layer.provide(
@ -96,7 +110,7 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
});
const AddProductToCart = Effect.fn("AppClient.AddProductToCart")(
function*(nonce: string, productToAdd: CartProduct): Effect.fn.Return<WooCommerceCart, APIError> {
function*(nonce: string, productToAdd: CartProduct): Effect.fn.Return<APIResponse<WooCommerceCart>, APIError> {
const request = pipe(
HttpClientRequest.post(`/wp-json/wc/store/cart/add-item`),
HttpClientRequest.setHeader("Nonce", nonce),
@ -109,6 +123,9 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
Effect.flatMap(HttpClientResponse.schemaBodyJson(WooCommerceCart)),
Effect.mapError(error => matchAPIError(error)),
Effect.tapError(error => printErrorAsSuccinctMessage(error)),
// Effect.catchTag("APIResponseError", error => {
// if (error.cause.)
// }),
);
return response;

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

@ -0,0 +1,9 @@
document.addEventListener("DOMContentLoaded", (): void => {
// TODO: Si la lecture automatique est désactivée, ajouter un bouton de lecture.
console.debug(navigator.getAutoplayPolicy("mediaelement"));
});
/**
* background-color: rgba(236, 234, 235, 0.52)
* backdrop-filter: contrast(50%) blur(3px)
*/

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

@ -5,8 +5,9 @@
<main id="page-accueil">
<video
autoplay disablepictureinpicture
id="intro-video" preload="auto"
loop muted
id="intro-video" loop
muted playsinline
preload="auto" webkit-playsinline
>
<source
media="(width >= 600px)" src="{{ site.theme.link }}/assets/video/intro-desktop.m4v"