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

// index
#recent-posts
  width: 75%

  & > .recent-post-item:not(:first-child)
    margin-top: 1rem

  & > .recent-post-item
    display: flex
    flex-direction: row
    align-items: center
    padding: 0
    height: 280px
    border-radius: 8px
    background: $card-bg
    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('cover.position') == 'both'
      .left_radius
        border-radius: 8px 0 0 8px

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

      .right_radius
        border-radius: 8px 0 0 8px
    else if hexo-config('cover.position') == '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
      -webkit-mask-image: -webkit-radial-gradient(white, black)

      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%

      &.no-cover
        width: 100%

      & > .article-title
        display: -webkit-box
        overflow: hidden
        margin-bottom: .3rem
        color: $font-black
        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

      & > .article-meta-wrap
        font-size: 95%

        & > time
          color: $theme-meta-color
          cursor: pointer

        & > .article-meta
          color: $theme-meta-color

        .sticky
          color: $sticky-color

        i
          margin: 0 .2rem 0 0

        .article-meta__separator,
        .article-meta__link
          margin: 0 .3rem

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

        a.article-meta__categories,
        a.article-meta__tags
          color: $theme-meta-color

          &:hover
            color: $light-blue !important
            text-decoration: underline

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

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

    &:hover
      color: $theme-button-hover-color !important
      transform: scale(1.1)

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

  &-tags
    text-align: center

.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
  padding: 50px 40px
  border-radius: 8px
  background: $card-bg
  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)

.layout_page
  & > div:first-child:not(.recent-posts)
    width: 75%

.article-sort
  margin-left: .5rem
  padding-left: 1rem
  border-left: 2px solid lighten($light-blue, 20)

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

    &:hover
      &:before
        border-color: $theme-button-hover-color

    &: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: $card-bg
      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: lighten($light-blue, 20)
      content: ''

  &-item
    position: relative
    margin: 0 0 1rem .5rem
    width: 100%
    height: 80px
    transition: all .2s ease-in-out

    &:hover
      &:before
        border-color: $theme-button-hover-color

    &: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: $card-bg
      content: ''
      line-height: h
      transition: all .2s ease-in-out

    &.no-article-cover
      display: flex
      flex-direction: column
      justify-content: center

      .article-sort-post
        padding: 0
        width: 100%

    &.year
      height: auto
      font-size: 1rem

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

      &:before
        top: .7rem
        border-color: $theme-button-hover-color

    &__time
      padding-left: .4rem
      font-size: .7rem

    &__title
      display: -webkit-box
      overflow: hidden
      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
      color: $theme-meta-color

      &:hover
        color: $theme-meta-color

  &-img
    float: left
    overflow: hidden
    width: 80px
    height: 80px

  &-post
    display: inline-block
    padding: 0 1rem
    width: calc(100% - 80px)

.category-lists
  padding: 1rem 0 1.5rem

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

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

  .category-list-count
    margin-left: .4rem
    color: $theme-meta-color

    &:before
      content: '('

    &:after
      content: ')'

// 隱藏aside
.hide-aside
  max-width: 1000px

  & > div
    width: 100% !important

@media screen and (max-width: $sm)
  .layout_page
    padding: 1rem 5px !important

    & > div:first-child:not(.recent-posts)
      padding: 1.8rem .7rem

  .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: 1rem 1rem 1.5rem
        width: 100%

        &.no-cover
          padding: 1.5rem 1rem

        .article-title
          font-size: 1rem

        .content
          height: auto

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

@media screen and (max-width: 900px)
  .layout_page
    & > div:first-child:not(.recent-posts)
      width: 100% !important

//ie10-ios11使用
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
  .recent-post-info
    .content
      height: 90px