Produits Entr'ouvert » Intégrations graphiques Publik

• toulouse-2022
  https://portail-parsifal.test.entrouvert.org/
• antibes
  https://portail-antibes.test.entrouvert.org/
• armentieres
  https://portail-armentieres.test.entrouvert.org/
• mnhn
  https://portail-mnhn.test.entrouvert.org/
• nantes
  https://portail-nantes-metropole.test.entrouvert.org/
• publik-famille-demo
  (pas trouvé d'instance)

Dans #69965 je propose un patch, mais uniquement pour Toulouse, parce que je ne sais pas comment traiter le problème de façon plus générale.

Parce que ça m'ennuie de voir proposé à Toulouse de contourner, j'ai jeté un œil et comme ça n'est pas noté dans ce ticket, je précise : le problème vient de $header-logo-size, quand c'est posé le logo est affiché via ::before, et c'est cette combinaison text-indent et ::before sur la balise qui fait que le text-indent apparait sans effet. Avec ::after le problème n'apparait pas. (mais ça ne résoud pas tout il y a quand même du grabuge de calcul sur le display: inline-flex et tout ça est bien étrange).

Pour le cas particulier Toulouse, faire sans $header-logo-size ne semble pas compliqué, genre,

--- a/static/toulouse-2022/_custom.scss
+++ b/static/toulouse-2022/_custom.scss
@@ -159,6 +159,9 @@ div#header, div#nav {
        &, & a {
                line-height: 0;
        }
+       a {
+               height: 54px;
+       }
        @media ($max-mobile-viewport) {
                &.has-logo {
                        padding-left: 0;
diff --git a/static/toulouse-2022/_vars.scss b/static/toulouse-2022/_vars.scss
index 67634602..6d40eb43 100644
--- a/static/toulouse-2022/_vars.scss
+++ b/static/toulouse-2022/_vars.scss
@@ -45,7 +45,6 @@ $mobile-limit: 1023px;
 $very-small-limit: 35em;
 $columns-gutter: 3rem;

-$header-logo-size: 201px 54px;

Safari n'applique text-indent que si contenu de la boite est inline_* ou du texte.
Si un enfant est en display block ou si les enfants sont des flex-items, le text-indent ne s'applique pas.

J'ai testé

• de masquer le site_title avec un `font-size: 0` en plus du text-indent. Ça semble fonctionner, mais ne permet plus de paramétrer la taille du logo en `em` et j'ai de gros doute côté a11y.
• d'ajouter un span autour du site_title pour permettre de le masquer avec .sr-only. Je privilégie cette piste. Je shoot les thèmes pour vérifier que tout va bien et je livre le patch

Au passage, je découvre que `align-items: last baseline` est buggé sous webkit, la proporiété est comprise mais non rendue. Je remplace par `flex-end`

(J'adore ce moteur de rendu)

En vrai, je ne comprend pas pourquoi l'ajout du span fait que le titre ne s'affiche.

L'ajout du span permet uniquement de cibler le texte, en excluant le pseudo element affchant le logo.
C'est `@extend .sr-only` qui masque le texte.

Automatic expiration