public-health-ch/publichealth/static/css/modules/_banner.scss
2019-08-19 10:40:46 +02:00

263 lines
4.7 KiB
SCSS

// Carousel
#myCarousel {
// display: none;
background: $gray-lighter;
.item {
background-color: lighten($brand-primary, 10%);
min-height: 300px;
img {
height: 300px;
background-size: cover;
background-position: center;
width: 100%;
}
h3 {
text-transform: uppercase;
font-weight: 300;
}
p {
line-height: 1.2;
width: 80%;
margin: 0 auto;
}
.btn {
margin-top: 20px;
}
}
.nav-thumbs {
list-style: none;
display: flex;
margin: 0;
padding: 0;
text-align: center;
li {
float: left;
width: 25%;
&.active {
background-color: $brand-primary;
a {
color: white;
}
}
.glyphicon {
display: block;
}
}
.title {
text-transform: uppercase;
font-weight: 300;
text-decoration: none;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
small {
font-weight: 500;
text-transform: none;
display: block;
font-size: .7em;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
&.nav-justified > li > a {
border-radius: 0px;
}
}
@include max-screen($screen-xs-max) {
.nav-thumbs {
.title {
font-size: .7em;
}
}
}
}
/* Home page banner background */
body.template-frontpage {
background: $gray-lighter;
.home_page section:nth-child(even) { background: white; }
}
/* Page header */
$banner-height: 700px;
#banner, #carousel-banner {
padding-top: 0 !important;
padding-bottom: 0em;
h3, p, button {
color: #333;
text-shadow: none;
text-align: left;
}
p {
font-size: 90%;
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
footer p {
color: black;
text-align: left;
font-size: 110%;
margin-top: 2em;
}
}
.carousel-inner {
padding-bottom: 2.5em;
.item {
height: $banner-height;
position: relative;
background-color: white;
img {
width: 100%;
height: $banner-height;
overflow: hidden;
display: block;
background-size: cover;
background-position: center;
opacity: 1;
}
.carousel-caption {
background-color: white;
padding: 2em;
bottom: -1em;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
h3 {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
}
}
.slick-dots {
bottom: 50px;
li {
margin: 0;
button {
box-shadow: none;
}
}
}
}
.arrow {
color: white;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
z-index: 1;
position: absolute;
display: block;
height: 30px;
width: 30px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
&.left {
left: 30px;
}
&.right {
right: 30px;
}
&:before {
font-size: 30px;
}
}
.slick-list {
overflow: visible;
}
.slick-prev::before, .slick-next::before {
color: inherit;
}
// Carousel gallery
$gallery-height: 550px;
.carousel-inner {
padding-bottom: 0;
.item {
height: $gallery-height;
img {
width: 100%; // TODO: reduce width to try to use the Variable Width slick configuration
height: $gallery-height;
}
}
}
@include max-screen(1000px) {
.slick-dots { display: none !important; }
}
@include max-screen(480px) {
.navbar-pre .navbar-nav,
#carousel-banner {
.carousel-caption { left: 0px; right: 0px; overflow-x: hidden; }
.carousel-inner { margin-bottom: 0px; }
}
}
// Home page intro link as button
#banner .rich-text h4 {
float: right;
margin-left: 1em;
margin-right: 15px;
text-align: center;
}
#banner .rich-text h4 a:active {
border: none;
opacity: 1.0;
background-color: #eee;
border-bottom: 0px;
border-right: 0px;
border-top: 2px solid lightgrey;
border-left: 2px solid lightgrey;
}
#banner .rich-text h4 a:hover {
color: $brand-primary;
opacity: 0.9;
background-color: white;
text-shadow: 2px 2px 4px lightgrey;
}
#banner .rich-text h4 a {
text-decoration: none;
font-weight: 600;
padding: 1em;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
background-color: #f0f0f0;
color: $brand-primary;
/*
// Outline logo
padding-left: 100px;
background-image: url(../images/logo-blueoutline.png);
background-repeat: no-repeat;
background-size: contain;
background-position: -20px;
*/
}