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

fonc(produit) créé le design adaptatif

Browse source 
- créé le design adaptatif du menu des catégories de Produits ;
- créé le design adaptatif de la grille de Produits ;
This commit is contained in:
gcch 2024-10-24 21:46:59 +02:00
commit 3521050b20
23 changed files with 356 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -46,6 +46,7 @@
--hauteur-ligne-classique: 1.5;
--hauteur-ligne-rapprochee: 1;
/* Espacements entre les lettres */
--espacement-inter-lettres-rapproche-s: -0.5px;
--espacement-inter-lettres-etendu-s: 0.5px;
--espacement-inter-lettres-etendu-m: 1px;
--espacement-inter-lettres-etendu-l: 1.5px;
@ -62,14 +63,14 @@
--espace-xl: 2rem;
}
/* *
/*
* 1. Utilise un meilleur modèle de boîte.
*/
html {
box-sizing: border-box; /* 1 */
}
/* *
/*
* Réinitialise avec des styles par défaut plus simples.
*
* 1. Hérite du modèle de boîte du document par défaut.
@ -84,7 +85,7 @@ html {
color: inherit; /* 3 */
}
/* *
/*
* 1. Utilise une couleur d'arrière-plan définie.
* 2. Utilise la couleur primaire du site.
*/
@ -93,14 +94,14 @@ body {
background: var(--couleur-gris); /* 1 */
}
/* *
/*
* 1. Force l'héritage des styles pour ces éléments.
*/
button, input, select, textarea {
font: inherit; /* 1 */
}
/* *
/*
* Change la couleur d'arrière-plan à la sélection du texte.
*/
*::selection {
@ -117,7 +118,7 @@ button, input, select, textarea {
cursor: not-allowed;
}
/* *
/*
* Désactive les animations pour les Utilisateurs n'en souhaitant pas.
*/
@media (prefers-reduced-motion) {
@ -127,7 +128,7 @@ button, input, select, textarea {
animation-duration: 0s !important;
}
}
/* *
/*
* 2. Rendu spécifique du texte pour Safari/iOS.
* 3. Rendu plus précis du texte.
*/
@ -156,7 +157,7 @@ em {
}
/* Mixins Sass */
/* *
/*
* Réinitialisation des styles des <button>.
*/
button {
@ -219,7 +220,7 @@ input[type=checkbox], input[type=radio] {
appearance: none;
border: 1px solid var(--couleur-noir);
transition: 0.2s background;
/* *
/*
* 1. Pour un alignement parfait du label avec la case à cocher.
*/
}
@ -237,7 +238,7 @@ label:has(~ input[type=checkbox], ~ input[type=radio]), input[type=checkbox] + l
font-size: 0.9rem;
}
/* *
/*
* 1. Facilite l'usages des images.
* 2. Affiche les images dans l'intégralité de leur conteneur, en contrepartie d'un recoupage.
* 3. Arrière-plan jaune en attendant le chargement de l'image.
@ -317,14 +318,14 @@ a.lien-lien:active {
}
}
/* *
/*
* 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.
@ -463,7 +464,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
flex: 1;
text-align: center;
text-transform: lowercase;
/* *
/*
* Le conteneur d'une entrée du menu, nécessaire pour que le changement d'arrière-plan au
* survol soit possible.
*
@ -512,7 +513,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
gap: 1rem;
place-items: center;
text-align: center;
/* *
/*
* 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.
*/
}
@ -527,7 +528,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
background: var(--couleur-jaune);
}
/* *
/*
* Le menu avec les Catégories de Produits pour une navigation rapide.
*
* 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher
@ -540,9 +541,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
/* Marges */
--menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
--menu-entree-marges-internes-ligne: var(--espace-m);
height: var(--menu-section-hauteur);
margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
/* *
/*
* Liste des Catégories de Produits.
*
* 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur
@ -553,8 +553,9 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
#menu-categories-produits ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
gap: 1px;
place-items: center;
/* *
/*
* 1. Force chaque entrée à occuper tout l'espace alloué par grid.
*/
}
@ -565,9 +566,9 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
color: var(--couleur-gris);
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
background: var(--couleur-noir);
/* *
/*
* 1. Permet de créer des marges verticales.
* 2. Hérite de la longueur du conteneur.
* 3. Surchargement de styles pour les liens.
@ -583,8 +584,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
display: inline-block; /* 1 */
width: inherit; /* 2 */
padding: var(--menu-entree-marges-internes-ligne) 0;
border-right: 1px solid var(--couleur-gris);
border-left: 1px solid var(--couleur-gris);
outline: initial; /* 3 */
}
#menu-categories-produits ul li a:focus, #menu-categories-produits ul li a:focus-visible {
@ -597,14 +596,24 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
outline: initial; /* 3 */
}
}
#menu-categories-produits ul li:first-of-type a {
border-left: initial;
}
#menu-categories-produits ul li:last-of-type a {
border-right: initial;
@media (width <= 900px) {
#menu-categories-produits ul {
--menu-entree-marges-internes-ligne: var(--espace-s);
display: flex;
flex-flow: row wrap;
font-size: 0.9rem;
}
#menu-categories-produits ul li {
flex-grow: 1;
width: min(140px, 100%);
}
#menu-categories-produits ul li a {
width: 100%;
border: initial;
}
}
/* *
/*
* Les photos du Produit, étalées sur 2 colonnes : une pour la photo Produit, une pour les photos
* portées.
*
@ -619,6 +628,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
--colonne-droite-photo-hauteur-minimale: calc(
100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur)
);
--colonne-photo-longueur-minimale: 30rem;
/* Marges */
--section-marges-externes-bloc-fin: 1rem;
display: flex;
@ -629,7 +639,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
position: relative;
display: flex;
flex-flow: column nowrap;
width: 50%;
flex-grow: 1;
width: min(var(--colonne-photo-longueur-minimale), 100%);
}
.photos-produit > section.colonne-gauche {
position: sticky;
@ -644,7 +655,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
max-height: var(--colonne-droite-photo-hauteur-minimale);
}
/* *
/*
* La Grille des Produits sous forme de Cartes.
*
* Les Cartes ont une taille minimale et occupent l'espace en ligne disponible jusqu'à l'occuper
@ -657,9 +668,15 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
* collapse »).
*/
.grille-produits {
/* Dimensions */
--aucun-produit-hauteur: calc(
100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur)
- var(--pied-de-page-hauteur)
);
--carte-produit-longueur-minimale: 448px;
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1 */
grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
gap: 1px; /* 2 */
}
.grille-produits article {
@ -668,8 +685,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
.grille-produits article figure {
display: flex;
flex-flow: column nowrap;
row-gap: 2rem;
padding: 1rem;
row-gap: var(--espace-xl);
padding: var(--espace-m);
}
.grille-produits article figure a {
position: relative;
@ -705,28 +722,36 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin-bottom: 2rem;
margin-bottom: var(--espace-xl);
}
.grille-produits article figure figcaption h3 {
font-style: italic;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
.grille-produits article figure figcaption p {
font-weight: 500;
letter-spacing: -0.5px;
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
}
.grille-produits__aucun-produit {
grid-column: span 3;
align-content: center;
min-height: calc(100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));
min-height: var(--aucun-produit-hauteur);
text-align: center;
}
.grille-produits__aucun-produit p + p {
margin-top: var(--espace-l);
font-size: 1.25rem;
}
@media (width <= 700px) {
.grille-produits {
grid-template-columns: 100%;
}
.grille-produits article figure img {
max-height: 50svh;
}
}
/* *
/*
* Boîte flottante avec les informations Produit, le sélecteur de variation et de quantité pour le
* Panier.
*
@ -734,7 +759,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
* 2. Conteneur existant pour que le flottement sticky fonctionne ; n'a pas de dimensions.
*/
.informations-produit {
/* Variables */
--boite-couleur-fond: rgb(255 255 255 / 90%);
--boite-position-basse: 1rem;
--boite-longueur: 70ch;
@ -753,7 +777,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
width: var(--boite-longueur);
max-width: var(--boite-longueur);
border: 1px solid var(--couleur-noir);
/* *
/*
* Définis les apparence et comportement de toutes les sections de la boîte.
*/
}
@ -793,7 +817,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
grid-template-columns: repeat(3, minmax(0, 1fr));
text-align: center;
text-transform: lowercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
.informations-produit .onglets-details-produit > ul li {
width: 100%;
@ -845,8 +869,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
text-transform: lowercase;
/* Texte du sélecteur */
/* Conteneur des sélecteurs */
/* Sélecteur natif */
/* Sélecteur personnalisé */
}
.informations-produit .selecteur-produit__selection-variation label {
height: 100%;
@ -886,7 +908,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
.informations-produit .selecteur-produit__selection-variation select {
position: relative;
min-width: 4rem;
padding: 0.5rem var(--espace-xl);
padding: var(--espace-s) var(--espace-xl);
text-align: center;
appearance: none;
background: rgba(236, 234, 235, 0.9);
@ -916,7 +938,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
font-variation-settings: "wght" 400;
font-style: italic;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
transition: 0.2s font-variation-settings;
/* Change la casse de la police au survol quand le Bouton n'est pas désactivé */
}
@ -925,6 +947,21 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
font-variation-settings: "wght" 500;
}
}
@media (width <= 700px) {
.informations-produit {
position: relative;
bottom: initial;
width: initial;
height: initial;
}
.informations-produit__conteneur {
transform: initial;
width: initial;
max-width: initial;
border-right: initial;
border-left: initial;
}
}
@media (hover: hover) {
.selecteur-personnalise {
@ -935,6 +972,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
}
}
.produits-similaires {
/* Dimensions */
--carte-produit-longueur-minimale: 448px;
display: grid;
grid-template-areas: "en-tete en-tete en-tete" "produits produits produits";
grid-template-columns: repeat(3, 1fr);
@ -947,25 +986,26 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
grid-area: en-tete;
width: 100%;
padding: var(--espace-l) 0 var(--espace-m);
color: var(--couleur-blanc);
text-align: center;
border: 1px solid var(--couleur-noir);
background: var(--couleur-noir);
}
.produits-similaires header h2 {
font-style: italic;
line-height: var(--hauteur-ligne-rapprochee);
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
.produits-similaires .grille-produits-similaires {
display: grid;
grid-area: produits;
grid-auto-rows: 1fr;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr));
gap: 1px;
width: 100%;
}
.produits-similaires .grille-produits-similaires article {
box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
box-shadow: 0 0 0 1px var(--couleur-noir);
}
.produits-similaires .grille-produits-similaires article figure {
display: flex;
@ -1000,7 +1040,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
.produits-similaires .grille-produits-similaires article figure img {
aspect-ratio: 9/16;
width: 100%;
max-height: 70vh;
max-height: 70svh;
object-fit: cover;
}
.produits-similaires .grille-produits-similaires article figure figcaption {
@ -1011,11 +1051,19 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
}
.produits-similaires .grille-produits-similaires article figure figcaption h3 {
font-style: italic;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
.produits-similaires .grille-produits-similaires article figure figcaption p {
font-weight: 500;
letter-spacing: -0.5px;
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
}
@media (width <= 700px) {
.produits-similaires .grille-produits-similaires {
grid-template-columns: 100%;
}
.produits-similaires .grille-produits-similaires article figure img {
max-height: 50svh;
}
}
#pied-de-page {

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

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

@ -45,6 +45,7 @@
--police-myriad: "Myriad", sans-serif;
--hauteur-ligne-classique: 1.5;
--hauteur-ligne-rapprochee: 1;
--espacement-inter-lettres-rapproche-s: -.5px;
--espacement-inter-lettres-etendu-s: .5px;
--espacement-inter-lettres-etendu-m: 1px;
--espacement-inter-lettres-etendu-l: 1.5px;
@ -385,7 +386,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
--en-tete-marges-internes-bloc: var(--espace-m);
--en-tete-section-hauteur: var(--en-tete-hauteur);
--en-tete-logo-longueur: 80px;
z-index: 20;
z-index: 60;
height: var(--en-tete-hauteur);
padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
background: var(--couleur-gris);
@ -485,13 +486,13 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
--menu-section-hauteur: var(--menu-categories-produits-hauteur);
--menu-section-marges-bloc-debut: var(--en-tete-hauteur);
--menu-entree-marges-internes-ligne: var(--espace-m);
height: var(--menu-section-hauteur);
margin-top: var(--menu-section-marges-bloc-debut);
}
#menu-categories-produits ul {
grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr));
place-items: center;
gap: 1px;
display: grid;
}
@ -499,7 +500,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
color: var(--couleur-gris);
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
background: var(--couleur-noir);
width: 100%;
font-style: italic;
@ -517,8 +518,6 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
#menu-categories-produits ul li a {
width: inherit;
padding: var(--menu-entree-marges-internes-ligne) 0;
border-right: 1px solid var(--couleur-gris);
border-left: 1px solid var(--couleur-gris);
outline: initial;
display: inline-block;
}
@ -535,18 +534,30 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
}
#menu-categories-produits ul li:first-of-type a {
border-left: initial;
}
@media (width <= 900px) {
#menu-categories-produits ul {
--menu-entree-marges-internes-ligne: var(--espace-s);
flex-flow: wrap;
font-size: .9rem;
display: flex;
}
#menu-categories-produits ul li:last-of-type a {
border-right: initial;
#menu-categories-produits ul li {
flex-grow: 1;
width: min(140px, 100%);
}
#menu-categories-produits ul li a {
border: initial;
width: 100%;
}
}
.photos-produit {
--colonne-gauche-position-haut: var(--menu-categories-produits-hauteur);
--colonne-gauche-photo-hauteur: calc(100svh - var(--menu-categories-produits-hauteur));
--colonne-droite-photo-hauteur-minimale: calc(100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur));
--colonne-photo-longueur-minimale: 30rem;
--section-marges-externes-bloc-fin: 1rem;
flex-flow: wrap;
max-width: 100%;
@ -554,8 +565,9 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
.photos-produit > section {
width: min(var(--colonne-photo-longueur-minimale), 100%);
flex-flow: column;
width: 50%;
flex-grow: 1;
display: flex;
position: relative;
}
@ -576,8 +588,10 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
.grille-produits {
grid-template-columns: repeat(3, minmax(0, 1fr));
--aucun-produit-hauteur: calc(100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));
--carte-produit-longueur-minimale: 448px;
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr));
gap: 1px;
display: grid;
}
@ -587,9 +601,9 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
.grille-produits article figure {
row-gap: var(--espace-xl);
padding: var(--espace-m);
flex-flow: column;
row-gap: 2rem;
padding: 1rem;
display: flex;
}
@ -629,24 +643,24 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
.grille-produits article figure figcaption {
margin-bottom: var(--espace-xl);
flex-flow: row;
justify-content: space-between;
margin-bottom: 2rem;
display: flex;
}
.grille-produits article figure figcaption h3 {
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
font-style: italic;
}
.grille-produits article figure figcaption p {
letter-spacing: -.5px;
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
font-weight: 500;
}
.grille-produits__aucun-produit {
min-height: calc(100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur) - var(--pied-de-page-hauteur));
min-height: var(--aucun-produit-hauteur);
text-align: center;
grid-column: span 3;
align-content: center;
@ -657,6 +671,16 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
font-size: 1.25rem;
}
@media (width <= 700px) {
.grille-produits {
grid-template-columns: 100%;
}
.grille-produits article figure img {
max-height: 50svh;
}
}
.informations-produit {
--boite-couleur-fond: #ffffffe6;
--boite-position-basse: 1rem;
@ -714,7 +738,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
.informations-produit .onglets-details-produit > ul {
text-align: center;
text-transform: lowercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
grid-area: 2 / span 3;
grid-template-columns: repeat(3, minmax(0, 1fr));
display: grid;
@ -813,7 +837,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
.informations-produit .selecteur-produit__selection-variation select {
padding: .5rem var(--espace-xl);
padding: var(--espace-s) var(--espace-xl);
text-align: center;
appearance: none;
border: 1px solid var(--couleur-noir);
@ -849,7 +873,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
.informations-produit .actions-produit button {
font-variation-settings: "wght" 400;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
font-style: italic;
transition: font-variation-settings .2s;
}
@ -858,7 +882,26 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
.informations-produit .actions-produit button:not([disabled]):hover {
font-variation-settings: "wght" 500;
}
}
@media (width <= 700px) {
.informations-produit {
bottom: initial;
width: initial;
height: initial;
position: relative;
}
.informations-produit__conteneur {
transform: initial;
width: initial;
max-width: initial;
border-right: initial;
border-left: initial;
}
}
@media (hover: hover) {
.selecteur-personnalise {
display: block !important;
}
@ -869,6 +912,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
.produits-similaires {
--carte-produit-longueur-minimale: 448px;
margin-top: var(--espace-m);
grid-template-rows: 1fr auto;
grid-template-columns: repeat(3, 1fr);
@ -880,8 +924,9 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
.produits-similaires header {
padding: var(--espace-l) 0 var(--espace-m);
color: var(--couleur-blanc);
text-align: center;
border: 1px solid var(--couleur-noir);
background: var(--couleur-noir);
grid-area: en-tete;
width: 100%;
}
@ -890,13 +935,13 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
font-style: italic;
line-height: var(--hauteur-ligne-rapprochee);
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
.produits-similaires .grille-produits-similaires {
grid-area: produits;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr));
gap: 1px;
width: 100%;
display: grid;
@ -945,7 +990,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
aspect-ratio: 9 / 16;
object-fit: cover;
width: 100%;
max-height: 70vh;
max-height: 70svh;
}
.produits-similaires .grille-produits-similaires article figure figcaption {
@ -956,15 +1001,25 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
.produits-similaires .grille-produits-similaires article figure figcaption h3 {
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
font-style: italic;
}
.produits-similaires .grille-produits-similaires article figure figcaption p {
letter-spacing: -.5px;
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
font-weight: 500;
}
@media (width <= 700px) {
.produits-similaires .grille-produits-similaires {
grid-template-columns: 100%;
}
.produits-similaires .grille-produits-similaires article figure img {
max-height: 50svh;
}
}
#pied-de-page {
--pied-de-page-marges-internes-bloc: var(--espace-m);
--pied-de-page-marges-internes-ligne: var(--espace-xl);

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

File diff suppressed because one or more lines are too long

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

@ -6,15 +6,50 @@
}
#page-a-propos .storytelling {
padding: var(--espace-xl);
padding: var(--espace-xl) 0;
}
#page-a-propos .storytelling__conteneur {
border: 1px solid red;
width: 100%;
max-width: 60rem;
width: min(60rem, 100% - 4rem);
height: 2000px;
margin: auto;
position: relative;
overflow-x: hidden;
}
#page-a-propos .storytelling__section {
position: relative;
}
#page-a-propos .storytelling picture {
position: absolute;
}
#page-a-propos .storytelling picture#image-1 {
z-index: 20;
width: 40%;
left: 50%;
}
#page-a-propos .storytelling picture#image-2 {
z-index: 19;
width: 70%;
top: 8vmin;
scale: -1 1;
}
#page-a-propos .storytelling picture#image-3 {
z-index: 21;
width: 30%;
top: 54vmin;
left: 35%;
}
#page-a-propos .storytelling picture#image-4 {
z-index: 20;
width: 60%;
top: 60vmin;
left: 40%;
}
#page-a-propos .storytelling img {
@ -22,21 +57,23 @@
background: none;
width: fit-content;
height: auto;
position: relative;
}
#page-a-propos .storytelling img#image-1 {
z-index: 20;
width: 30%;
left: 60%;
}
#page-a-propos .storytelling img#image-2 {
z-index: 19;
width: 70%;
#page-a-propos .storytelling .texte {
max-width: 15rem;
font-size: .9rem;
font-style: italic;
font-weight: 500;
position: absolute;
top: 15%;
scale: -1 1;
}
#page-a-propos .storytelling .texte#texte-1 {
top: 42vmin;
right: 0;
}
#page-a-propos .storytelling .texte p + p {
margin-top: var(--espace-m);
}
/*# sourceMappingURL=web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css.map */

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

@ -1 +1 @@
{"version":3,"mappings":"AAAA;;;;;;;AAOA;;;;AAGA;;;;;;;;AAOA;;;;;;;;AAOA;;;;;;AAKA","sources":["web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css"],"sourcesContent":["#page-a-propos {\n /* Marges */\n --page-marges-bloc-debut: var(--en-tete-hauteur);\n display: flex;\n flex-flow: column nowrap;\n margin-top: var(--page-marges-bloc-debut);\n}\n#page-a-propos .storytelling {\n padding: var(--espace-xl);\n}\n#page-a-propos .storytelling__conteneur {\n position: relative;\n width: 100%;\n max-width: 60rem;\n margin: auto;\n border: 1px solid red;\n}\n#page-a-propos .storytelling img {\n position: relative;\n width: fit-content;\n height: auto;\n object-fit: contain;\n background: transparent;\n}\n#page-a-propos .storytelling img#image-1 {\n z-index: 20;\n left: 60%;\n width: 30%;\n}\n#page-a-propos .storytelling img#image-2 {\n position: absolute;\n z-index: 19;\n top: 15%;\n scale: -1 1;\n width: 70%;\n}\n\n/*# sourceMappingURL=page-a-propos.css.map */\n"],"names":[]}
{"version":3,"mappings":"AAAA;;;;;;;AAOA;;;;AAGA;;;;;;;;AAOA;;;;AAGA;;;;AAGA;;;;;;AAKA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;;AAOA;;;;;AAIA","sources":["web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css"],"sourcesContent":["#page-a-propos {\n /* Marges */\n --page-marges-bloc-debut: var(--en-tete-hauteur);\n display: flex;\n flex-flow: column nowrap;\n margin-top: var(--page-marges-bloc-debut);\n}\n#page-a-propos .storytelling {\n padding: var(--espace-xl) 0;\n}\n#page-a-propos .storytelling__conteneur {\n position: relative;\n overflow-x: hidden;\n width: min(60rem, 100% - 4rem);\n height: 2000px;\n margin: auto;\n}\n#page-a-propos .storytelling__section {\n position: relative;\n}\n#page-a-propos .storytelling picture {\n position: absolute;\n}\n#page-a-propos .storytelling picture#image-1 {\n z-index: 20;\n left: 50%;\n width: 40%;\n}\n#page-a-propos .storytelling picture#image-2 {\n z-index: 19;\n top: 8vmin;\n scale: -1 1;\n width: 70%;\n}\n#page-a-propos .storytelling picture#image-3 {\n z-index: 21;\n top: 54vmin;\n left: 35%;\n width: 30%;\n}\n#page-a-propos .storytelling picture#image-4 {\n z-index: 20;\n top: 60vmin;\n left: 40%;\n width: 60%;\n}\n#page-a-propos .storytelling img {\n width: fit-content;\n height: auto;\n object-fit: contain;\n background: transparent;\n}\n#page-a-propos .storytelling .texte {\n position: absolute;\n max-width: 15rem;\n font-size: 0.9rem;\n font-weight: 500;\n font-style: italic;\n}\n#page-a-propos .storytelling .texte#texte-1 {\n top: 42vmin;\n right: 0;\n}\n#page-a-propos .storytelling .texte p + p {\n margin-top: var(--espace-m);\n}\n\n/*# sourceMappingURL=page-a-propos.css.map */\n"],"names":[]}

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

@ -57,7 +57,7 @@
font-style: initial;
border: 1px solid var(--couleur-noir);
/* Bouton d'addition de quantité */
/* *
/*
* 1. Cache les flèches d'augmentation/diminution sur Firefox.
* 2. Cache les flèches d'augmentation/diminution sur Chrome/Edge/Safari.
*/
@ -140,7 +140,7 @@
padding: var(--espace-l) var(--espace-xl);
text-align: center;
border-bottom: 1px solid var(--couleur-noir);
/* *
/*
* 1. Nécessaire pour ne pas qu'un espace vertical non souhaité apparaisse.
* 2. Applique une marge entre les instructions et le code promo de notre choix.
*/

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

File diff suppressed because one or more lines are too long

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

@ -18,6 +18,7 @@
--hauteur-ligne-rapprochee: 1;
/* Espacements entre les lettres */
--espacement-inter-lettres-rapproche-s: -0.5px;
--espacement-inter-lettres-etendu-s: 0.5px;
--espacement-inter-lettres-etendu-m: 1px;
--espacement-inter-lettres-etendu-l: 1.5px;

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

@ -2,14 +2,14 @@
@use "../abstracts/variables" as variables;
/* *
/*
* 1. Utilise un meilleur modèle de boîte.
*/
html {
box-sizing: border-box; /* 1 */
}
/* *
/*
* Réinitialise avec des styles par défaut plus simples.
*
* 1. Hérite du modèle de boîte du document par défaut.
@ -24,7 +24,7 @@ html {
color: inherit; /* 3 */
}
/* *
/*
* 1. Utilise une couleur d'arrière-plan définie.
* 2. Utilise la couleur primaire du site.
*/
@ -33,14 +33,14 @@ body {
background: var(--couleur-gris); /* 1 */
}
/* *
/*
* 1. Force l'héritage des styles pour ces éléments.
*/
button, input, select, textarea {
font: inherit; /* 1 */
}
/* *
/*
* Change la couleur d'arrière-plan à la sélection du texte.
*/
*::selection {
@ -57,7 +57,7 @@ button, input, select, textarea {
cursor: not-allowed;
}
/* *
/*
* Désactive les animations pour les Utilisateurs n'en souhaitant pas.
*/
@media (prefers-reduced-motion) {

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

@ -1,6 +1,6 @@
// Styles typographiques de base
/* *
/*
* 2. Rendu spécifique du texte pour Safari/iOS.
* 3. Rendu plus précis du texte.
*/

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

@ -1,6 +1,6 @@
// Styles pour les boutons (<button>, <a> avec rôle de boutons)
/* *
/*
* Réinitialisation des styles des <button>.
*/
button {

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

@ -68,7 +68,7 @@ input[type="checkbox"], input[type="radio"] {
}
}
/* *
/*
* 1. Pour un alignement parfait du label avec la case à cocher.
*/
label:has(~ &), + label {

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

@ -1,6 +1,6 @@
// Styles de base pour les images (<img>, <picture>).
/* *
/*
* 1. Facilite l'usages des images.
* 2. Affiche les images dans l'intégralité de leur conteneur, en contrepartie d'un recoupage.
* 3. Arrière-plan jaune en attendant le chargement de l'image.

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

@ -1,6 +1,6 @@
// Styles de base pour les lists (<ul>, <ol>, <li>)
/* *
/*
* Réinitialise les styles des listes non ordonnées.
*
* 1. Pas de puce.
@ -8,7 +8,7 @@
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.

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

@ -1,6 +1,6 @@
// Styles pour les colonnes de photos d'une Page Produit
/* *
/*
* Les photos du Produit, étalées sur 2 colonnes : une pour la photo Produit, une pour les photos
* portées.
*
@ -16,6 +16,7 @@
--colonne-droite-photo-hauteur-minimale: calc(
100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur)
);
--colonne-photo-longueur-minimale: 30rem;
/* Marges */
--section-marges-externes-bloc-fin: 1rem;
@ -28,7 +29,8 @@
position: relative;
display: flex;
flex-flow: column nowrap;
width: 50%;
flex-grow: 1;
width: min(var(--colonne-photo-longueur-minimale), 100%);
&.colonne-gauche {
position: sticky;

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

@ -55,7 +55,7 @@
justify-content: space-between;
}
/* *
/*
* Le conteneur d'une entrée du menu, nécessaire pour que le changement d'arrière-plan au
* survol soit possible.
*
@ -108,7 +108,7 @@
place-items: center;
text-align: center;
/* *
/*
* 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.
*/
a {

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

@ -1,6 +1,6 @@
// Styles pour la grille de Produits du Shop
/* *
/*
* La Grille des Produits sous forme de Cartes.
*
* Les Cartes ont une taille minimale et occupent l'espace en ligne disponible jusqu'à l'occuper
@ -13,9 +13,18 @@
* collapse »).
*/
.grille-produits {
/* Dimensions */
--aucun-produit-hauteur: calc(
100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur)
- var(--pied-de-page-hauteur)
);
--carte-produit-longueur-minimale: 448px;
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1 */
grid-template-columns:
repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
gap: 1px; /* 2 */
article {
@ -24,8 +33,8 @@
figure {
display: flex;
flex-flow: column nowrap;
row-gap: 2rem;
padding: 1rem;
row-gap: var(--espace-xl);
padding: var(--espace-m);
a {
position: relative;
@ -68,16 +77,16 @@
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin-bottom: 2rem;
margin-bottom: var(--espace-xl);
h3 {
font-style: italic;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
p {
font-weight: 500;
letter-spacing: -0.5px;
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
}
}
}
@ -86,10 +95,7 @@
&__aucun-produit {
grid-column: span 3;
align-content: center;
min-height: calc(
100svh - var(--menu-categories-produits-hauteur) - var(--en-tete-hauteur)
- var(--pied-de-page-hauteur)
);
min-height: var(--aucun-produit-hauteur);
text-align: center;
p + p {
@ -97,4 +103,14 @@
font-size: 1.25rem;
}
}
@media (width <= 700px) {
& {
grid-template-columns: 100%;
article figure img {
max-height: 50svh;
}
}
}
}

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

@ -1,6 +1,6 @@
// Styles pour la boîte flottante des Informations sur le Produit
/* *
/*
* Boîte flottante avec les informations Produit, le sélecteur de variation et de quantité pour le
* Panier.
*
@ -8,7 +8,6 @@
* 2. Conteneur existant pour que le flottement sticky fonctionne ; n'a pas de dimensions.
*/
.informations-produit {
/* Variables */
// Couleurs
--boite-couleur-fond: rgb(255 255 255 / 90%);
@ -32,7 +31,7 @@
max-width: var(--boite-longueur);
border: 1px solid var(--couleur-noir);
/* *
/*
* Définis les apparence et comportement de toutes les sections de la boîte.
*/
> section {
@ -77,7 +76,7 @@
grid-template-columns: repeat(3, minmax(0, 1fr));
text-align: center;
text-transform: lowercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
li {
width: 100%;
@ -189,11 +188,10 @@
}
}
/* Sélecteur natif */
select {
position: relative;
min-width: 4rem;
padding: 0.5rem var(--espace-xl);
padding: var(--espace-s) var(--espace-xl);
text-align: center;
appearance: none;
background: rgb(236 234 235 / 90%);
@ -209,17 +207,6 @@
option {
background: rgb(236 234 235 / 90%);
}
/* Sélecteur personnalisé */
// .selecteur-personnalise {
// position: absolute;
// top: 0;
// left: 0;
// display: none;
// min-width: 3rem;
// min-height: var(--espace-xl);
// background-color: red;
// }
}
&__prix {
@ -242,7 +229,7 @@
font-variation-settings: "wght" 400;
font-style: italic;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
transition: 0.2s font-variation-settings;
/* Change la casse de la police au survol quand le Bouton n'est pas désactivé */
@ -255,6 +242,21 @@
}
}
}
@media (width <= 700px) {
position: relative;
bottom: initial;
width: initial;
height: initial;
&__conteneur {
transform: initial;
width: initial;
max-width: initial;
border-right: initial;
border-left: initial;
}
}
}
@media (hover: hover) {

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

@ -1,6 +1,6 @@
// Styles pour le menu des Catégories de Produits
/* *
/*
* Le menu avec les Catégories de Produits pour une navigation rapide.
*
* 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher
@ -15,10 +15,10 @@
--menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
--menu-entree-marges-internes-ligne: var(--espace-m);
height: var(--menu-section-hauteur);
// height: var(--menu-section-hauteur);
margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
/* *
/*
* Liste des Catégories de Produits.
*
* 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur
@ -29,9 +29,11 @@
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
gap: 1px;
place-items: center;
/* *
/*
* 1. Force chaque entrée à occuper tout l'espace alloué par grid.
*/
li {
@ -41,7 +43,7 @@
color: var(--couleur-gris);
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
background: var(--couleur-noir);
&.categorie-courante {
@ -54,7 +56,7 @@
font-weight: 500;
}
/* *
/*
* 1. Permet de créer des marges verticales.
* 2. Hérite de la longueur du conteneur.
* 3. Surchargement de styles pour les liens.
@ -63,8 +65,6 @@
display: inline-block; /* 1 */
width: inherit; /* 2 */
padding: var(--menu-entree-marges-internes-ligne) 0;
border-right: 1px solid var(--couleur-gris);
border-left: 1px solid var(--couleur-gris);
outline: initial; /* 3 */
&:focus, &:focus-visible {
@ -79,13 +79,25 @@
}
}
}
}
&:first-of-type a {
border-left: initial;
}
@media (width <= 900px) {
& {
--menu-entree-marges-internes-ligne: var(--espace-s);
&:last-of-type a {
border-right: initial;
display: flex;
flex-flow: row wrap;
font-size: 0.9rem;
li {
flex-grow: 1;
width: min(140px, 100%);
a {
width: 100%;
border: initial;
}
}
}
}
}

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

@ -81,7 +81,7 @@
max-width: 3rem;
}
/* *
/*
* 1. Cache les flèches d'augmentation/diminution sur Firefox.
* 2. Cache les flèches d'augmentation/diminution sur Chrome/Edge/Safari.
*/
@ -173,7 +173,7 @@
text-align: center;
border-bottom: 1px solid var(--couleur-noir);
/* *
/*
* 1. Nécessaire pour ne pas qu'un espace vertical non souhaité apparaisse.
* 2. Applique une marge entre les instructions et le code promo de notre choix.
*/

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

@ -1,6 +1,9 @@
// Styles pour la section des Produits similaires (de la même Collection)
.produits-similaires {
/* Dimensions */
--carte-produit-longueur-minimale: 448px;
display: grid;
grid-template-areas:
"en-tete en-tete en-tete"
@ -15,14 +18,15 @@
grid-area: en-tete;
width: 100%;
padding: var(--espace-l) 0 var(--espace-m);
color: var(--couleur-blanc);
text-align: center;
border: 1px solid var(--couleur-noir);
background: var(--couleur-noir);
h2 {
font-style: italic;
line-height: var(--hauteur-ligne-rapprochee);
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
}
@ -30,12 +34,12 @@
display: grid;
grid-area: produits;
grid-auto-rows: 1fr;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr));
gap: 1px;
width: 100%;
article {
box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
box-shadow: 0 0 0 1px var(--couleur-noir);
figure {
display: flex;
@ -76,7 +80,7 @@
img {
aspect-ratio: 9 / 16;
width: 100%;
max-height: 70vh;
max-height: 70svh;
object-fit: cover;
}
@ -88,15 +92,25 @@
h3 {
font-style: italic;
letter-spacing: 1px;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
p {
font-weight: 500;
letter-spacing: -0.5px;
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
}
}
}
}
@media (width <= 700px) {
& {
grid-template-columns: 100%;
article figure img {
max-height: 50svh;
}
}
}
}
}

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

@ -3,7 +3,7 @@
@forward "../layouts/panneau-panier";
@forward "../layouts/panneau-informations-client";
/* *
/*
* 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher
* correctement.
*/