Contents

$center: transparentize($dark, 0.3);
//$edges: transparentize(darken($dark, 15%), 0.15);
$gradient-top-left: transparentize(darken(saturate(adjust-hue($dark, -10deg), 10%), 10%), 0.3);
$gradient-bottom-right: transparentize(lighten(saturate(adjust-hue($dark, 10deg), 5%), 5%), 0.15);

.hero {
  background-size: cover;
  background-position: center center;
  --overlay-center: #{$center};
  --overlay-top-left: #{$gradient-top-left};
  --overlay-bottom-right: #{$gradient-bottom-right};

  &.rainbow {
    --overlay-center: rgba(212, 133, 165, 0.7);
    --overlay-top-left: rgba(6, 52, 29, 0.6);
    --overlay-bottom-right: rgba(18, 36, 117, 0.85);
  }

  .cover-overlay {
    margin: -1px;
    background-image: linear-gradient(141deg, var(--overlay-top-left) 0%, var(--overlay-center) 65%, var(--overlay-bottom-right) 100%);
  }

  .title {
    text-shadow: 0px 2px 3px transparentize($black, 0.5);
  }

  .subtitle {
    text-shadow: 0px 1px 2px transparentize($black, 0.8);
  }
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
bulmatown-1.0.2	components/bulmatown/hero.scss
bulmatown-1.0.1	components/bulmatown/hero.scss
bulmatown-1.0.0	components/bulmatown/hero.scss