2025-07-03
- étoffe le fichier `JOURNAL` avec les nouveaux changements majeurs. - propose une tâche _Justfile_ pour un rechargement à chaud primitif lors de changements CSS. - ne précompresse pas et ne propose plus de versions « legacy » des scripts JS en methodes développement. - appose correctement `aria-current` sur le lien de la page courante dans les deux menus de navigation. - remplace une image statique « Scroll down » avec une animation SVG reposant sur du texte et des chemins. - renomme moultes choses.
This commit is contained in:
parent
b85a03a141
commit
d30b83d093
49 changed files with 830 additions and 359 deletions
|
|
@ -52,6 +52,7 @@
|
|||
--hauteur-ligne-compacte: 1.1;
|
||||
--hauteur-ligne-rapprochee: 1;
|
||||
/* Espacements entre les lettres */
|
||||
--espacement-inter-lettres-rapproche-m: -1px;
|
||||
--espacement-inter-lettres-rapproche-s: -0.5px;
|
||||
--espacement-inter-lettres-etendu-s: 0.5px;
|
||||
--espacement-inter-lettres-etendu-m: 1px;
|
||||
|
|
@ -66,7 +67,7 @@
|
|||
);
|
||||
--contenu-page-hauteur-minimale-avec-categories: calc(
|
||||
100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur)
|
||||
- var(--menu-categories-produits-hauteur)
|
||||
- var(--menu-categories-produits-hauteur)
|
||||
);
|
||||
/* Espacements */
|
||||
--espace-xs: 0.25rem;
|
||||
|
|
@ -109,6 +110,7 @@ html {
|
|||
* 2. Utilise la couleur primaire du site.
|
||||
*/
|
||||
body {
|
||||
overscroll-behavior: none;
|
||||
accent-color: var(--couleur-jaune); /* 2 */
|
||||
background: var(--couleur-gris); /* 1 */
|
||||
}
|
||||
|
|
@ -688,14 +690,17 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
/* Dispositions */
|
||||
--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;
|
||||
}
|
||||
#en-tete .menu-navigation__entree--courante {
|
||||
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto 90% no-repeat;
|
||||
}
|
||||
#en-tete .menu-navigation__entree a {
|
||||
display: inline-block; /* 1 */
|
||||
padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */
|
||||
text-align: center; /* 4 */
|
||||
}
|
||||
#en-tete .menu-navigation__entree--courante {
|
||||
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/auto 90% no-repeat;
|
||||
}
|
||||
@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;
|
||||
|
|
@ -1230,9 +1235,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
.details-produit__textes .section-textuelle:not(:last-of-type) {
|
||||
border-block-end: 1px solid var(--couleur-noir);
|
||||
}
|
||||
.details-produit__textes .section-textuelle:has(button[aria-expanded=true]) button {
|
||||
/* padding: initial; */
|
||||
}
|
||||
.details-produit__textes .section-textuelle:has(button[aria-expanded=false]) .section-textuelle__contenu {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1263,7 +1265,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
.details-produit__actions {
|
||||
--section-marges-internes: var(--espace-l);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--couleur-noir);
|
||||
border-block: 1px solid var(--couleur-noir);
|
||||
background: var(--couleur-jaune);
|
||||
transition: 0.2s background;
|
||||
}
|
||||
|
|
@ -1286,6 +1288,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
.produits-similaires {
|
||||
--carte-produit-longueur-minimale: 448px;
|
||||
--carte-produit-longueur-maximale: 1000px;
|
||||
--en-tete-flottante-hauteur: calc(1rem + var(--espace-l) * 2 + 1px);
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-areas: "en-tete en-tete en-tete" "produits produits produits";
|
||||
|
|
@ -1297,10 +1300,10 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
.produits-similaires header {
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
top: calc(1lh + var(--espace-l) + var(--espace-m));
|
||||
top: var(--en-tete-flottante-hauteur);
|
||||
grid-area: en-tete;
|
||||
width: 100%;
|
||||
padding: var(--espace-l) 0 var(--espace-m);
|
||||
padding: var(--espace-l) 0;
|
||||
color: var(--couleur-blanc);
|
||||
text-align: center;
|
||||
background: var(--couleur-noir);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,45 +1,115 @@
|
|||
@charset "UTF-8";
|
||||
#page-accueil {
|
||||
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
||||
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
||||
--conteneur-marges-internes-ligne: var(--espace-xl);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-height: var(--hauteur-conteneur);
|
||||
max-height: var(--hauteur-conteneur);
|
||||
min-block-size: var(--hauteur-conteneur);
|
||||
max-block-size: var(--hauteur-conteneur);
|
||||
margin-top: var(--page-marges-bloc-debut);
|
||||
}
|
||||
#page-accueil .storytelling {
|
||||
overflow-y: scroll;
|
||||
place-items: center;
|
||||
min-height: inherit;
|
||||
max-height: inherit;
|
||||
overscroll-behavior: none;
|
||||
min-block-size: inherit;
|
||||
max-block-size: inherit;
|
||||
}
|
||||
#page-accueil .storytelling__conteneur {
|
||||
overscroll-behavior: inherit;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-height: calc(var(--hauteur-conteneur) * 13);
|
||||
padding: 0 var(--espace-xl);
|
||||
place-items: center;
|
||||
min-block-size: calc(var(--hauteur-conteneur) * 13);
|
||||
padding: 0 var(--conteneur-marges-internes-ligne);
|
||||
}
|
||||
#page-accueil .storytelling__animation {
|
||||
--hauteur-animation: 90px;
|
||||
--taille-police: calc(var(--espace-xl) * 2.5);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
block-size: 100%;
|
||||
margin: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
mask-image: linear-gradient(var(--mask-direction, to right), hsla(0, 0%, 0%, 0), hsl(0, 0%, 0%) 20%, hsl(0, 0%, 0%) 80%, hsla(0, 0%, 0%, 0));
|
||||
}
|
||||
#page-accueil .storytelling__animation[hidden] {
|
||||
display: grid !important;
|
||||
/* visibility: hidden;
|
||||
opacity: 0; */
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
}
|
||||
#page-accueil .storytelling__animation.no-js {
|
||||
/* visibility: hidden;
|
||||
opacity: 0; */
|
||||
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
||||
}
|
||||
#page-accueil .storytelling__animation .animation-conteneur {
|
||||
overflow: visible;
|
||||
inline-size: 120%;
|
||||
block-size: var(--hauteur-animation);
|
||||
}
|
||||
#page-accueil .storytelling__animation .animation-texte {
|
||||
overflow: visible;
|
||||
font-size: var(--taille-police);
|
||||
font-weight: 600;
|
||||
text-shadow: 4px 4px 0 var(--couleur-blanc);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
|
||||
}
|
||||
#page-accueil .storytelling__image {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
min-height: var(--hauteur-conteneur);
|
||||
max-height: var(--hauteur-conteneur);
|
||||
inline-size: max-content;
|
||||
max-inline-size: 100%;
|
||||
min-block-size: var(--hauteur-conteneur);
|
||||
max-block-size: var(--hauteur-conteneur);
|
||||
}
|
||||
#page-accueil .storytelling__image[data-cache] {
|
||||
display: none;
|
||||
#page-accueil .storytelling__image[data-caché] {
|
||||
display: none !important;
|
||||
}
|
||||
#page-accueil .storytelling__image picture {
|
||||
max-height: inherit;
|
||||
max-block-size: inherit;
|
||||
}
|
||||
#page-accueil .storytelling__image img {
|
||||
scale: 0.9;
|
||||
max-height: inherit;
|
||||
scale: 0.95;
|
||||
max-block-size: inherit;
|
||||
margin: auto;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
}
|
||||
@media (scripting: none) {
|
||||
#page-accueil .storytelling__animation {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@media (width <= 700px) {
|
||||
#page-accueil {
|
||||
--conteneur-marges-internes-ligne: var(--espace-l);
|
||||
}
|
||||
}
|
||||
@media (width <= 500px) {
|
||||
#page-accueil {
|
||||
--conteneur-marges-internes-ligne: var(--espace-m);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (-moz-appearance: none) {
|
||||
#page-accueil .storytelling__animation {
|
||||
--taille-police: calc(var(--espace-xl) * 2.2);
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=page-accueil.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;EAEE;EAGA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page-accueil.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAQA;EACE;AAEA;AAAA;EAEA;;AAIF;AACE;AAAA;EAEA;;AAGF;EACE;EAGA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-accueil.css"}
|
||||
|
|
@ -1 +1 @@
|
|||
#page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);min-height:var(--hauteur-conteneur);max-height:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{min-height:inherit;max-height:inherit;place-items:center;overflow-y:scroll}#page-accueil .storytelling__conteneur{min-height:calc(var(--hauteur-conteneur)*13);padding:0 var(--espace-xl);flex-flow:column;display:flex}#page-accueil .storytelling__image{width:100%;min-height:var(--hauteur-conteneur);max-height:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-accueil .storytelling__image[data-cache]{display:none}#page-accueil .storytelling__image picture{max-height:inherit}#page-accueil .storytelling__image img{max-height:inherit;object-fit:contain;background:0 0;margin:auto;scale:.9}
|
||||
#page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-accueil .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur)*13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-accueil .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl)*2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right),#0000,#000 20%,#000 80%,#0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-accueil .storytelling__animation[hidden]{transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-accueil .storytelling__animation.no-js{transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-accueil .storytelling__animation .animation-conteneur{inline-size:120%;block-size:var(--hauteur-animation);overflow:visible}#page-accueil .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-accueil .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-accueil .storytelling__image[data-caché]{display:none!important}#page-accueil .storytelling__image picture{max-block-size:inherit}#page-accueil .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-accueil .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-accueil .storytelling__animation{--taille-police:calc(var(--espace-xl)*2.2)}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue