src/styles/components/explore.scss
.explore {
display: flex;
flex-flow: column;
height: 100%;
}
.explore-top {
border-bottom: 1px solid $border-on-white;
}
.explore-top a {
display: inline-block;
padding: 10px;
text-decoration: none;
}
.explore-collections {
padding-bottom: 10px;
overflow-x: hidden;
overflow-y: scroll;
}
.explore-carousel {
padding: 10px 0 10px 10px;
border-bottom: 1px solid $border-on-white;
}
.poster {
// IMDB aspect ratio
@extend .mask;
overflow: hidden;
margin-right: 10px;
min-width: 160px;
height: calc(160px / 0.675);
background: url(http://thetvdb.com/banners/posters/300989-1.jpg) center center;
background-size: cover;
border-radius: 4px;
}
.poster-ovl {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.6) 100%);
}
.poster-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
}
.poster-beat {
padding-bottom: 2px;
color: transparentize(#fff, 0.2);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.poster-title {
color: #fff;
font-weight: 700;
line-height: 1;
}
.poster-meta {
margin-top: 8px;
padding-top: 8px;
width: 100%;
color: transparentize(#fff, 0.2);
font-size: ms(0);
border-top: 1px solid transparentize(#fff, 0.5);
}