/**
 * 博文详情
 *
 **/
@import "../../../../_public/less/_articleGithub.less";

.blog-detail {
  font-size: 1rem;
  background: #fff;
  header { 
    min-height: 160px;
    max-height: 360px;
    position: relative;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    &.no-cover {
      background: #1f3747;
      background-image: -webkit-linear-gradient(left, #1f3747 0%, #293d31 100%);
    }
    .header-body {
      padding: 110px 20px 80px;
      .title {
        margin-bottom: .5em;
        line-height: 1.2;
        font-size: 2em;
        font-weight: 500;
        color: #fff;
      }
      .article-info {
        width: 62%;
        margin-bottom: 3em;
        color: #fff;
        opacity: .8;
      }
    }
  }
  .article-section {
    display: flex;
    .article-section-body {
      flex-grow: 1;
      width: 200px;
      padding: 5em 6em 5em 1em;
    }
    .article-section-side {
      display: flex;
      width: 340px;
      border-left: 1px solid #edeff3;
      .article-section-body {
        margin-right: -300px;
        padding: 30px 320px 20px 20px;
        background: #f9fafb;
      }
      .toc-content {
        width: 220px;
        padding: 20px 10px 40px;
        .title {
          margin-bottom: 10px;
          line-height: 2em;
          font-size: 15px;
          color: #c2ccd6
        }
        a {
          display: block;
          margin-bottom: 10px;
          line-height: 1.2em;
          font-size: 14px;
          color: #8599ad;
          transition: .2s;
          &:hover {
            color: #407fbf;
          }
        }
      }
    }
    .caption {
      padding: 0 20px;
      h1 {
        margin-bottom: .4em;
        font-size: 1.8rem;
      }
      p {
        font-size: 14px;
      }
    }
    .article {
      background: #fff;
    }
    footer {
      margin: 0 20px;
      padding: 10px 20px;
      background: #f7f8f8;
      p {
        font-size: 14px;
        color: #5c6870;
      }
      a {
        font-size: 14px;
        color: #5c6870;
        &:hover {
          text-decoration: underline
        }
      }
    }
  }
  .sns-share {
    padding: 6em 0 2em;
    text-align: center;
    button {
      display: inline-block;
      vertical-align: top;
      width: 80px;
      height: 80px;
      margin: 0 1em;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      font-size: 1.2rem;
      color: #fff;
      transition: .3s ease-in-out;
      opacity: .8;
      i {
        display: block;
        padding-top: 10px;
        line-height: 30px;
        font-size: 30px;
      }
      span {
        display: block;
        line-height: 30px;
        font-size: 14px;
      }
      &:focus {
        outline: none
      }
      &:hover {
        opacity: 1;
      }
      &.share-to-weibo{
        background: #fa7d3c;
        background: -webkit-linear-gradient(top, #fa7d3c 0%, #f55f10 100%);
        background: linear-gradient(top bottom, #fa7d3c 0%, #f55f10 100%);
      }
      &.share-to-wechat{
        background: #66BC54;
        svg {
          fill: #fff;
        }
      }
    }
    .wechat-area {
      padding: 20px;
      img {
        width: 400px;
        max-width: 100%;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, .1), 2px 2px 15px rgba(0, 0, 0, .1)
      }
    }
  }
  .comments-section {
    position: relative;
    padding: 2em 8em 4em;
    background: #f5f8fa;
    border: 1px solid #edf0f3;
    &:before {
      position: absolute;
      content: '';
      top: -1rem;
      left: 50%;
      margin-left: -2rem;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent transparent #f5f8fa;
      border-width: 0 2rem 1rem;
    }
  }
}

@media screen and (max-width: 1000px) {
  .blog-detail {
    padding: 0;
    .article-section {
      .article-section-body {
        padding: 1em 0;
      }
      .article-section-side {
        display: none;
      }
    }
    .comments-section {
      padding: 2em 1em;
    }
  }

  .header-body {
    display: none;
  }
}