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

#aside_content
  width: 25%

  .card_widget
    -webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
    box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
    border-radius: 8px
    transition: all .3s
    background: #fff
    margin-top: 20px
    overflow: hidden

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

  .card-author
    img
      height: 120px
      width: 120px
      padding: 0
      display: inline-block
      vertical-align: top
      border-radius: 70px
      transition: all .3s

      &:hover
        transform: rotate(540deg)

    .author-info
      &__name
        font-size: 1.1rem
        display: block
        margin: -0.1rem auto
        font-weight: 500

      &__description
        display: block
        margin: -0.1rem auto

    .data_link 
      a
        text-decoration: none

      .length_num 
        font-size: 1rem
        color: #000

      .headline 
        display: block
        font-size: 0.7rem
        margin-bottom: -21px
        text-transform: uppercase
        color:$font-black

    #aside-social-icons
      margin: 0.5rem auto -0.7rem
      width: 15rem
      text-align: center

      .social-icon 
        margin: 0 0.5rem
        color: $font-black
        font-size: 1rem
        cursor: pointer
      
      i
        transition: all 0.3s
        
        &:hover
          transform: rotate(540deg)

    #bookmark-it
      margin-top: .2rem
      height: 1.6rem
      background-color: $light-blue
      color: #fff
      text-decoration: none
      line-height: 1.6rem
      position: relative
      text-transform: uppercase
      z-index: 1

      span
        padding-left: 10px

    .bookmark--primary 
      color: $ruby
    
    .bookmark--animated 
      transition-property: color
      transition-duration: 1s

      &:before
        content: ""
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        background: $ruby
        transform: scaleX(0)
        transform-origin: 0 50%
        transition-property: transform
        transition-duration: 0.5s
        transition-timing-function: ease-out
        z-index: -1
      
      &:hover 
        color: white

        &:before 
          transform: scaleX(1)
          transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)

  .card-content 
    padding: 1rem 1.2rem
  
  .post_data
    display: flex

  .data-item
    flex-grow: 1
    align-items: center
    flex-basis: auto
    justify-content: center

  .item_headline 
    font-size: 0.8rem
    
    span 
      margin-left: 10px

  .card-tag-cloud 
    a
      text-decoration: none
      position: relative
      padding-bottom: 0.3rem
      word-break: keep-all

      &:hover
        color: $light-blue !important

      // &::after
      //   width: 100%

  .aside_recent_item 
      margin: 10px 0 -15px 0
    
    .aside_recent_post 
      a
        text-decoration: none
        color: $font-black

    .aside_recent_post
      margin-bottom: 10px
      width: 100%

    .aside_post_cover
      height: 66px
      width: 66px
      float: left
      overflow: hidden

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

      &:hover
        box-shadow: none
        transform: scale(1.1)
    
    #aside_title    
      .aside_post_meta
        font-size: 0.6rem
        padding-left: 10px
        color: #99a9bf

      .aside_post_title
        line-height: 1rem
        display: -webkit-box
        -webkit-line-clamp: 2
        -webkit-box-orient: vertical
        overflow: hidden
        height: 40px
        padding-left: 10px

        &:hover
          color: $light-blue !important

  .aside_category_item,.archive-list
    list-style: none
    margin-bottom: -3px
    margin-block-start: 0.2rem
  
  .aside_category_item.child
    margin-bottom: -3px
    margin-block-start: 0rem

    .aside_category_list
      margin-left: -50px

  .aside_category_list,.archive-list-item
    margin-left: -40px

    &:hover
      background-color: $light-blue
      color: #363636
    a
      text-decoration: none
      color: $font-black
      padding: 0.2rem 1rem
      transition: .2s

      &:hover
        padding: 0.2rem 0.85rem
  
  .aside_category_list_name,.archive-list-link
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    flex: auto

  .aside_category_list_link,.archive-list-item
    display: flex
  
  .aside_category_list_length,.archive-list-count
    float: right 
  
  .card-archives
    margin-bottom: 20px
  
  .card-webinfo
    .webinfo
      padding: 0.2rem 1rem

      .webinfo_item
        display: block
        padding: 4px 0 0

        .webinfo_article_name,
        .webinfo_runtime_name,
        .webinfo_site_uv_name,
        .webinfo_site_name
          display: inline-block
        
        .webinfo_article_count,
        .webinfo_runtime_count,
        .webinfo_site_uv_count,
        .webinfo_site_pv_count
          float: right
          display: inline-block

@media screen and (max-width: 900px) 
  .layout_page
    flex-direction: column
  
  #recent-posts,#aside_content
    width: 100% !important
  
  .card_widget
    margin-left: 0 
    margin-right: 0 


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