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
    -webkit-transition: all .3s
    -moz-transition: all .3s
    -o-transition: all .3s
    -ms-transition: all .3s
    transition: all .3s
    background: #fff
    margin-top: 20px
    margin-left: 15px
    overflow: hidden

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

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

      &:hover
        -moz-transform: rotate(540deg)
        -o-transform: rotate(540deg)
        -webkit-transform: rotate(540deg)
        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
        letter-spacing: 1px
        margin-bottom: -21px
        text-transform: uppercase
        color:#4c4948

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

      .social-icon 
        margin: 0 0.5rem
        color: #4c4948
        /* text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.15) */
        font-size: 1rem
        cursor: pointer
      
      i
        transition: all 0.3s
        
        &:hover
          -moz-transform: rotate(540deg)
          -o-transform: rotate(540deg)
          -webkit-transform: rotate(540deg)
          transform: rotate(540deg)
        

    a#bookmark-it
      display: inline-block
      margin-top: .2rem
      padding: 0 1rem
      height: 1.6rem
      background: #49b1f5
      color: #fff
      text-decoration: none
      line-height: 1.6rem
      position: relative
      text-transform: uppercase
      z-index: 1

    .toggle_change--primary,.bookmark--primary 
      color: $cyan
    
    .toggle_change--animated,.bookmark--animated 
      transition-property: color
      transition-duration: 1s

      &:before {
        content: ""
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        background: $cyan
        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

    &::after
      position: absolute
      bottom: 0
      left: 0
      z-index: -1
      width: 0
      height: 3px
      background-color: lighten($theme-color, 30%)
      content: ""
      transition: all 0.3s ease-in-out

    &:hover
      color: $light-blue !important

      &::after
        width: 100%



  .aside_recent_item 
      margin: 10px 0 -15px 0
    
    .aside_recent_post 
      a
        text-decoration: none
        color: #4c4948

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

    .aside_post_cover
      height: 70px
      width: 70px
      float: left
    .aside_post_bg
      object-fit: cover
      width: 100%
      height: 100%
      max-width: 100%

      &:hover
        box-shadow: none
    
    #aside_title
      padding-top: 4px
    
      .aside_post_meta
        font-size: 0.6rem
        padding-left: 5px

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

        &:hover
          color: $light-blue !important



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

  .aside_category_list,.archive-list-item
    margin-left: -40px
    padding: 0.2rem 1rem

    &:hover
      background-color: $light-blue
      color: #363636
    a
      text-decoration: none
      color: #4c4948

  .aside_category_list_length,.archive-list-count
    float: right 
  
  .card-archives
    margin-bottom: 20px

  .card-announcement-animation
    animation: announ_animation 1.5s infinite
  
  .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


@keyframes announ_animation{

  0%,to{
    color: #4c4948

}
  50%{
    color: #FF0000

    }
    }


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