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

#aside_content
  width: 25%

  .card-widget:not(:first-child)
    margin-top: 1rem

  .card-widget
    overflow: hidden
    border-radius: 8px
    background: $card-bg
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
    transition: all .3s

    &:hover
      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)

  .card-info
    img
      width: 110px
      height: 110px
      border-radius: 70px
      transition: all .5s

      &:hover
        transform: rotate(360deg)

    .author-info
      &__name
        font-weight: 500
        font-size: 1.1rem

      &__description
        margin-top: -.3rem

    .card-info-data
      display: table
      padding: .7rem 0
      width: 100%
      table-layout: fixed

      & > .card-info-data-item
        display: table-cell

        a
          .headline
            @extend .limit-one-line
            color: $font-black
            font-size: .7rem

          .length_num
            margin-top: -.3rem
            color: $dark-black
            font-size: 1rem

    .card-info-social-icons
      margin: .3rem 0 -.3rem

      .social-icon
        margin: 0 .5rem
        color: $font-black
        font-size: 1rem
        cursor: pointer

      i
        transition: all .3s

        &:hover
          transform: rotate(540deg)

    #bookmark-it
      position: relative
      z-index: 1
      display: block
      width: 100%
      background-color: $light-blue
      color: $button-color
      line-height: 1.6rem

      span
        padding-left: .5rem

  .card-content
    padding: 1rem 1.2rem

  .item-headline
    font-size: .8rem

    span
      margin-left: .5rem

  .card-tag-cloud
    a
      display: inline-block
      padding: 0 .1rem

      &:hover
        color: $light-blue !important

  .card-recent-post
    .aside-recent-item
      margin: 10px 0 -15px

      & > .aside-recent-post
        margin-bottom: 10px

        & > a
          color: $font-black

          .aside-post-cover
            float: left
            overflow: hidden
            width: 66px
            height: 66px

            .aside-post-bg
              padding: 0
              max-width: 100%
              width: 100%
              height: 100%
              transition: all .6s
              object-fit: cover

              &:hover
                box-shadow: none
                transform: scale(1.1)

          .aside-post-title
            .aside-post_meta
              padding-left: 10px
              color: $theme-meta-color
              font-size: .6rem

            .aside-post_title
              @extend .limit-more-line
              padding-left: 10px
              height: 40px
              line-height: 1rem
              -webkit-line-clamp: 2

              &:hover
                color: $light-blue !important

            &.no-aside-cover
              .aside-post_title
                height: auto

  .card-archives ul.card-archive-list,
  .card-categories ul.card-category-list
    margin: 0
    padding: .2rem 0 0
    list-style: none

  .card-archives ul.card-archive-list > .card-archive-list-item,
  .card-categories ul.card-category-list > .card-category-list-item
    a
      display: inline-block
      padding: .15rem 1rem
      width: 100%
      color: $font-black
      transition: all .4s

      &:hover
        padding: .15rem .85rem
        background-color: $light-blue

      span
        display: inline-block
        vertical-align: bottom

        &:first-child
          width: 80%

        &:last-child
          width: 20%
          text-align: right

    &.more
      span
        padding-right: .3rem
        width: auto !important
        transition: .5s

      &:hover
        span
          padding-right: .6rem

  .card-categories
    .card-category-list
      &.child
        padding: 0 0 0 1rem

      > .parent
        .card-category-list
          &-name
            width: 70% !important

          &-count
            width: 18%
            text-align: right

          &-icon
            float: right
            margin-right: -.35rem
            padding: .35rem
            transition: transform .3s
            transform: rotate(0)

            &.expand
              transform: rotate(-90deg)

        if hexo-config('aside.card_categories.expand') == false
          + .child
            display: none

  .card-webinfo
    .webinfo
      padding: .2rem 1rem

      .webinfo-item
        display: block
        padding: 4px 0 0

        div
          &:first-child
            display: inline-block

          &:last-child
            display: inline-block
            float: right

@media screen and (max-width: 900px)
  .layout_page
    flex-direction: column

  #recent-posts,
  #aside_content
    width: 100% !important

  #aside_content
    .card-widget:first-child
      margin-top: 1rem

@media screen and (min-width: 900px)
  #aside_content
    .card-widget
      if hexo-config('aside.position') == 'right'
        margin-left: 15px
      else
        margin-right: 15px

if hexo-config('aside.mobile') == false
  @media screen and (max-width: $sm)
    #aside_content
      display: none