icon-size = 32px
icon-gap = 25px

article
  // box-shadow 1px 2px 3px #ddd
  border-radius 17px
  background rgba(0, 0, 0, 0.65)
  &.page
    padding-left 20px
    .icon
      display none

  &.post
    .icon
      &:before
        content '\f016'

  &.photo
    .icon
      &:before
        content '\f030'

  &.link
    .icon
      &:before
        content '\f0c1'

    .title
      a
        &:after
          content '\f08e'
          color color-meta
          font 12px font-icon
          padding-left 10px
          vertical-align super

  .post-content
    padding 20px 20px 15px (icon-size + icon-gap + 20)
    margin-bottom 50px
    position relative
    @media screen and (max-width: 600px)
      padding-left 20px

  .gallery
    overflow hidden
    position relative
    &:hover
      .control
        opacity 1

    img
      min-width 100%
      max-width 100%
      height auto
      position absolute
      top 0
      left 0
      opacity 0

    .control
      opacity 0
      transition 0.3s

    .prev, .next
      position absolute
      top 0
      width 50%
      height 100%
      cursor pointer
      &:before
        position absolute
        font 24px/1 font-icon
        text-align center
        width 24px
        text-shadow 0 0 15px rgba(0,0,0,0.5)
        color #fff
        margin-top -12px
        top 50%

    .prev
      left 0
      &:before
        content '\f053'
        left 10px

    .next
      right 0
      &:before
        content '\f054'
        right 10px

  header
    .icon
      width icon-size
      height icon-size
      margin-right icon-gap
      position absolute
      top 20px
      left 20px
      color color-link
      @media screen and (max-width: 600px)
        display none
      &:before
        position absolute
        font 32px font-icon
        top 0
        left 0
        width 32px
        text-align center

    time
      color color-meta
      font 0.9em font-title
      margin-bottom 5px
      display block
      line-height 1

    .title
      font-weight normal
      a
        color color-font
        &:hover
          color color-link
          text-decoration none

  .entry
    text-align justify
    line-height 1.6
    p, blockquote, ul, ol, dl, table, iframe, h3, h4, h5, h6, .video-container
      margin-top 15px

    blockquote
      // border-top 1px solid color-border
      // border-bottom 1px solid color-border
      border-left 4px solid color-border
      // font-style italic
      // font-family font-serif
      // font-size 1.2em
      padding 0 15px
      color #ccc
      // text-align center
      /*footer
        border-top none
        font-size 0.8em
        line-height 1
        margin 20px 0 0
        padding-top 0
        cite
          &:before
            content '—'
            color #ccc
            padding 0 0.5em*/

    blockquote>:first-child
      margin-top 0px

    blockquote>:last-child
      margin-bottom 0px

    code, pre
      font-family font-mono

    code
      // background #eee
      // color #666
      padding 0 5px
      margin 0 2px
      font-size 0.9em
      border 1px solid color-border
      border-radius 3px

    pre
      // background #eee
      border 1px solid color-border
      margin-top 15px
      overflow auto
      padding 7px 15px
      border-radius 2px
      code
        background none
        padding 0
        margin 0
        border none
        border-radius 0

    ul, ol, dl
      margin-left 20px
      ul, ol, dl
        margin-top 0

    hr
      border-top: 1px dashed
      border-bottom: none
      margin-top: 10px
      margin-bottom: 10px

    h1, h2
      font-weight normal
      border-bottom 1px dashed color-border
      padding-bottom 10px
      margin-top 20px

    h3, h4, h5, h6
      font-weight normal

    img, video
      max-width 100%
      height auto
      border none

    iframe
      border none

    .caption
      display block
      margin-top 5px
      color color-meta
      position relative
      font-size 0.9em
      padding-left 25px
      &:before
        content '\f040'
        position absolute
        font 1.3em font-icon
        position absolute
        left 0
        top 3px

    .video-container
      position relative
      padding-bottom 56.25%
      padding-top 30px
      height 0
      overflow hidden
      iframe, object, embed
        position absolute
        top 0
        left 0
        width 100%
        height 100%
        margin-top 0

    .pullquote
      float right
      border none
      padding 0
      margin 1em 0 0.5em 1.5em
      text-align left
      width 45%
      font-size 1.5em

  footer
    margin-top 15px
    padding-top 10px
    border-top 1px dotted color-border
    color color-meta
    font-size 0.9em
    line-height 16px
    position relative
    min-height 16px
    a
      color color-meta
      &:hover
        color color-link
        text-decoration none
      &:before
        font 1.1em font-icon
        padding-right 10px
        vertical-align middle

      &.more-link
        &:before
          content '\f054'

      &.share-link
        margin-left 5px
        &:before
          content '\f045'

      &.comment-link
        &:before
          content '\f075'

    .categories, .tags
      position relative
      padding-left 25px
      margin 5px 0
      &:before
        position absolute
        font 1.1em font-icon

    .categories
      &:before
        content '\f07b'
        top 2px
        left 1px

    .tags
      &:before
        content '\f02b'
        top 3px
        left 2px

    .addthis
      margin-top 15px
      iframe
        margin-top 0
