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

//index
#recent-posts
  width: 75%

  .recent-post-item 
    padding: 0
    box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
    border-radius: 8px
    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)
   
  .left_radius
    border-top-left-radius: 8px
    border-bottom-left-radius: 8px

  .right_radius
    border-top-right-radius: 8px
    border-bottom-right-radius: 8px

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

  .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)
  
  .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
    margin-top: 0.5rem
    word-break: break-word

  .article-meta
    color: $grey

    .sticky
      color: $theme-button-hover-color

    i
      margin: 0 0.2rem 0 0.3rem

    &__separator
      margin-left: 0.3rem

    .fa-angle-right,
    &__link
      margin: 0 0 0 0.3rem

  time
    color: $grey

  .article-title
    margin-bottom: 0.3rem
    color: $black
    text-decoration: none
    font-size: 1.2rem
    cursor: pointer
    transition: all 0.2s ease-in-out
    line-height: 1.4
    text-overflow: ellipsis
    display: -webkit-box
    -webkit-box-orient: vertical
    -webkit-line-clamp: 2
    overflow: hidden
    word-wrap: break-word

    &:hover
      color: $light-blue !important

.tag-cloud
  padding: 40px 44px 44px

  a
    display: inline-block
    margin: 0 0.4rem
    text-decoration: none
    cursor: pointer
    transition: all .3s

    &:hover
      color: $ruby !important
      transform: scale(1.1)

  &__title
    font-size: 1.8rem
    text-align: center

  &-tags
    text-align: center

#tag,
#category,
#archive
  padding: 3rem 3rem 3rem

#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%

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


.article-sort
  padding-left: 1rem
  border-left: 2px solid $pale-blue

  &-title
    position: relative
    padding-bottom: 1.2rem
    padding-left: 1rem
    font-size: 1.2rem
    line-height: 1

    &:hover
      &:before
        border-color: $ruby

    &:before
      position: absolute
      top: 0.25rem
      left: calc(-0.5rem + 1px)
      z-index: 1
      width: w = 0.5rem
      height: h = w
      border: 0.5 * w solid $light-blue
      border-radius: w
      background: $white
      content: ""
      line-height: h
      transition: all 0.2s ease-in-out

    &:after
      position: absolute
      bottom: 0
      left: 0
      z-index: 0
      width: 0.1rem
      height: 1.3rem
      background: $pale-blue
      content: ""

  &-item
    position: relative
    margin: 0 0 1rem 0.5rem
    transition: all 0.2s ease-in-out

    &:hover
      &:before
        border-color: $ruby

    &:before
      $w = 0.3rem
      position: absolute
      top: 1.8rem
      left: calc(-1rem - 17px)
      width: w = $w
      height: h = w
      border: 0.5 * w solid $light-blue
      border-radius: w
      background: $white
      content: ""
      line-height: h
      transition: all 0.2s ease-in-out

    &.year
      font-size: 1rem

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

      &:before
        top: 0.7rem
        border-color: $ruby
    
    &__time
      color: $a-link-color
      font-size: 0.7rem
      padding-left: 0.4rem

    &__title
      color: $font-black
      font-size: 0.75rem
      height: 60px
      overflow: hidden
      display: -webkit-box
      -webkit-line-clamp: 2
      -webkit-box-orient: vertical
      transition: all .3s

      &:hover
        color: $light-blue
        transform: translateX(20px)
    
    &__img
      img
        height: 100%
        width: 100%
        object-fit: cover
        padding: 0
        transition: all .6s
      
        &:hover
          transform: scale(1.1)

    &__post
      text-decoration: none
      cursor: pointer

      &:hover
        color: $a-link-color

  &-img
    height: 80px
    width: 80px
    display: inline-block
    overflow: hidden
  
  &-post
    display: inline-block
    top: 0
    position: absolute
    margin-left: 1rem


.category-lists
  padding: 1rem 0 1.5rem

  .category__title
    text-align: center
    font-size: 1.8rem

.category-list
  a
    color: $font-black
    text-decoration: none
    cursor: pointer

  .category-list-count
    margin-left: 0.4rem
    color: $a-link-color

    &:before
      content: "("

    &:after
      content: ")"

@media screen and (max-width: $sm)
  .layout_page
    padding: 0 5px !important
   
  #page,
  .category-content,
  #archive,
  .tag-cloud,
  .flink,
  #tag,
  #category
    padding: 1.8rem 1.3rem
    margin: 0
 
  .category-lists
    padding: 0
  
  #recent-posts    
    .recent-post-item
      height: auto !important

      .post_cover 
        width: 100% 
        height: 230px 
        border-radius: 8px 8px 0 0

      .recent-post-info 
        padding: 30px 25px 18px!important
        width: 100%
              
        .article-title
          font-size: 1rem
        
        .article-meta.tags
          display: none

      &:first-child
        margin: 0

@media screen and (min-width: 900px) 
  if hexo-config("aside.position") == "left"
    #recent-posts,#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
      order: 2

@media screen and (max-width: 900px) 
  #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
      width: 100% !important