.text-content() {
  line-height: 1.6em;

  font-size: 17px;

  code, kbd, pre, samp {
    font-size: 0.95em;
  }
}


.bi-blogpost.single {

  .introduction {
    margin-bottom: 30px;
  }

  .thanks {
    margin-bottom: 30px;
  }

  .figure {
    text-align: center;
    margin: 30px 0;

    img {
      max-width: 100%;
      border: solid 4px #F0F0F0;
      border-radius: 4px;
    }

    &.no-border {
      img {
        border: none;
      }
    }

    &.full-size img {
      max-width: 120%;
      margin: 0 -10%;
    }

    &.condensed-size img {
      max-width: 70%;
    }
  }

  pre {
    margin: 20px 0;
  }
}

.bi-text {
  .text-content();
}

.bi-blogpost {

  .content {
    .text-content();

    margin: 25px auto;
  }

  .figure {

    figcaption,
    .caption {
      color: #666;
      font-size: 0.85em;
      margin-top: 5px;
    }
  }

  h1 {
    margin-top: 50px;
    margin-bottom: 15px;

    line-height: 1.3em;

    a {
      text-decoration: none;
      color: @text-color;
    }
  }

  h2 {
    margin-top: 35px;
  }

  h3 {
    margin-top: 25px;
  }

  .read-more {
    font-size: 14px;
  }

  .read-more a,
  .author {
    text-decoration: none;
  }

  .meta {
    font-size: small;
  }
}

.bi-blog-footer {
  margin: 20px 0;
}


@media (max-width: 1300px) {

  .bi-blogpost.single {

    .figure.full-size {

      img {
        max-width: 110%;
        margin: 0 -5%;
      }

    }
  }

}

@media (max-width: 960px) {

  .bi-blogpost.single {

    .figure,
    .figure.full-size {

      img {
        max-width: 100%;
        margin: 0;
      }

    }

    .figure.condensed-size {
      img {
        max-width: 100%;
      }
    }
  }

}


.releases {
  margin-top: 15px;
}

.release-badge {

  display: inline-block;
  margin: -1px 0;

  font-size: small;

  text-decoration: none;
  font-weight: normal;

  &:hover,
  &:active {
    text-decoration: none;

    .project {
      background: @color-bpmnio-green;
    }

    .version {
      background: @color-bpmnio-gray;
    }
  }

  .project,
  .version {
    padding: 2px 6px;
  }

  .project {
    background: lighten(desaturate(@color-bpmnio-green, 20%), 10%);
    color: white;
    border-radius: 3px 0 0 3px;
  }

  .version {
    background: lighten(desaturate(@color-bpmnio-gray, 20%), 10%);
    color: white;
    border-radius: 0 3px 3px 0;
  }

  &:not(.with-version) {
    .project {
      border-radius: 3px;
    }
  }
}