Corrige l’alignement vertical d’une partie du logo

[bboulesteix]

Closes etalab/data.gouv.fr#112

Cette pull-request remet sur la même ligne le doc et le data.gouv.fr qui, une fois réunis, forment le logo de doc.data.gouv.fr. Le spanqui contient le doc était décalé vers le bas dans le plan vertical.

---

Problème

Le problème vient sans doute de : https://github.com/etalab/template.data.gouv.fr, où nous essayons d’être malins en construisant à la main le logo associé à chaque sous domaine de data.gouv.fr — par exemple : doc.data.gouv.fr ou geo.data.gouv.fr.

Voici le code en question :

<a class="navbar__home" href="index.html">
  <img class="navbar__logo" src="images/logo-marianne.svg" alt="template.data.gouv.fr">
  <span class="navbar__domain">template</span> #Nom du sous-domaine
  <img src="images/pointdatagouvfr.svg" class="navbar__gouvfr" alt="data.gouv.fr">
</a>

Cette façon d’industrialiser la création du logo, en séparant la Marianne, du <span>, du reste du logo, bien que séduisante sur le papier, présente quelques problèmes :

1. L’alignement vertical du logotype (la partie textuelle du logo) et du monogramme (Marianne) n’est pas parfait, le logotype est un peu trop bas (voir capture ci-dessous) ;
2. Les couleurs ne sont pas cohérentes, les noirs ne sont pas les mêmes (entre le texte du logotype et le texte qui figure sous la Marianne.

Solution proposée

À l’avenir, créer un fichier .svg propre qui contient le logo de chaque sous domaine de data.gouv.fr — il n’y en a pas tant que ça au total — et laisser chaque dépôt Jekyll prendre la main sur la partie du thème qui contrôle le logo. Pour l’anecdote, c’est déjà ce que fait : http://geo.data.gouv.fr.

[thimy]

Ceci est dû à une différence d'alignement selon le navigateur utilisé. A l'origine il y avait un logo propre, mais la solution du préfixe dynamique avait été proposée pour éviter de devoir demander un nouveau logo pour chaque nouveau domaine. Je laisse le consensus décider de ce que l‘on préfère faire.

[bboulesteix]

Merci d’avoir pris le temps de me répondre @thimy. 👍

Pour te répondre à mon tour :

Ceci est dû à une différence d'alignement selon le navigateur utilisé.

Hum, de mon côté, je ne vois pas de décalage sur https://template.data.gouv.fr, contrairement à ce que je constatais sur https://doc.data.gouv.fr, en utilisant pourtant le même navigateur — Safari sur Mac. Je pense donc que le pépin vient de https://doc.data.gouv.fr, ou du moins des instances du thème qui semblent mal digérer le -webkit-padding-after qui provient du template. Mais je dis peut-être des bêtises. 🤔

Ensuite, pour la solution à adopter :

A l'origine il y avait un logo propre, mais la solution du préfixe dynamique avait été proposée pour éviter de devoir demander un nouveau logo pour chaque nouveau domaine.

Je veux bien créer un logo spécifique pour chaque sous-domaine. 🙂 Ce n’est pas la mer à boire.