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 // Site-banner-simple
// logo à gauche, titre à droite // ==========================================================
.site-id { $site-title-size-small: 1.5em;
$site-title-size-large: 2em;
a { $banner-hover-background: $gray-9;
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;
}
}
// 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 @@ ...@@ -3,7 +3,13 @@
Présentation 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 Exemple d’utilisation
...@@ -12,10 +18,9 @@ Exemple d’utilisation ...@@ -12,10 +18,9 @@ Exemple d’utilisation
```` html ```` html
<div class="container"> <div class="container">
<div class="site-id"> <div class="site-id">
<a href="#"> <img class="site-logo" src="logo.png" alt="">
<img class="site-logo" src="scampi.png" alt=""> <p class="site-title"><a href="#">Ôde à Scampi-Twig</a></p>
<p class="site-title">Nom du site</p> <p class="site-baseline">L'outil de construction de pages statiques qui vous manquait&nbsp;!</p>
</a>
</div> </div>
</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