podcast-webseite/assets/sass/parts/_banner.scss

/* Banner */
#banner {
  background-attachment: fixed;
  background-color: _palette(accent2);
  background-image: url('/images/banner.jpg');
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
  min-height: 100vh;
  position: relative;
  text-align: center;
  z-index: (_misc(max-spotlight) + 1);

  @include breakpoint(tablet) {
    background-attachment: scroll;

    .goto-next {
      height: 7em;
    }
  }

  @include breakpoint(phablet) {
    box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
    min-height: calc(100vh - 44px);
  }

  &::before {
    content: '';
    display: inline-block;
    height: 100vh;
    vertical-align: middle;
    width: 1%;

    @include breakpoint(phablet) {
      height: calc(100vh - 44px);
    }
  }

  &::after {
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .content {
    display: inline-block;
    margin-right: 1%;
    max-width: 95%;
    padding: $size-wrapper-pad-tb;
    position: relative;
    text-align: right;
    vertical-align: middle;
    z-index: 1;

    @include breakpoint(laptop) {
      padding: $size-wrapper-pad-tb;
    }

    @include breakpoint(tablet) {
      padding: ($size-wrapper-pad-tb * 2) 0;
      text-align: center;
    }

    @include breakpoint(phablet) {
      padding: ($size-wrapper-pad-tb * 1.25) $size-wrapper-pad-lr ($size-wrapper-pad-tb * 1.5) $size-wrapper-pad-lr;
    }

    @include breakpoint(mobileonly) {
      padding: $size-wrapper-pad-tb ($size-wrapper-pad-lr * 1.25) ($size-wrapper-pad-tb * 1.75) ($size-wrapper-pad-lr * 1.25);
    }

    header {
      display: inline-block;
      vertical-align: middle;

      @include breakpoint(tablet) {
        display: block;
        margin: 0 0 _size(element-margin) 0;
        text-align: center;
      }

      h2 {
        font-size: 2.5em;
        margin: 0;
      }

      p {
        margin: (_size(element-margin) * 0.25) 0 0 0;
        top: 0;
      }
    }

    .image {
      border-radius: 0;
      display: inline-block;
      height: 18em;
      margin-left: 3em;
      vertical-align: middle;
      width: 18em;

      @include breakpoint(tablet) {
        margin: 0;
      }

      @include breakpoint(phablet) {
        height: 9em;
        width: 9em;
      }

      img {
        border-radius: 0;
        display: block;
        width: 100%;
      }
    }
  }
}

body.is-touch {
  #banner {
    background-attachment: scroll;
  }
}