@charset "utf-8";

/* -------------------------------------------------------------- */
/* post editor styles on posts and comments
/* -------------------------------------------------------------- */
.post__editor,
.comment-content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  dl,
  pre,
  blockquote,
  table {
    margin: 20px 0;
  }
  h1 {
    font-size: rem-calc(22);
  }
  h2 {
    font-size: rem-calc(18);
    border-bottom: 1px dotted $colorSub;
  }
  h3 {
    font-size: rem-calc(17);
  }
  h4 {
    font-size: rem-calc(16);
  }
  h5 {
    font-size: rem-calc(15);
    font-weight: normal;
  }
  h6 {
    font-size: rem-calc(14);
    font-weight: normal;
  }
  ul {
    list-style-type: square;
  }
  ol {
    list-style-type: decimal;
  }
  ul,
  ol {
    margin-left: 16px;
    li {
      margin: 8px;
      font-size: rem-calc(14);
      line-height: 1.4;
    }
  }
  dl {
    dt,
    dd {
      color: $colorText;
      font-size: rem-calc(14);
    }
    dt {
      margin-left: 0;
      font-family: $fontFamilyTitle;
    }
    dd {
      margin-left: 14px;
    }
  }
  p {
    color: $colorText;
    font-size: rem-calc(14);
    line-height: 1.5;
  }
  blockquote {
    position: relative;
    padding: 10px;
    color: $colorText;
    border: 1px dotted $colorSub;
    font-size: rem-calc(13);
    > * {
      margin: 0;
      font-size: rem-calc(13);
    }
    > ul,
      ol {
      margin-left: 16px;
    }
  }
  cite {
    font-size: rem-calc(12);
    font-style: normal;
  }
  pre {
    padding: 10px;
    background-color: lighten($colorSub, 10%);
    color: $colorText;
    font-family: $fontFamilyCode;
    font-size: rem-calc(12);
    word-wrap: normal;
    overflow-x: auto;
    code {
      background-color: transparent;
    }
  }
  code {
    background-color: lighten($colorSub, 10%);
    border: none;
    border-radius: 3px;
    color: #cc0000;
    font-family: $fontFamilyCode;
    font-size: rem-calc(12);
  }
  kbd {
    padding: 2px 4px;
    background-color: lighten($colorBase, 6%);
    border: 1px solid lighten($colorBase, 30%);
    border-radius: 3px;
    color: #ffffff;
    font-family: $fontFamilyCode;
    font-size: rem-calc(12);
    box-shadow: 1px 1px 2px rgba(0,0,0,.3);
  }
  address {
    color: $colorText;
    font-size: rem-calc(14);
    font-style: normal;
  }
  ins {
    padding: 0 4px;
    background-color: lighten($colorLink, 30%);
    color: $colorText;
    text-decoration: none;
  }
  table {
    border: 1px solid $colorSub;
    background-color: #ffffff;
    text-align: left;
    font-size: rem-calc(14);
  }
}
/**
 * media queries
 */
@media #{$medium-up} {
  .post__editor,
  .comment-content {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    dl,
    pre,
    blockquote,
    table {
      margin: 30px 0;
    }
    h1 {
      font-size: rem-calc(28);
    }
    h2 {
      font-size: rem-calc(24);
    }
    h3 {
      font-size: rem-calc(22);
    }
    h4 {
      font-size: rem-calc(20);
    }
    h5 {
      font-size: rem-calc(18);
    }
    h6 {
      font-size: rem-calc(16);
    }
    ul,
    ol {
      margin-left: 14px;
    }
    blockquote {
      > * {
        margin: 0;
      }
    }
  }
}