fonc(styles) étoffe les styles de l'en-tête et du menu des Catégories de Produits
This commit is contained in:
parent
f4c3ada5ba
commit
7592508874
12 changed files with 288 additions and 94 deletions
|
|
@ -4,70 +4,90 @@
|
|||
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");
|
||||
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");
|
||||
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");
|
||||
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");
|
||||
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");
|
||||
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");
|
||||
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");
|
||||
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");
|
||||
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");
|
||||
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");
|
||||
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;
|
||||
|
|
@ -75,7 +95,9 @@
|
|||
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");
|
||||
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;
|
||||
|
|
@ -83,14 +105,16 @@
|
|||
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");
|
||||
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;
|
||||
--couleur-jaune: #ebffb8;
|
||||
--couleur-noir: #202020;
|
||||
/* Polices */
|
||||
--police-lato: "Lato", sans-serif;
|
||||
--police-myriad: "Myriad", sans-serif;
|
||||
|
|
@ -98,14 +122,14 @@
|
|||
|
||||
/**
|
||||
* 1. Utilise un meilleur modèle de boîte.
|
||||
* 2. Rendu des polices pour Safari/iOS
|
||||
* 3. Rendu plus précis du texte
|
||||
* 2. Rendu spécifique du texte 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;
|
||||
text-rendering: geometricprecision; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -124,29 +148,56 @@ html {
|
|||
}
|
||||
|
||||
/**
|
||||
* 1. Utilise une couleur d'arrière-plan définie
|
||||
* 1. Utilise une couleur d'arrière-plan définie.
|
||||
* 2. Force une hauteur minimale de page occupant l'intégralité de la vue du navigateur.
|
||||
*/
|
||||
body {
|
||||
min-height: 100vh; /* 2 */
|
||||
background: var(--couleur-gris); /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Force l'héritage des styles pour ces éléments
|
||||
*/
|
||||
button, input, select, textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 1rem/1.4 var(--police-lato) 0.5px;
|
||||
font: 1rem/1.4 var(--police-myriad) 0.5px;
|
||||
color: var(--couleur-noir);
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Désactive la bordure.
|
||||
* 1. Facilite l'usages des images.
|
||||
* 2. Empêche les images de dépasser leur conteneur.
|
||||
*/
|
||||
img, picture {
|
||||
display: block; /* 1 */
|
||||
max-width: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Change la « bordure » de base.
|
||||
* 2. Ajoute un contour, qui sera colorisé au focus.
|
||||
* 3. Anime le changement de couleur du bordure et du contour.
|
||||
* 3. Anime le changement de couleur des texte, bordure et contour.
|
||||
*/
|
||||
a {
|
||||
/* Couleurs */
|
||||
--lien-contour-couleur-focus: var(--couleur-noir);
|
||||
text-decoration: none; /* 1 */
|
||||
--lien-contour-couleur-focus: var(--couleur-noir); /* 1 */
|
||||
text-decoration: underline solid; /* 1 */
|
||||
text-decoration-color: transparent; /* 1 */
|
||||
text-decoration-skip-ink: auto; /* 1 */
|
||||
outline: 1px solid transparent; /* 2 */
|
||||
outline-offset: initial; /* 2 */
|
||||
transition: 0.2s outline-color, 0.2s border-color; /* 3 */
|
||||
transition:
|
||||
0.2s color,
|
||||
0.2s font-weight,
|
||||
0.2s background,
|
||||
0.2s outline-color,
|
||||
0.2s border-color,
|
||||
0.2s text-decoration-color; /* 3 */
|
||||
text-decoration-skip: edges; /* 1 */
|
||||
/* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
|
||||
/**
|
||||
* Lien ressemblant visuellement à un bouton.
|
||||
|
|
@ -157,7 +208,7 @@ a:focus, a:focus-visible {
|
|||
}
|
||||
a.lien-bouton {
|
||||
/* Marges */
|
||||
--lien-bouton-marges-internes-bloc: 0.25rem;
|
||||
--lien-bouton-marges-internes-bloc: 0.33rem;
|
||||
/* Couleurs */
|
||||
--lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
|
||||
padding: var(--lien-bouton-marges-internes-bloc) 0;
|
||||
|
|
@ -202,7 +253,8 @@ ul.avec-puce-cercle {
|
|||
}
|
||||
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 */
|
||||
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 {
|
||||
|
|
@ -210,7 +262,7 @@ ul.avec-puce-cercle a {
|
|||
--en-tete-marges-internes-ligne: 2rem;
|
||||
--en-tete-marges-internes-bloc: 1rem;
|
||||
/* Dimensions */
|
||||
--en-tete-hauteur: 90px;
|
||||
--en-tete-hauteur: 80px;
|
||||
--en-tete-logo-longueur: 120px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
|
@ -245,7 +297,7 @@ ul.avec-puce-cercle a {
|
|||
display: flex;
|
||||
grid-column: 2;
|
||||
flex-flow: row nowrap;
|
||||
gap: max(2rem, 8vw);
|
||||
gap: max(2rem, 5vw);
|
||||
justify-content: space-between;
|
||||
}
|
||||
#en-tete .menu-navigation__entree {
|
||||
|
|
@ -257,6 +309,7 @@ ul.avec-puce-cercle a {
|
|||
--liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */
|
||||
/* Dispositions */
|
||||
--liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
|
||||
transition: 0.2s background;
|
||||
}
|
||||
#en-tete .menu-navigation__entree a {
|
||||
display: inline-block; /* 1 */
|
||||
|
|
@ -268,48 +321,91 @@ ul.avec-puce-cercle a {
|
|||
background: var(--nav-entree-arriere-plan-couleur);
|
||||
}
|
||||
}
|
||||
#en-tete .panier {
|
||||
display: inline-flex;
|
||||
#en-tete .compte-panier {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
place-content: center;
|
||||
gap: max(1rem, 2vw);
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
/**
|
||||
* 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.
|
||||
*/
|
||||
}
|
||||
#en-tete .panier__lien {
|
||||
min-width: 10ch;
|
||||
#en-tete .compte-panier a {
|
||||
min-width: 9ch; /* 1 */
|
||||
text-transform: lowercase;
|
||||
}
|
||||
#en-tete .compte-panier a.lien-compte {
|
||||
text-decoration: underline solid;
|
||||
text-decoration-color: transparent;
|
||||
text-decoration-skip-ink: auto;
|
||||
border-color: transparent;
|
||||
text-decoration-skip: edges;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
#en-tete .compte-panier a.lien-compte:hover {
|
||||
text-decoration-color: var(--couleur-noir);
|
||||
}
|
||||
}
|
||||
#en-tete .compte-panier a[data-contient-articles=true] {
|
||||
background: var(--couleur-jaune);
|
||||
}
|
||||
|
||||
#menu-categories-produits {
|
||||
/* Dimensions */
|
||||
--menu-entree-longueur-minimale: 13ch;
|
||||
/* Marges */
|
||||
--menu-entree-marges-internes-ligne: 1rem;
|
||||
/**
|
||||
* Liste des Catégories de Produits.
|
||||
*
|
||||
* 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur
|
||||
* minimale. Elles se disposent de manière à occuper tout l'espace disponible sans aller à la
|
||||
* ligne.
|
||||
*/
|
||||
}
|
||||
#menu-categories-produits ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(21ch, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
|
||||
place-items: center;
|
||||
/**
|
||||
* 1. Force chaque entrée à occuper tout l'espace alloué par grid.
|
||||
*/
|
||||
}
|
||||
#menu-categories-produits ul li {
|
||||
width: 100%;
|
||||
width: 100%; /* 1 */
|
||||
font-weight: 450;
|
||||
font-style: italic;
|
||||
color: white;
|
||||
color: var(--couleur-gris);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
background: black;
|
||||
letter-spacing: 1px;
|
||||
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.
|
||||
*/
|
||||
}
|
||||
#menu-categories-produits ul li:active a {
|
||||
font-weight: 500;
|
||||
}
|
||||
#menu-categories-produits ul li a {
|
||||
display: inline-block;
|
||||
width: inherit;
|
||||
padding: 1rem 0;
|
||||
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;
|
||||
outline: initial; /* 3 */
|
||||
}
|
||||
#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;
|
||||
outline: initial; /* 3 */
|
||||
}
|
||||
@media (hover: hover) {
|
||||
#menu-categories-produits ul li a:hover {
|
||||
color: var(--couleur-jaune);
|
||||
outline: initial;
|
||||
outline: initial; /* 3 */
|
||||
}
|
||||
}
|
||||
#menu-categories-produits ul li:first-of-type a {
|
||||
|
|
@ -319,4 +415,33 @@ ul.avec-puce-cercle a {
|
|||
border-right: initial;
|
||||
}
|
||||
|
||||
#pied-de-page {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
place-items: center;
|
||||
align-self: end;
|
||||
min-width: 100vw;
|
||||
padding: 1rem 2rem;
|
||||
line-height: 1.5;
|
||||
background: var(--couleur-jaune);
|
||||
border: 1px solid var(--couleur-noir);
|
||||
}
|
||||
#pied-de-page .zone-menu-navigation-secondaire {
|
||||
justify-self: start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
#pied-de-page .zone-liens-reseaux-sociaux {
|
||||
justify-items: end;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
#pied-de-page a:hover {
|
||||
text-decoration-color: var(--couleur-noir);
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +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"}
|
||||
{"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/_images.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","../../src/sass/layouts/_pied-de-page.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;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AC1CF;EACE;EACA;;;ACFF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;ACNF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,YACE,kHAK4B;EAE9B;AAEA;AAKA;AAAA;AAAA;;AAJA;EACE;;AAMF;AACE;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAKA;AAKA;;AATA;EACE;;AAIF;EACE;;AAIF;EACE;IACE;;;;ACvDR;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;EAEA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAON;EACE;;;AC1GR;AACE;EACA;AAEA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAOA;EACE;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;;AAGF;EACE;;;ACnER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIA;EACE;IACE","file":"main.css"}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
:root {
|
||||
/* Couleurs */
|
||||
--couleur-noir: #000;
|
||||
--couleur-gris: #eceaeb;
|
||||
--couleur-jaune: #ebffb8;
|
||||
--couleur-bordeaux: #490918;
|
||||
--couleur-jaune: #ebffb8;
|
||||
--couleur-noir: #202020;
|
||||
|
||||
/* Polices */
|
||||
--police-lato: "Lato", sans-serif;
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
|
||||
/**
|
||||
* 1. Utilise un meilleur modèle de boîte.
|
||||
* 2. Rendu des polices pour Safari/iOS
|
||||
* 3. Rendu plus précis du texte
|
||||
* 2. Rendu spécifique du texte 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;
|
||||
text-rendering: geometricprecision; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -30,8 +30,17 @@ html {
|
|||
}
|
||||
|
||||
/**
|
||||
* 1. Utilise une couleur d'arrière-plan définie
|
||||
* 1. Utilise une couleur d'arrière-plan définie.
|
||||
* 2. Force une hauteur minimale de page occupant l'intégralité de la vue du navigateur.
|
||||
*/
|
||||
body {
|
||||
min-height: 100vh; /* 2 */
|
||||
background: var(--couleur-gris); /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Force l'héritage des styles pour ces éléments
|
||||
*/
|
||||
button, input, select, textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Styles typographiques de base
|
||||
|
||||
body {
|
||||
font: 1rem/1.4 var(--police-lato) 0.5px;
|
||||
font: 1rem/1.4 var(--police-myriad) 0.5px;
|
||||
color: var(--couleur-noir);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
// Styles de base pour les images (<img>, <picture>).
|
||||
|
||||
/**
|
||||
* 1. Facilite l'usages des images.
|
||||
* 2. Empêche les images de dépasser leur conteneur.
|
||||
*/
|
||||
img, picture {
|
||||
display: block; /* 1 */
|
||||
max-width: 100%; /* 2 */
|
||||
}
|
||||
|
|
@ -1,18 +1,28 @@
|
|||
// Styles de base pour les liens (<a>).
|
||||
|
||||
/**
|
||||
* 1. Désactive la bordure.
|
||||
* 1. Change la « bordure » de base.
|
||||
* 2. Ajoute un contour, qui sera colorisé au focus.
|
||||
* 3. Anime le changement de couleur du bordure et du contour.
|
||||
* 3. Anime le changement de couleur des texte, bordure et contour.
|
||||
*/
|
||||
a {
|
||||
/* Couleurs */
|
||||
--lien-contour-couleur-focus: var(--couleur-noir);
|
||||
--lien-contour-couleur-focus: var(--couleur-noir); /* 1 */
|
||||
|
||||
text-decoration: none; /* 1 */
|
||||
text-decoration: underline solid; /* 1 */
|
||||
text-decoration-color: transparent; /* 1 */
|
||||
text-decoration-skip-ink: auto; /* 1 */
|
||||
outline: 1px solid transparent; /* 2 */
|
||||
outline-offset: initial; /* 2 */
|
||||
transition: 0.2s outline-color, 0.2s border-color; /* 3 */
|
||||
transition:
|
||||
0.2s color,
|
||||
0.2s font-weight,
|
||||
0.2s background,
|
||||
0.2s outline-color,
|
||||
0.2s border-color,
|
||||
0.2s text-decoration-color; /* 3 */
|
||||
|
||||
text-decoration-skip: edges; /* 1 */
|
||||
|
||||
/* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
|
||||
&:focus, &:focus-visible {
|
||||
|
|
@ -24,7 +34,7 @@ a {
|
|||
*/
|
||||
&.lien-bouton {
|
||||
/* Marges */
|
||||
--lien-bouton-marges-internes-bloc: 0.25rem;
|
||||
--lien-bouton-marges-internes-bloc: 0.33rem;
|
||||
|
||||
/* Couleurs */
|
||||
--lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
--en-tete-marges-internes-bloc: 1rem;
|
||||
|
||||
/* Dimensions */
|
||||
--en-tete-hauteur: 90px;
|
||||
--en-tete-hauteur: 80px;
|
||||
--en-tete-logo-longueur: 120px;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
display: flex;
|
||||
grid-column: 2;
|
||||
flex-flow: row nowrap;
|
||||
gap: max(2rem, 8vw);
|
||||
gap: max(2rem, 5vw);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
|
@ -59,6 +59,8 @@
|
|||
/* Dispositions */
|
||||
--liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
|
||||
|
||||
transition: 0.2s background;
|
||||
|
||||
a {
|
||||
display: inline-block; /* 1 */
|
||||
padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */
|
||||
|
|
@ -73,15 +75,39 @@
|
|||
}
|
||||
}
|
||||
|
||||
.panier {
|
||||
display: inline-flex;
|
||||
.compte-panier {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
place-content: center;
|
||||
gap: max(1rem, 2vw);
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
|
||||
&__lien {
|
||||
min-width: 10ch;
|
||||
/**
|
||||
* 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.
|
||||
*/
|
||||
a {
|
||||
min-width: 9ch; /* 1 */
|
||||
text-transform: lowercase;
|
||||
|
||||
&.lien-compte {
|
||||
text-decoration: underline solid;
|
||||
text-decoration-color: transparent;
|
||||
text-decoration-skip-ink: auto;
|
||||
border-color: transparent;
|
||||
text-decoration-skip: edges;
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
text-decoration-color: var(--couleur-noir);
|
||||
|
||||
// border-bottom-color: var(--couleur-noir);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-contient-articles="true"] {
|
||||
background: var(--couleur-jaune);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,73 @@
|
|||
// Styles pour le menu des Catégories de Produits
|
||||
|
||||
#menu-categories-produits {
|
||||
/* Dimensions */
|
||||
--menu-entree-longueur-minimale: 13ch;
|
||||
|
||||
/* Marges */
|
||||
--menu-entree-marges-internes-ligne: 1rem;
|
||||
|
||||
/**
|
||||
* Liste des Catégories de Produits.
|
||||
*
|
||||
* 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur
|
||||
* minimale. Elles se disposent de manière à occuper tout l'espace disponible sans aller à la
|
||||
* ligne.
|
||||
*/
|
||||
ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(21ch, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
|
||||
place-items: center;
|
||||
|
||||
/**
|
||||
* 1. Force chaque entrée à occuper tout l'espace alloué par grid.
|
||||
*/
|
||||
li {
|
||||
width: 100%;
|
||||
width: 100%; /* 1 */
|
||||
font-weight: 450;
|
||||
font-style: italic;
|
||||
color: white;
|
||||
color: var(--couleur-gris);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
background: black;
|
||||
letter-spacing: 1px;
|
||||
background: var(--couleur-noir);
|
||||
|
||||
&:focus-within + li a {
|
||||
// border-left-color: var(--couleur-jaune);
|
||||
}
|
||||
|
||||
&:has(+ li:focus-within) a {
|
||||
// border-right-color: var(--couleur-jaune);
|
||||
&:active a {
|
||||
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.
|
||||
*/
|
||||
a {
|
||||
display: inline-block;
|
||||
width: inherit;
|
||||
padding: 1rem 0;
|
||||
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;
|
||||
outline: initial; /* 3 */
|
||||
|
||||
&:focus, &:focus-visible {
|
||||
color: var(--couleur-jaune);
|
||||
border-right-color: var(--couleur-jaune);
|
||||
border-left-color: var(--couleur-jaune);
|
||||
outline: initial;
|
||||
outline: initial; /* 3 */
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: var(--couleur-jaune);
|
||||
outline: initial;
|
||||
outline: initial; /* 3 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
a {
|
||||
border-left: initial;
|
||||
}
|
||||
&:first-of-type a {
|
||||
border-left: initial;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
a {
|
||||
border-right: initial;
|
||||
}
|
||||
&:last-of-type a {
|
||||
border-right: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
// 1.2 Éléments
|
||||
@use "base/elements/boutons" as boutons;
|
||||
@use "base/elements/images" as images;
|
||||
@use "base/elements/liens" as liens;
|
||||
@use "base/elements/listes" as listes;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue