@import "../variable";

.list__contents,
.post__contents {
  & > pre {
    width: calc(~"100% + 2em");
    box-sizing: border-box;
    padding: .5em .3em;
    margin-left: -1em;
    background: #434343;
    overflow: auto;
    color: #fafafa;
  }

  h1 {
    color: @accent-color;
  }

  h2 {
    color: @accent-color;
  }

  a {
    display: inline-block;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 1px;
      width: 100%;
      border-bottom: 1px dotted @accent-color;
    }
  }

  ul,
  ol {
    margin-left: .5em;
    padding-left: 1em;
  }

  .emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
  }

  blockquote {
    margin: 0;
    border-left: .3em solid tint(@font-color, 50%);
    padding: .5em .5em .5em 1em;
  }

  table {
    border: 1px solid @font-color;
  }

  thead {
    background: tint(@font-color, 80%);
  }

  th,
  td {
    padding: .5em .75em;
  }

  code {
    font-family: "Source Sans Pro";
  }

  code:not([class*="lang-"]) {
    display: inline-block;
    border: tint(@font-color, 50%) 1px solid;
    background: tint(@font-color, 80%);
    line-height: 1.15;
    border-radius: 2px;
    padding: 0 .3em;
  }
}

// html
.hljs-tag,
// css
.hljs-selector-tag,
// js
.hljs-keyword {
  color: @accent-color;
}

// html
.hljs-attr,
// css
.hljs-attribute,
// js
.hljs-function,
.hljs-function .hljs-keyword {
  color: saturate(spin(@accent-color, 105), 15);
}

// html
.hljs-string,
// css
.hljs-number,
// js
.hljs-literal {
  color: saturate(spin(@accent-color, 75), 20);
}

.hljs-comment {
  opacity: .35;
}