lbry.com/web/scss/_cover.scss

@import "global";

.cover
{
  width: 100%;
  background-size: cover;
  .meta-large [class*="icon"]
  {
    padding-left: 5px;
    padding-right: 5px;
  }
}
.cover-simple
{
  width: 100%;
}
.cover-full
{
  height: 100vh;
  font-size: 1.4em;
}
@media (max-width: $mobile-width-threshold) {
  .cover { padding: $spacing-vertical $spacing-vertical * 2 / 3; }
  .cover-title { font-size: 2.8em; margin-bottom: $spacing-vertical; }
}
@media (min-width: $mobile-width-threshold) {
  .cover-title { font-size: 4.0em; }
}
@media (max-width: $max-content-width) and (min-width: $mobile-width-threshold) {
  .cover { padding: $spacing-vertical * 1.5 $spacing-vertical * 2; }
  .cover-column { padding-left: $spacing-vertical * 0.5; padding-right: $spacing-vertical * 0.5; }
}
@media (min-width: $max-content-width) {
  .cover { padding: $spacing-vertical * 1.5 $spacing-vertical * 3; }
  .cover-column { padding-left: $spacing-vertical * 1.5; padding-right: $spacing-vertical * 1.5; }
}

.cover-stretch-wrap
{
  @include display-flex();
  @include flex-direction(column);
  > .cover
  {
    @include flex(1);
  }
}
.cover-center
{
  @include flex-direction(column);
  @include absolute-center();
}
.cover-dark
{
  color: #ddd;
  .cover-title { color: white; }
}
.cover-light
{
  color: #444;
  .cover-title { color: #111; }
}
.cover-light-alt
{
  color: #333;
  .cover-title { color: #000; }
}
.cover-dark-grad
{
  @include linear-gradient(darken($color-primary, 5), lighten($color-primary, 5));
}
.cover-light-alt-grad
{
  @include linear-gradient(darken($color-light-alt, 5), lighten($color-light-alt, 5));
}

.cover-title, .cover-subtitle
{
  text-shadow: 0 0 6px rgba(0,0,0,0.8);
}
.cover-title
{
  line-height: 1.4;
}
.cover-subtitle
{
  margin: $spacing-vertical 0 $spacing-vertical;
  font-size: 1.2em;
}