Produits Entr'ouvert » Intégrations graphiques Publik

Proposition :

$header-logo-size : Taille du logo de l'entête. 2 valeurs sont attendues : largeur et hauteur

$header-logo-size: 150px 75px;

$show-site-title: Bool. Afficher le titre du site. Le titre est masqué par défaut lorsqu’un logo est défini.

• J'ai placé le logo dans un pseudo-element, pour plus facilement le positionner par rapport au titre lorsque les 2 sont visibles et migrer plus simplement le code si le logo évolue un jour vers un markup <img>
• Le logo et le titre sont alignés sur `last baseline` par défaut.
• J'ai isolé au max avec le code existant. Seul impact sur l'existant est le passage de `#logo a` en `display: inline-block` pour faire fonctionner $show-site-title mais en cas de ressource logo non déclarée.
• Et ne pas oublier que le logo est toujours en background-image, il ne devrait pas, il devrait être contenu et non pas décoration. Seul le titre du site supporte le contenu, il doit donc être explicite en reprenant le nom de la collectivité.

Avec ce patch, quelques lignes de CSS sont maintenant suffisants pour organiser le logo et le titre.

Quelque exemples¶

logo-size-default.png

$header-logo-size: 143px 95px;
$show-site-title: true;
#top {
    padding-top: 25px;
    padding-bottom: 25px;
}

h1#logo {
    &.has-logo a {
        font-size: 25px;
    }
}

vertically-center.png

J'ai réduit la font-size pour bien montrer que c'est centré verticallement

h1#logo {
    &.has-logo a {
        font-size: 15px;
        align-items: center;
    }
}

direction-columns.png

h1#logo {
&.has-logo a {
flex-direction: column;
align-items: start;
}
}

columns-center.png

En 5 lignes de code. Il faut passer de inline-flex à flex pour passer le bloc sur toute la largeur. Et background-position: center est là par prudence, car la var $logo-size définie une aire dans laquelle le logo va proportionnellement se ranger (background-size: contain)

h1#logo {
    &.has-logo a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background-position: center;
    }
}

Si on met une grande hauteur de logo et qu'on active show-site-tile, align-items: last-baseline décalle le logo vers le haut en dehors de l'écran. Je ne sais pas si c'est une solution convenable de mettre les width et height sur le a plutôt que le a::before.

Et pourquoi faire

    $no-logo-site-title: if($show-site-title == false, false, true);
    @include display-site-title($no-logo-site-title);

    ...

    $has-logo-site-title: if($show-site-title, true, false);
    @include display-site-title($has-logo-site-title);
    @if $has-logo-site-title {

    ...

plutôt que

    @include display-site-title($show-site-title);

    ...

    @include display-site-title($show-site-title);
    @if $show-site-title {

    ...

J'ai fait un tour des intégrations graphiques, je n'ai rien vu de cassé.

Effectivement, je testais avec clapotis-les-canards qui définit une taille pour le logo dans le _custom.css, ça fonctionne si on la retire. Et j'avais mal lu, c'est effectivement clair si $show-site-title est à null.

commit bcb84f2263a61f80f7c101f1dd349b6ad6d27649
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed May 4 18:01:25 2022 +0200

    scss: introduce $header-logo-size & $show-site-title

(référence de ticket absente)