sudara/alonetone

View on GitHub
app/assets/stylesheets/components/illustrations.scss

Summary

Maintainability
Test Coverage
img.themeable{
  display: block;
  &.hidden {
    display:none;
  }
}

.gift {
  margin: 0 auto 0 auto;
  max-width: 960px;
  padding-top: 36px;
  h1 {
    @include title36();
    color: $white;
    text-align: center;
    padding: 0px 12px;;
    margin: 0;
    @media #{$mobile} {
      font-size: 24px;
    }
  }
  h2 {
    @include title18();
    margin-top: 6px;
    padding: 0px 12px;;
    text-align: center;
    @media #{$mobile} {
      font-size: 14px;
    }
  }
  .gift_image {
    margin-top: $baseline;
    background-size: contain;
    width: 100%;
  }
}

body.not_found,
body.error,
body.no_results {
  main {
    margin-top: 0;
    padding-bottom: 0;
  }
  footer#site_footer {
    padding-top:0;
  }
}

body.error {
  main {
    background-color: #e02a02;
    .sub_nav {
      top: 0;
    }
    .gift {
      width: 100%;
      max-width: none;
      @media #{$responsive} {
        max-height: 993px;
        overflow-y: hidden;
      }
    }
    .gift_image {
      height: 460px;
      background: no-repeat image-url("illustrations/500-extended.png");
      background-position: center center;
      background-size: 2000px 460px;
      position: relative;
      margin-top: 40px;
      margin-bottom: 40px;
    }
  }
}

body.no_results {
  main {
    .sub_nav {
      display: none;
    }
    background-color: #fed1b0;
    h1.gift_heading {
      color: $black;
      font-size: 24px;
      @media #{$mobile} {
        font-size: 24px;
      }
    }
    .gift_image {
      background-image: image-url("illustrations/no-results.jpg");
      padding-bottom: 60.57%;
    }
  }
}

body.not_found {
  main {
    .sub_nav {
      display: none;
    }
    background-color: #f04e1a;
    .gift_image {
      background-image: image-url("illustrations/404.png");
      padding-bottom: 71.73%;
    }
  }
}