_rsce_hero.scss

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

• .slim für eine reduzierte Höhe
• .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

rsce-templates/_rsce_hero.scss

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

$img-height: 70vh;
$img-height-slim: 40vh;
// $wrapper-max-inline-size: $wrapper-extra-wide;

// template mod_article_no_inside
.mod_article.hero {
  padding-block: unset;
}

.content-rsce-hero {
  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_image {
    grid-row: 1/2;
    grid-column: 1/4;
    figure {
      inline-size: unset;
    }
    img {
      width: 100%;
      height: $img-height;
      object-fit: cover;
      // fallback if img can't be loaded
      background-color: $color-neutral-200;
      // ----------------
      @media (width < $tweakpoint-40) {
        height: 50vh;
      }
      @media (width < $tweakpoint-30) {
        height: 40vh;
      }
    }
    figcaption {
      display: none;
    }
  }
  .hero_text {
    grid-row: 1/2;
    grid-column: 2/3;
    // balance the optical height
    margin-block-end: clamp(1.5rem, 0.333rem + 4.167vw, 3rem);
    // 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;
      }
    }
    // ----------------
  }
}

// floor-fade only for small viewports
// @media (width < $tweakpoint-40) {
//   .content-rsce-hero {
//     &::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;
//     }
//   }
// }

// slim hero
.content-rsce-hero.slim {
  img {
    height: $img-height-slim;
  }
}

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

// color-overlay/tinted image
.content-rsce-hero.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.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;
  }
}