Commit 6ac14a04 authored by Anne Cavalier's avatar Anne Cavalier

#52 site-banner-simple : ajout d'une baseline, gestion du responsive + changelog et doc

parent 1e5a69c2
// site-banner-simple
// logo à gauche, titre à droite
// Site-banner-simple
// ==========================================================
.site-id {
$site-title-size-small: 1.5em;
$site-title-size-large: 2em;
a {
display: table;
width: 100%;
&:link,
&:visited {
text-decoration: none;
}
}
}
.site-logo,
.site-title {
display: table-cell;
vertical-align: middle;
line-height: 1;
}
.site-logo {
max-width: 100%;
padding-right: 1em;
}
.site-title {
font-size: 1.5em;
@include media-breakpoint-up(medium) {
font-size: 2em;
}
}
$banner-hover-background: $gray-9;
// styles
@import 'style-site-banner-simple';
// site-banner-simple
// ====================
.site-id {
position: relative;
&:hover {
background-color: $banner-hover-background;
}
&::after {
content: "";
clear: both;
display: table;
}
}
.site-logo {
float: left;
margin: 0 1em 1em 0;
max-width: 30%;
}
.site-title {
margin-top: 0;
font-size: $site-title-size-small;
line-height: 3;
@include media-breakpoint-up(medium) {
font-size: $site-title-size-large;
line-height: 1.5;
}
a {
text-decoration: none;
&::after {
position: absolute;
content: "";
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
}
.site-baseline {
clear: left;
@include media-breakpoint-up(medium) {
clear: none;
}
}
......@@ -3,7 +3,13 @@
Présentation
-------------
Affichage simple d’une bannière avec logo à gauche et le titre du site à côté.
Affichage simple d’une bannière avec logo, titre et baseline.
Responsive
-------------
Sur mobile, la baseline est sous le logo et le titre ; sur les plus grandes résolutions, la baseline se positionne sous le titre et le logo est calé à gauche.
Exemple d’utilisation
......@@ -12,10 +18,9 @@ Exemple d’utilisation
```` html
<div class="container">
<div class="site-id">
<a href="#">
<img class="site-logo" src="scampi.png" alt="">
<p class="site-title">Nom du site</p>
</a>
<img class="site-logo" src="logo.png" alt="">
<p class="site-title"><a href="#">Ôde à Scampi-Twig</a></p>
<p class="site-baseline">L'outil de construction de pages statiques qui vous manquait&nbsp;!</p>
</div>
</div>
````
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment