entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 12 Releases Wiki Activity

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

This commit is contained in:
Thomas Jund 2022-05-04 18:01:25 +02:00
parent 77d5eb4bf0
commit bcb84f2263
2 changed files with 56 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
help/fr/misc-scss.page
View File

@ -63,6 +63,16 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
(plutôt que la largeur du contenu)</p></td>
<td><p><var>true</var></p></td>
</tr>
<tr>
<td><p><code>$header-logo-size</code></p></td>
<td><p>Taille du logo de l'entête. 2 valeurs sont attendues : largeur et hauteur (ex: <code>150px 75px</code>).</p></td>
<td><p><var>null</var></p></td>
</tr>
<tr>
<td><p><code>$show-site-title</code></p></td>
<td><p>Afficher le titre du site. Le titre est masqué par défaut lorsqu'un logo est défini. <code>true</code> ou <code>false</code></p></td>
<td><p><var>null</var></p></td>
</tr>
<tr>
<td><p><code>$footer-background</code></p></td>
<td><p>Couleur de fond du pied de page</p></td>

52
static/includes/_header.scss
View File

@ -1,5 +1,7 @@
$header-full-width-background: true !default;
$header-background-color: null !default;
$header-logo-size: null !default;
$show-site-title: null !default;
@mixin header-background {
body.has-header-background & {
@ -19,12 +21,50 @@ $header-background-color: null !default;
}
}
h1#logo.has-logo {
a {
background: transparent url(/assets/header:logo) center left no-repeat;
background-size: contain;
@mixin display-site-title($display) {
@if $display == false {
text-indent: -10000px;
min-width: 160px;
display: inline-block;
}
}
h1#logo {
& a {
$no-logo-site-title: if($show-site-title == false, false, true);
@include display-site-title($no-logo-site-title);
display: inline-block;
}
&.has-logo a {
background: transparent url(/assets/header:logo) center left no-repeat;
background-size: contain;
@if $header-logo-size {
$logo-width: nth($header-logo-size, 1);
$logo-height: null !default;
@if length($header-logo-size) > 1 {
$logo-height: nth($header-logo-size, 2);
}
display: inline-flex;
background-image: none;
background-position: bottom left;
&::before {
content: "";
display: block;
background: transparent url(/assets/header:logo) no-repeat;
background-size: inherit;
background-position: inherit;
flex: 0 0 auto;
width: $logo-width;
height: $logo-height;
margin-right: 1em;
}
} @else {
min-width: 160px;
}
$has-logo-site-title: if($show-site-title, true, false);
@include display-site-title($has-logo-site-title);
@if $has-logo-site-title {
align-items: last baseline;
}
}
}