_rsce_hero-video.scss

1. Artikeltemplate: mod_article_no_inside
2. Artikelklasse: hero video
3. verfügbare Klassen für das Inhaltselement .content-rsce-hero-video:

• .text-shadow Schatten für Text für bessere Lesbarkeit
• .overlay Bild wird ganzflächig leicht abgedunkelt
• .floor-fade Text im unteren Bildbereich wird mit einem dunklen Farbverlauf hinterlegt

Caution

Frage .hero_video braucht eine height, damit object-fit: cover bei video funktioniert. Wieso ist das bei .hero_image anders?

rsce-templates/_rsce_hero-video.scss

@use "../abstracts/" as *;

$video-height: 70vh;

.mod_article.hero.video {
  background-color: $color-neutral-400;
}

.content-rsce-hero-video {
  display: grid;
  // center hero-content within $wrapper:
  grid-template-columns: 1fr minmax(auto, $wrapper-max-inline-size) 1fr;
  grid-column-gap: $wrapper-min-margin-inline;

  // grid creates a stacking context - if there's text in the hero,
  // the text will be on top of a sticky header when scrolling
  // so we have to isolate it:
  // https://www.joshwcomeau.com/css/stacking-contexts/
  isolation: isolate;

  .hero_video {
    grid-row: 1/2;
    grid-column: 1/4;
    height: $video-height;
    @media (width < $tweakpoint-40) {
      height: 50vh;
    }
    @media (width < $tweakpoint-30) {
      height: 40vh;
    }
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      // fallback if video can't be loaded
      background-color: $orange--bg;
    }
  }
  .hero_text {
    grid-row: 1/2;
    grid-column: 2/3;
    // balance the optical height
    margin-block-end: clamp(1.5rem, 1.143rem + 0.952vw, 2rem);
    // adjust the text-position
    // and align accordingly:
    &.left {
      justify-self: start;
      align-self: flex-end;
      text-align: left;
    }
    &.center {
      justify-self: center;
      align-self: flex-end;
      text-align: center;
    }
    &.right {
      justify-self: end;
      align-self: flex-end;
      text-align: right;
    }
    &.center-vh {
      justify-self: center;
      align-self: center;
      text-align: center;
      // reset the optical height:
      margin-block-end: unset;
    }
    &.custom {}

    // text styles
    h1 {
      margin-block-end: unset;
      font-size: $font-size-hero;
      font-weight: $font-weight-bold;
      color: $color-neutral-000;
      line-height: 1.1;
    }
    p {
      margin-block-end: unset;
      max-width: unset;
      font-weight: $font-weight-bold;
      font-size: clamp(1rem, 0.611rem + 1.389vw, 1.5rem);
      color: $color-neutral-000;
      @supports (text-wrap: balance) {
        text-wrap: balance;
      }
    }
  }
}

// text-shadow
.content-rsce-hero-video.text-shadow {
  h1,
  p {
    text-shadow: $text-shadow-simple;
  }
}

// color-overlay/tinted image
.content-rsce-hero-video.overlay {
  &::after {
    grid-row: 1/2;    // same as hero-image
    grid-column: 1/4; // same as hero-image
    content: '';
    background: linear-gradient(
      $background-opacity-light,
      $background-opacity-light
    );
  }
  .hero_text {
    position: relative;
    z-index: 1;
  }
}

// floor-fade
.content-rsce-hero-video.floor-fade {
  &::after {
    grid-row: 1/2;    // same as hero-image
    grid-column: 1/4; // same as hero-image
    content: '';
    background: linear-gradient(
      hsl(0 0% 13% / 0),
      hsl(0 0% 13% / 0.05),
      hsl(0 0% 13% / 0.1),
      hsl(0 0% 13% / 0.15),
      hsl(0 0% 13% / 0.2),
      hsl(0 0% 13% / 0.25),
      hsl(0 0% 13% / 0.3),
      hsl(0 0% 13% / 0.35),
      hsl(0 0% 13% / 0.4),
      hsl(0 0% 13% / 0.5),
      hsl(0 0% 13% / 0.6),
      hsl(0 0% 13% / 0.7),
    )
  }
  .hero_text {
    position: relative;
    z-index: 1;
  }
}