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

// index
#recent-posts
  width: 75%

  & > .recent-post-item
    display: flex
    flex-direction: row
    align-items: center
    margin-top: 20px
    padding: 0
    height: 280px
    border-radius: 8px
    background: #fff
    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)

      img.post_bg
        transform: scale(1.1)

    if hexo-config('index_post_cover') == 'both'
      .left_radius
        border-radius: 8px 0 0 8px

      .right_radius
        order: 2
        border-radius: 0 8px 8px 0
    else if hexo-config('index_post_cover') == 'left'
      .left_radius
        border-radius: 8px 0 0 8px

      .right_radius
        border-radius: 8px 0 0 8px
    else if hexo-config('index_post_cover') == 'right'
      .left_radius
        order: 2
        border-radius: 0 8px 8px 0

      .right_radius
        order: 2
        border-radius: 0 8px 8px 0

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

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

        &:hover
          transform: scale(1.1)

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

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

        &:hover
          color: $light-blue !important

      & > time
        color: $grey

      & > .article-meta
        color: $grey

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

        i
          margin: 0 .2rem 0 .3rem

        .article-meta__separator
          margin-left: .3rem

        .fa-angle-right
          margin: 0 0 0 .3rem

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

          &:hover
            color: #49b1f5 !important

      & > .content
        display: -webkit-box
        overflow: hidden
        margin-top: .5rem
        height: 90px
        word-break: break-word
        -webkit-line-clamp: 3
        -webkit-box-orient: vertical

// tags page
.tag-cloud
  a
    display: inline-block
    padding: 0 .4rem
    text-decoration: none
    cursor: pointer
    transition: all .3s

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

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

  &-tags
    text-align: center

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

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

#page,
.category-content,
#archive,
.tag-cloud,
.flink,
#tag,
#category
  margin-top: 20px
  width: 75%
  border-radius: 8px
  background: $white
  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)

.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: .25rem
      left: calc(-.5rem + 1px)
      z-index: 1
      width: w = .5rem
      height: h = w
      border: .5 * w solid $light-blue
      border-radius: w
      background: $white
      content: ''
      line-height: h
      transition: all .2s ease-in-out

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

  &-item
    position: relative
    margin: 0 0 1rem .5rem
    transition: all .2s ease-in-out

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

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

    &.year
      font-size: 1rem

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

      &:before
        top: .7rem
        border-color: $ruby

    &__time
      padding-left: .4rem
      color: $a-link-color
      font-size: .7rem

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

      &:hover
        color: $light-blue
        transform: translateX(20px)

    &__img
      img
        padding: 0
        width: 100%
        height: 100%
        transition: all .6s
        object-fit: cover

        &:hover
          transform: scale(1.1)

    &__post
      text-decoration: none
      cursor: pointer

      &:hover
        color: $a-link-color

  &-img
    display: inline-block
    overflow: hidden
    width: 80px
    height: 80px

  &-post
    position: absolute
    top: 0
    display: inline-block
    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: .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
    margin: 0
    padding: 1.8rem 1.3rem

  .category-lists
    padding: 0

  #recent-posts
    .recent-post-item
      flex-direction: column
      height: auto !important

      .post_cover
        order: 1 !important
        width: 100%
        height: 230px
        border-radius: 8px 8px 0 0

      .recent-post-info
        order: 2 !important
        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