sudara/alonetone

@mixin getHeightsFromRatio($ratio) {
  height: calc( #{$ratio} * #{$large-image-width});
  @media #{$zone-medium-image-switched-credits} {
    height: calc( #{$ratio} * #{$medium-image-width});
  }
  @media #{$zone-mobile-one-column} {
    height: calc( #{$ratio} * #{$small-image-width});
  }
}

$zone-smaller-font: 'only screen and (min-width: 630px) and (max-width: 849px)';
$zone-medium-image-switched-credits: 'only screen and (min-width: 440px) and (max-width: 629px)';
$zone-mobile-one-column: 'only screen and (max-width: 439px)';

$large-image-width: 238px;
$medium-image-width: 160px;
$small-image-width: 100px;

// Shared by both styles
.blank_slate_illustration {
  &.alec {
    background-image: image-url("illustrations/contributors/alec-talking.png");
    @include getHeightsFromRatio(1.3189);
  }
  &.jenya {
    background-image: image-url("illustrations/contributors/jenya-talking.png");
    @include getHeightsFromRatio(1.294);
  }
  &.sudara {
    background-image: image-url("illustrations/contributors/sudara-talking.png");
    @include getHeightsFromRatio(.796);
  }
  &.ben {
    background-image: image-url("illustrations/contributors/ben-talking.png");
    @include getHeightsFromRatio(1.2585);
    
  }
  &.samo {
    background-image: image-url("illustrations/contributors/samo-talking.png");
    @include getHeightsFromRatio(1.007);
  }
  &.manfred {
    background-image: image-url("illustrations/contributors/manfred-talking.png");
    @include getHeightsFromRatio(1.6369);
  }
}

.page_container_with_blank_slate_full_cloud {
  background-image: image-url("illustrations/backgrounds/contributor-less-noise.jpg");
  background-repeat: no-repeat;
  background-size: $site_max_width;
  background-position-x: 50%;
  background-position-y: $noise-background-position-y;
  position: relative;
  top: -48px;
  margin-bottom: -28px;
  .blank_slate {
    display: flex;
    padding-right: 10%;
    padding-left: 10%;
    box-sizing: border-box;
    min-height: $blank-slate-cloud-min-height;
    @media only screen and (max-width: 960px) {
      padding-left: 0;
      padding-right: 0;
    }
    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-self: center;
      @media #{$zone-mobile-one-column} {
        display: none;
      }
      .contributor_name, .contributor_title {
        display: none;
        @media #{$zone-medium-image-switched-credits} {
          display: block;
          padding-left: $baseline;
        }
      }
    }
    .right {
      margin-left: 7%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      @media #{$zone-mobile-one-column} {
        width: 100%;
        margin-left: 0;
        padding-left: $baseline / 2;
        padding-right: $baseline / 2;
      }
      .blank_slate_text {
        @include paragraph18();
        color: $grey900;
        a {
          text-decoration: underline;
          color: $orange600;
        }
        @media #{$zone-smaller-font} {
          font-size: 16px;
        }
        @media #{$zone-medium-image-switched-credits} {
          font-size: 14px;
          .contributor_name, .contributor_title {
            display: none;
          }
        }
        @media #{$zone-mobile-one-column} {
          font-size: 14px;
          .contributor_name, .contributor_title {
            display: none;
          }
        }
        #spacer {
          width: 0px;
          float: right;
        }
        #floater {
          width: $small-image-width;
          box-sizing: border-box;
          float: right;
          clear: right;
          display: none;
          @media #{$zone-mobile-one-column} {
            display: block;
          }
          .contributor_name, .contributor_title {
            display: block;
            font-size: 11px;
            text-align: center;
          }
        }
      }
    }
    .blank_slate_illustration {
      background-size: 100%;
      background-repeat: no-repeat;
      background-position-y: bottom;
      width: $large-image-width;
      @media #{$zone-medium-image-switched-credits} {
        width: $medium-image-width;
      }
      @media #{$zone-mobile-one-column} {
        width: $small-image-width;
      }
    }
    .contributor_name {
      line-height: 1.2;
      font-style: italic;
      color: $orange600;
    }
    .contributor_title {
      font-style: italic;
      font-size: 12px;
      color: $grey900;
    }
  }
}

.page_container_with_blank_slate_overlapping_content {
  background-image: image-url("illustrations/backgrounds/contributor-less-noise.jpg");
  background-repeat: no-repeat;
  background-size: $site_max_width;
  background-position-x: 50%;
  background-position-y: $noise-background-position-y;
  position: relative;
  top: -48px;
  .blank_slate {
    display: flex;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 50px;
    @media #{$one-column} {
      padding-left: $baseline / 2;
      padding-right: $baseline / 2;
    }
    .left {
      @media only screen and (max-width: 540px) {
        width: 40%!important;
        padding-bottom: 20px;
        align-self: center;
      }
      .blank_slate_illustration {
        background-size: 100%;
        background-repeat: no-repeat;
        background-position-y: bottom;
        height: 100%;
        min-width: 238px;
        @media only screen and (max-width: 540px) {
          min-width: auto;
          height: 0;
          padding-bottom: 144%;
        }
      }
      .contributor_name.mobile_only, .contributor_title.mobile_only {
        display: none;
        @media only screen and (max-width: 540px) {
          display: block;
          padding-left: $baseline;
        }
      }
    }
    .right {
      margin-left: 9%;
      @media #{$one-column} {
        width: 54%;
        margin-left: 20px;
      }
    }
    .blank_slate_text {
      padding-bottom: 50px;
      padding-top: 70px;
      @include paragraph18();
      color: $grey900;
      #spacer {
        display: none;          
      }
      #floater {
        display: none;
      }
      @media only screen and (max-width: 850px) {
        font-size: 16px;
      }
      @media #{$one-column} {
        padding-top: $baseline * 1.5;
        padding-bottom: $baseline * 1.5;
      }
      @media only screen and (max-width: 540px) {
        font-size: 14px;
        .contributor_name, .contributor_title {
          display: none;
        }
      }
      a {
        text-decoration: underline;
        color: $orange600;
      }
    }
    .contributor_name {
      line-height: 1.2;
      font-style: italic;
      color: $orange600;
    }
    .contributor_title {
      font-style: italic;
      font-size: 12px;
      color: $grey900;
    }
  }
}