/* Theme Name: Difenair Theme URI: https://difenair.fr Author: Htag Digital Author URI: https://htag-digital.fr Description: Thème WordPress sur mesure (FSE) pour Difenair, spécialiste des équipements de protection individuelle de catégorie III à Rennes. Blocs de section sur mesure, aucune dépendance payante. Version: 0.9.1 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: difenair Tags: full-site-editing, block-patterns, custom-colors, custom-logo, custom-menu */ /* * Les styles globaux sont définis dans theme.json. * Ce fichier ne contient que ce que theme.json ne peut pas exprimer. */ :root { /* Marge latérale de la maquette, constante sur toutes les pages. */ --difenair-marge: 56px; /* Interlignes naturels des deux polices. On les écrit plutôt que de laisser « normal » : la valeur serait alors celle de la police de secours tant que la vraie n'est pas chargée, et le texte sauterait d'un pixel. Ces rapports, eux, ne dépendent que de la taille. Ils sont relevés sur la maquette et non estimés : 11,5 px de mono y donnent 15 px de ligne (1,3043) et 14 px de Schibsted en donnent 17 (1,21). Un rapport approché se voyait dès qu'un libellé passait à deux lignes — un pixel par ligne supplémentaire. */ --difenair-mono-interligne: 1.30435; --difenair-sans-interligne: 1.21; } /* --------------------------------------------------------------------------- Écrans étroits : les quatre seuils La maquette n'existe qu'en une largeur : 1440 px de contenu entre deux marges de 56 px, soit 1552 px de fenêtre. Il n'y a donc rien à relever au-dessous — tout ce qui suit est une adaptation, pas un relevé. Règle de travail : le rendu de bureau ne bouge pas. Aucune valeur de la maquette n'est modifiée ; ce qui s'adapte est écrit dans une requête de média, et la plus large d'entre elles commence sous 1552 px. Quatre seuils, les mêmes d'un bout à l'autre du thème : sous 1440 px portable — la navigation se resserre 1280 px et moins la navigation passe au menu déroulant 1024 px et moins tablette — les dispositions en vis-à-vis s'empilent, les grilles de trois colonnes et plus tombent à deux 640 px et moins mobile — une seule colonne partout Le premier seuil est le seul à exclure sa propre valeur : 1440 px est la largeur de la maquette elle-même, et à cette largeur c'est le rendu de la maquette qui doit s'appliquer, au pixel. D'où « width < 1440px » là où les autres disent « <= ». Les adaptations elles-mêmes sont regroupées en fin de fichier, et en fin de fichier pour chaque bloc. Seules les marges latérales sont ici : c'est une seule variable, dont tout le reste dépend. Les tailles de titre ne passent par aucun de ces seuils. Elles varient de façon continue entre 480 et 1440 px de fenêtre, sur la droite que WordPress applique aux tailles de theme.json. Voir le LISEZ-MOI. --------------------------------------------------------------------------- */ @media (width < 1440px) { :root { --difenair-marge: 48px; } } @media (width <= 1280px) { :root { --difenair-marge: 40px; } } @media (width <= 1024px) { :root { --difenair-marge: 32px; } } @media (width <= 640px) { :root { --difenair-marge: 20px; } } /* Les liens d'ancre — le sommaire du déroulé — glissent jusqu'à leur cible, sauf si le visiteur a demandé moins d'animations. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Couleur de texte appliquée depuis l'éditeur : WordPress la pose sur un * , que le navigateur surligne en jaune par défaut. */ mark.has-inline-color { background-color: transparent; } /* --------------------------------------------------------------------------- En-tête --------------------------------------------------------------------------- */ /* Dans la maquette, la navigation est posée par-dessus la photo de la * bannière : il n'y a pas de bande noire au-dessus d'elle. On sort donc * l'en-tête du flux — mais seulement quand la page commence bien par une * bannière, sinon il recouvrirait le contenu. */ .wp-site-blocks:has(> main > .difenair-hero:first-child) > header.wp-block-template-part, .wp-site-blocks:has(> main > * > .difenair-hero:first-child) > header.wp-block-template-part { position: absolute; inset: 0 0 auto 0; z-index: 20; } /* L'en-tête étant hors du flux, l'écart que WordPress laissait entre lui et * le contenu n'a plus lieu d'être : la bannière doit partir du haut. * * Sur les pages métier, l'en-tête reste dans le flux — la maquette ne le pose * pas par-dessus — mais l'écart de 24 px n'y a pas davantage sa place : la * bannière porte son propre retrait de 74 px. Sixième occurrence de cette * marge, voir le LISEZ-MOI. */ .wp-site-blocks:has(> main > .difenair-hero:first-child) > main, .wp-site-blocks:has(> main > * > .difenair-hero:first-child) > main, .wp-site-blocks:has(> main > .difenair-hero-metier:first-child) > main, .wp-site-blocks:has(> main > * > .difenair-hero-metier:first-child) > main, .wp-site-blocks:has(> main > .difenair-hero-article:first-child) > main { margin-top: 0; } /* Le logo de la maquette fait 34 px de haut, largeur libre. */ .difenair-header .wp-block-site-logo img { width: auto; height: 34px; } .difenair-header { position: relative; z-index: 10; gap: var(--wp--preset--spacing--60); /* Le retrait était écrit dans le gabarit, en style en ligne : aucune requête de média ne pouvait le reprendre. Il vient de la variable commune, comme celui des sections et du pied de page. */ padding: 26px var(--difenair-marge); } /* Navigation en pilule, reprise de la maquette. * * Deux pièges du bloc core/navigation à contourner : * - la classe personnalisée est recopiée sur le