Front/src/theme/css/article.less
@import (reference) "base.less";

#article {
  > .top {
    .padding(@t: 6em);
    .text(@align: center, @size: .7em);

    h1 {
      .text(@size: 2em);
    }

    p {
      .text(@color: gray);
    }

    a {
      .text(@color: #666);

      &:hover {
        .text(@color: black);
      }
    }

    .authors, .category, .time {
      display: inline-block;
      .margin(@r: 5px, @t: 1.5em);
    }

    .tags {
      p {
        display: inline-block;
        .margin(@t: 1em);
      }
    }

    .hr {
      .margin(@t: 2em, @b: 2em);
      .size(100%, 2px);
    }
  }

  > .middle {
    line-height: 1.5em;

    h1, h2, h3, h4, h5, h6 {
      line-height: 2em;
    }

    h1 {
       .text(@size: 1.5em);
     }

    h2 {
      .text(@size: 1.4em);
    }

    h3 {
      .text(@size: 1.3em);
    }

    h4, h5, h6 {
      .text(@size: 1.2em);
    }

    p, a, code, li {
      .text(@size: 1em);
      line-height: 1.4em;
    }

    p {
      .margin(@t: 1em, @b: 1em);
      .text(@color: black, @align: left);
    }

    a, blockquote {
      .autoprefix-transition(all @duration-time linear);
    }

    a {
      .icon-font-family;
      .text(@color: #888, @weight: bolder);
      .font-icon(after, jump, @padding: 0 0 0 2px);

      &:hover {
        .text(@color: black);
      }
    }

    blockquote {
      .margin(@all: 0);
      .padding(@all: 1em 1em 4px 1em);
      .text(@size: 1em);
      .background(@color: @default-color);
      line-height: 1.2em;
    }

    pre {
      .padding(@all: 1em);
      .text(@size: .9em);
      line-height: 1.3em;
      overflow: auto;
    }

    img {
      .full-max-size;
    }

    center {
      .margin(@t: 1em, @b: 1em);
      .text(@size: .9em);
    }

    table{
      .margin(@all: 1em);
      .padding(@all: 0);
    }

    tr, th, td {
      .text-center;
    }

    th{
      .padding(@all: 1em);
      .background(@color: #aaa);
    }

    td{
      .padding(@all: 10px);
    }

    table, th, td {
      .border(@all: 1px solid rgba(20, 20, 20, 0.8), @spac: 0);
    }

    code{
      .text(@weight: bolder);
      .padding(@all: 2px);
      .background(@color: #eee);

      &:before, &:after {
        content: "`";
      }
    }

    hr {
      .margin(@t: 2em, @b: 2em);
    }

    #resume-header{
      .size(100%, 140px);
    }

    #resume-photo{
      position: absolute;
      .position(@r: 0);
      .max-size(@h: 140px);
    }

    .resume-title{
      position: absolute;
      .position(@l: 0);

      h2{
        .margin(@t: 0, @b: 20px);
        .text(@size: 20px);
      }

      a, p {
        .margin(@t: 10px, @b: 10px);
        .text(@size: 16px);
      }
    }
  }

  > .bottom {
    .padding(@b: 1em);

    p {
      .text(@weight: bolder, @align: center, @size: .9em);
    }

    .hr {
      .margin(@t: 2em, @b: 1em);
      .size(100%, 2px);
    }
  }

  #disqus_container {
    .margin(@t: 2em);
  }

  #disqus_button{
    .text(@color: #888, @weight: bolder);

    &:hover {
      .text(@color: black);
    }
  }

  .disqus {
    .font-icon(before, disqus);
  }
}