themes/weex/source/css/partial/article.scss

@import "../variable.scss";

.article-header {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid $border-light;
  margin-bottom: 30px;

  h1 {
    font-size: 2em;
    color: $text-black;
    margin: 0;

    .article-title {
      &:hover {
        color: $text-blue;
      }
    }
  }

  .article-date {
    position: absolute;
    bottom: -25px;
    left: 0px;
    font-size: .9em;
    color: $text-gray;
  }
}

.no-chapter {
  .article {
    .article-entry {
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.article {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  line-height: 1.45;
  overflow-y: auto;
  color: $text-dark;

  &.article-type-article {
    margin-left: 0;
  }

  .article-entry {
    flex: 1;
    max-width: 720px;
    margin: 40px 0 20px 40px;
    padding: 0 1.4em;

    > h1 {
      display: none;
    }

    img {
      display: block;
      max-width: 95%;
      margin: 20px auto;
    }

  }

  h2 {
    font-size: 1.65em;
    margin: 1em 0 .8em;
  }

  h3 {
    font-size: 1.35em;
    margin: .85em 0 .7em;
  }

  h4 {
    font-size: 1.15em;
    margin: .75em 0 .55em;
  }

  h5 {
    font-size: 1em;
    margin: .6em 0 .4em;
  }

  ol, ul {
    padding-left: 2em;
  }

  li {
    line-height: 1.5;
  }

  img[alt="mobile_preview"] {
    width: 200px;
  }

  a {
    color: $logo-color;
    &:hover {
      text-decoration: underline;
    }
  }

  .weex-version {
    display: inline-block;
    padding: .3em .8em;
    color: #fff;
    background: $bg-light-blue;
    border-radius: 2em;
    line-height: 1.2;
    position: absolute;
    top: 15px;
    right: 20px;
  }

  .tag-yes {
    color: #41B883;
  }
  .tag-no {
    color: #FF6600;
  }
}

.article-toc {
  position: sticky;
  top: 20px;
  right: 0;
  > ul {
    width: 38%;
    position: absolute;
    left: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 6%;
    border: 1px solid #E8E8E8;
    background-color: $bg-super-light;

    // padding-left: 20px;
    // font-size: 17px;
    // list-style: none;
    // li {
    //   list-style: none;
    // }
    // > li {
    //   margin: 10px 0;
    //   > ul {
    //     font-size: 16px;
    //   }
    // }

    a, a:link {
      color: #777;
    }
    a:hover, a:active {
      color: $logo-color;
      text-decoration: none;
    }
  }
}

.article-heading {
  code {
    color: #6f6666;
  }
}

.article-tips {
  margin: 60px 0 0;
  padding: 10px 0;
  border-top: 1px solid #E6E6E6;
}

.tips-text {
  margin: 0;
  text-align: right;
  padding-right: 10px;
  font-size: 13px;

  a, a:link {
    color: #80d0ff;
  }
  a:active, a:hover {
    color: $logo-color;
  }
}

#blog .article {
  margin-left: 0;
}

#faq .article {
  margin-left: 0;
}

#releasenote .article {
  margin-left: 0;
}