hexo-theme-butterfly/source/css/other.styl

#recent-posts
  .recent-post-item 
    padding: 0
    box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
    border-radius: 8px
    -webkit-transition: all 0.3s
    -moz-transition: all 0.3s
    -o-transition: all 0.3s
    -ms-transition: all 0.3s
    transition: all 0.3s
    background: #fff
    margin-top: 20px
    height: 280px

    &: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)

      img.post_bg
        transform:scale(1.1)
  
  .is_left
    float: left
    border-top-left-radius: 8px
    border-bottom-left-radius: 8px

  .is_right
    float: right
    border-top-right-radius: 8px
    border-bottom-right-radius: 8px

  .post_cover
    width: 45%
    height: 280px
    overflow: hidden

    
    

  img.post_bg
    border: 0
    transition: all .6s
    display: block
    width: 100%
    height: 100%
    padding: 0
    margin: 0
    object-fit: cover
  

    &:hover
      transform:scale(1.1)
  
  #pagination
    margin-top: 2rem


.recent-post-info 
  padding: 50px 40px
  display: inline-block
  width: 55%
  overflow hidden


a.article-meta__categories
  text-decoration: none
  color: #858585

  &:hover
    color: #49b1f5 !important

.content
  display: -webkit-box
  -webkit-line-clamp: 3
  -webkit-box-orient: vertical
  overflow: hidden
  height: 90px

.more {
  position: relative
  letter-spacing: 1.2px
  text-transform: uppercase
  overflow: hidden
  z-index: 1

  &:focus {
    outline: none
  }
}

.more--primary {
  color: lightslategray
}

.more--animated {
  transition-property: color
  transition-duration: 0.5s

  &.more--border.more--primary {
    border: 1px solid lightslategray
  }

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

.layout_page
  display: flex 
  margin: 0 auto
  max-width: 1200px
  align-items: flex-start
  padding: 0 15px

#recent-posts
    width: 75%

#page,.category-content,.flink
  padding: 40px 44px 44px

#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
  box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
  border-radius: 8px
  transition: all .3s
  background: #fff
  margin-top: 20px
  width: 75%

.card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink

  &: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)

#page_site-info
  padding: 10rem 1rem 7rem
  #site-title
    font-family: PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif

@media screen and (max-width: 900px) 
    #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
      width: 100% !important
    
    // .recent-post-info 
    //   padding: 40px 30px 20px


@media screen and (max-width:768px) 
  .recent-post-item
    height: auto !important
    border-radius: 8px

  .post_cover 
      width: 100% !important
      height: 230px !important
      border-radius: 8px !important
           
  .recent-post-item,#page,.tag-cloud,.flink
    margin-top: 1px

  .recent-post-item,#page,.category-content,.tag-cloud,.flink
    box-shadow: none !important
    background: none !important
    padding: 0px 20px 0 !important
  
    &:hover 
      -webkit-box-shadow: none
      box-shadow: none
  
  #archive,#category,#tag
    box-shadow: none !important
    background: none !important
    padding: 0px 30px 0 !important

  
  .layout_post
    padding: 0 20px 0
    border-radius: 0
    -webkit-box-shadow: none
    box-shadow: none
    background: none
    margin: 0

    &:hover
      -webkit-box-shadow: none
      box-shadow: none
  
    
  .layout_page
    padding: 0 !important
  
  #aside_content
    display: none !important
    // .card_widget
    //   box-shadow: none
    //   border-radius: 0
    //   border-top: 1px dashed #a4d8fa

    //   &:hover
    //     box-shadow: none

  
  .category-lists
    padding: 0


  
  .recent-post-info 
    padding: 20px 10px !important
    width: 100%

  #recent-posts #pagination
    margin-bottom: 0

  .more_setting
    display: block !important

  #nav #site-social-icons
    display: block

  #page_site-info
    padding: 7rem 1rem 5rem
  
  #top-container
    height: 14rem

    #post-info
      bottom: 1rem
      padding-left: 5%
  
  .mobile_hidden
    display: none
  
    
  canvas
    display: none !important



.layout_page,
.layout_post,
footer
  animation: main 1s;

#nav,
#top-container
  animation: header 1s

#site-title
  animation: titlescale 1s

.search-dialog
  transition: all .2s

.scroll-down-effects
  -webkit-animation: pulse 1.5s infinite
  animation: pulse 1.5s infinite
  // font-size: 28px
  position: absolute
  color: #fff

@keyframes pulse{

  0%,to{
    // -ms-filter:"alpha(opacity=40)"
    // filter:alpha(opacity=40)
    opacity:.4
    top:0}
  50%{
    // -ms-filter:none
    // -webkit-filter:none
    // filter:none
    opacity:1
    top:-16px}
    }

@keyframes header {
  0% {
  opacity: 0;
  transform: translateY(-50px)
}
100% {
  opacity: 1;
  transform: translateY(0)
}

}


@keyframes main {
  0% {
  opacity: 0;
  transform: translateY(50px)
}
100% {
  opacity: 1;
  transform: translateY(0)
}
}

@keyframes titlescale{
  
  0% {
    // opacity:0;
    transform: scale(0.7)
}
  100% {
    // opacity:1;
    transform: scale(1)
}
    
}


.article-container .code_full_page
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  z-index: 9999;
  margin: 0;
  animation: code_full_page 1s;

.code_body
  overflow: hidden

@keyframes code_full_page{
  0%{transform:scale(0)}
  50%{transform:scale(1)}
  80%{transform:scale(.98)}
  100%{transform:scale(1)}}