Template:Banner/styles.css
Aspetto
.banner-image {
position: relative;
overflow: hidden;
max-width: 1125px;
height: auto;
margin-bottom: .6em;
}
.banner-image img {
max-width: 100%;
height: auto;
}
.banner-box {
position: absolute;
z-index: 2;
margin-top: 2.5em;
color: white;
width: 50%;
min-width: 20em;
text-shadow: black 0.3em 0.3em 1em, black -0.1em -0.1em 1em;
/* Text size will be 1% of page width */
font-size: 1vw;
/* Line height will be 2.4% of page width */
line-height: 2.4vw;
}
.banner-box-wide {
width: 80%
}
.banner-box-left,
.banner-box-right {
padding: 8px 7px;
background: rgb(16,16,16);
background: rgba(0,0,0,0.3);
border-radius: 4px;
}
.skin-vector .banner-box-left,
.skin-vector .banner-box-right {
width: 40%;
}
.banner-box-left {
left: 3%;
text-align: left;
}
.banner-box-right {
right: 3%;
text-align: right;
}
.banner-box-right .name,
.banner-box-right .type,
.banner-box-right .quote {
float: none;
}
.banner-box a {
color: white !important;
font-weight: bold;
}
.banner-box .name, .mobile-banner-box .name {
font-size: 2.5em;
white-space: nowrap;
line-height: 1.2em;
margin: 0;
padding: 0;
}
.banner-box .type {
font-size: 2em;
margin: 0;
padding: 0;
}
.banner-box .quote {
line-height: 1.2em;
}
.banner-image-largescreen { display: block; }
.mobile-banner-box { display: none; }
@media (max-width: 720px) {
.banner-image-largescreen { display: none; }
.mobile-banner-box { display: block; }
}