hexo-theme-butterfly/source/css/_layout/post.styl

#article-container
  if hexo-config('beautify.enable')
    headStyle(fontsize)
      padding-left: unit(fontsize + .4, 'rem')

      code
        font-size: unit(fontsize, 'rem')

      &:before
        margin-left: unit((-(fontsize + .2)), 'rem')
        font-size: unit(fontsize, 'rem')

      &:hover
        padding-left: unit(fontsize + .6, 'rem')

    h1,
    h2,
    h3,
    h4,
    h5,
    h6
      cursor: pointer
      transition: all .2s ease-out

      &:before
        position: absolute
        top: calc(50% - .35rem)
        color: $title-prefix-icon-color
        content: $title-prefix-icon
        font-style: normal
        font-variant: normal
        line-height: 1
        transition: all .2s ease-out
        text-rendering: auto
        -webkit-font-smoothing: antialiased

        if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
          font-weight: 600
          font-family: 'Font Awesome 5 Free'
        else
          font-weight: normal
          font-family: FontAwesome

      &:hover
        &:before
          color: $light-blue

    h1
      headStyle(1)

    h2
      headStyle(.9)

    h3
      headStyle(.8)

    h4
      headStyle(.7)

    h5
      headStyle(.6)

    h6
      headStyle(.6)

    ol,
    ul
      margin-top: .4rem
      padding: 0 0 0 .8rem
      list-style: none
      counter-reset: li

      p
        margin: 0 0 .5rem

      ol,
      ul
        padding-left: .5rem

      li
        position: relative
        margin: .2rem 0
        padding: .1rem .5rem .1rem 1.5rem

        &:hover
          &:before
            transform: rotate(360deg)

        &:before
          position: absolute
          top: 0
          left: 0
          background: $light-blue
          color: $card-bg
          cursor: pointer
          transition: all .3s ease-out

    ol
      > li
        &:before
          margin-top: .2rem
          width: w = 1.2rem
          height: h = w
          border-radius: .5 * w
          content: counter(li)
          counter-increment: li
          text-align: center
          font-size: .6rem
          line-height: h

    ul
      > li
        &:hover
          &:before
            border-color: $theme-button-hover-color

        &:before
          $w = .3rem
          top: 10px
          margin-left: .45rem
          width: w = $w
          height: h = w
          border: .5 * w solid $light-blue
          border-radius: w
          background: transparent
          content: ''
          line-height: h
  else
    ol,
    ul
      margin-top: .4rem
      counter-reset: li

      p
        margin: 0 0 .5rem

      ol,
      ul
        padding-left: .5rem

      li
        position: relative
        margin: .3rem 0
        padding-left: .3rem

a
  color: $a-link-color
  text-decoration: none
  word-wrap: break-word
  transition: all .2s
  overflow-wrap: break-word

  &:hover
    color: $light-blue

a.fancybox
  outline: none

  &:focus
    outline: none

  display: inline-block
  width: 100%
  text-align: center

img
  max-width: 100%
  transition: all .2s

// highlight
.highlight-tools
  .code-expand
    position: absolute
    top: 0
    z-index: 1
    padding: 7px 10px
    color: $highlight-foreground
    cursor: pointer
    transition: all .3s
    transform: rotate(0)

    & + .code-lang
      left: 30px

    &.code-closed
      transition: all .3s
      transform: rotate(-90deg) !important

  .code-lang
    position: absolute
    left: 15px
    z-index: 1
    color: $highlight-foreground
    text-transform: capitalize
    font-weight: bold
    font-size: .8rem
    line-height: 1.4rem
    cursor: pointer

  .copy-notice
    position: absolute
    top: 0
    right: 0
    z-index: 1
    background: darken($highlight-background, 5)
    color: $highlight-aqua
    opacity: 0

  .fa-clipboard
    position: absolute
    top: .4rem
    right: 10px
    z-index: 1
    color: $highlight-aqua
    cursor: pointer
    transition: color .2s

    &:hover
      color: darken($highlight-aqua, 20%)

.katex-wrap
  overflow: auto

  if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
    &::-webkit-scrollbar
      display: none

.layout_post
  margin: 0 auto
  padding: 2rem 15px
  max-width: 1000px

  img
    display: block

  .tag_share
    .post-meta
      &__tag-list
        display: inline-block

      &__tags
        display: inline-block
        margin: .4rem .4rem .4rem 0
        padding: 0 .6rem
        width: fit-content
        border: 1px solid $light-blue
        border-radius: .6rem
        color: $light-blue
        font-size: 12px
        cursor: pointer
        transition: all .2s ease-in-out

        &:hover
          background: $light-blue
          color: $button-color

    .post_share
      display: inline-block
      float: right
      margin: .4rem 0
      width: fit-content

      .social-share
        font-size: 12px

        .social-share-icon
          margin: 0 4px
          width: 26px
          height: 26px
          font-size: 15px
          line-height: 25px

  .post-copyright
    position: relative
    margin: 2rem 0 .5rem
    padding: .5rem .8rem
    border: 1px solid $light-grey
    transition: box-shadow .3s ease-in-out

    &:before
      position: absolute
      top: t = .5rem
      right: t
      width: w = .8rem
      height: w
      border-radius: w
      background: $light-blue
      content: ''

    &:after
      position: absolute
      top: t = .7rem
      right: t
      width: w = .4rem
      height: w
      border-radius: w
      background: $white
      content: ''

    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold

      &-info
        padding-left: .3rem

        a
          text-decoration: underline
          word-break: break-word

          &:hover
            text-decoration: none

#article-container
  a
    color: $theme-link-color

    &:hover
      text-decoration: underline

  img
    margin: 0 auto .8rem

  p
    margin: 0 0 .8rem

@media screen and (max-width: 1024px)
  .layout_post
    width: auto

@media screen and (max-width: $sm)
  .layout_post
    padding: 1rem 5px

    & > #post
      padding: 1.8rem .7rem

// adjust the layout width in big screen
@media screen and (min-width: $lr)
  .layout_post
    max-width: 1300px

  .layout_page
    max-width: 1500px

    &.hide-aside
      max-width: 1300px