<div class="c-banner-adv c-banner-adv--leaderboard c-banner-adv--leaderboard-colored">
<div class="c-banner-adv__inner c-banner-adv__inner--desktop">
<a href="http://www.mit.gov.it/conferenza-nazionale" target="_blank">
<img src="../../images/banner-adv/728x90.jpg" alt="">
</a>
</div>
<div class="c-banner-adv__inner c-banner-adv__inner--mobile">
<a href="http://www.mit.gov.it/conferenza-nazionale" target="_blank">
<img src="../../images/banner-adv/banner-assaeroporti-340x150.jpg" alt="">
</a>
</div>
</div>
<div class="c-banner-adv {{ modifier }}">
<div class="c-banner-adv__inner c-banner-adv__inner--desktop">
<a href="http://www.mit.gov.it/conferenza-nazionale" target="_blank">
<img src="{{ path img-path }}" alt="">
</a>
</div>
<div class="c-banner-adv__inner c-banner-adv__inner--mobile">
<a href="http://www.mit.gov.it/conferenza-nazionale" target="_blank">
<img src="{{ path '/images/banner-adv/banner-assaeroporti-340x150.jpg' }}" alt="">
</a>
</div>
</div>
{
"modifier": "c-banner-adv--leaderboard c-banner-adv--leaderboard-colored",
"img-path": "/images/banner-adv/728x90.jpg"
}
$leaderboard-width: remify(728px);
$box-width: remify(300px);
$superbanner-width: remify(970px);
.c-banner-adv {
text-align: center;
margin: remify(32px) 0;
grid-column: main;
}
/*------------------------------------*\
Display rules for Leaderboard, Superbanner, Box
\*------------------------------------*/
.c-banner-adv--leaderboard,
.c-banner-adv--superbanner,
.c-banner-adv--box {
.c-banner-adv__inner--mobile {
@include min-screen($leaderboard-width) {
display: none;
}
}
.c-banner-adv__inner--desktop {
display: none;
@include min-screen($leaderboard-width) {
display: block;
}
}
}
/*------------------------------------*\
Box
\*------------------------------------*/
.c-banner-adv--box {
margin: 0;
}
/*------------------------------------*\
Leaderboard colored
\*------------------------------------*/
.c-banner-adv--leaderboard-colored {
margin: 0;
background-color: primary(night, 120);
iframe {
margin: remify(8px) 0;
}
}
I banner leaderboard
, leaderboard-colored
e superbanner
mostrano nella versione mobile un banner 300x100.
La versione box
invece non ha un versione mobile.
Banner | Desktop | Mobile |
---|---|---|
leaderboard | 728x90 | 300x100 |
leaderboard-colored | 728x90 | 300x100 |
box | 300x250 | n.d. |
superbanner | 970x250 | 300x100 |