// markdown容器样式

// 居中容器
.center-container
  text-align: center

h1, h2, h3, h4, h5, h6
  .center-container > &
    margin-top (0.5rem - $navbarHeight)
    padding-top ($navbarHeight + 1rem)
    margin-bottom 0
    a.header-anchor
      float none
      padding-right: 0
      margin-left: -.9rem


// 普通卡片列表
.cardListContainer
  margin .7rem 0
  &>:not(.card-list)
    display none
  .card-list
    margin -0.35rem
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    .card-item
      width calc(100%/3 - .7rem)
      margin .35rem
      background var(--bodyBg)
      border-radius 3px
      color var(--textColor)
      display flex
      box-shadow 1px 1px 2px 0 rgba(0,0,0,.06)
      transition all .4s
      &:hover
        text-decoration none
        box-shadow: 0 10px 20px -10px var(--randomColor, rgba(0,0,0,0.15));
        transform: translateY(-3px) scale(1.01, 1.01)
        img
          // transform rotate(8deg) scale(1.1, 1.1)
          box-shadow 3px 2px 7px rgba(0, 0, 0, 0.15)
        div p
          text-shadow 3px 2px 5px rgba(0, 0, 0, 0.15)
      img
        width 60px
        height 60px
        border-radius 50%
        border 2px solid #fff
        margin 1rem
        margin-right 0
        box-shadow 3px 2px 5px rgba(0, 0, 0, 0.08)
        transition all .4s
      div
        flex 1
        display inline-block
        float right
        padding 1rem 0
        p
          margin 0
          padding 0 1rem
          transition text-shadow .4s
          text-align center
        .name
          margin .2rem 0 .3rem 0
        .desc
          font-size .8rem
          line-height 1.1rem
          opacity .8
          margin-bottom .2rem
    .card-item.row-1
      width calc(100% - .7rem)
      img
        margin-left 2rem
    .card-item.row-2
      width calc(100%/2 - .7rem)
      img
        margin-left 1.5rem
    .card-item.row-3
      width calc(100%/3 - .7rem)
    .card-item.row-4
      width calc(100%/4 - .7rem)

// 图文卡片列表
.cardImgListContainer
  margin 1rem 0
  &>:not(.card-list)
    display none
  .card-list
    margin -0.5rem
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    .card-item
      width calc(100%/3 - 1rem)
      margin .5rem
      background var(--mainBg)
      border 1px solid rgba(0,0,0,0.1)
      box-sizing: border-box
      border-radius 3px
      overflow hidden
      color var(--textColor)
      box-shadow 2px 2px 10px rgba(0,0,0,.04)
      display flex
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      align-content: stretch;
      transition: all .4s
      &:hover
        box-shadow 1px 1px 20px rgba(0,0,0,.1)
        transform: translateY(-3px)
      .box-img
        overflow hidden
        position relative
        background #eee
        img
          display block
          width 100%
          height 100%
          transition: all .3s
        // &:hover
        //   img
        //     transform: scale(1.1, 1.1)
        //     opacity .75
      a
        color var(--textColor)
        transition: color .3s
        &:hover
          // color $accentColor
          text-decoration none
      .box-info
        padding: .8rem 1rem
        p
          margin 0
        .desc
          margin-top: .3rem
          opacity .8
          font-size: .9rem
          line-height: 1.1rem
          overflow: hidden;
          white-space: normal;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
      .box-footer
        overflow hidden
        padding: .8rem 1rem
        border-top:  1px solid rgba(0,0,0,0.1)
        img
          width 1.8rem
          height 1.8rem
          border-radius 50%
          float left
        span
          line-height 1.8rem
          float left
          margin-left: .6rem
          font-size: .8rem
    .card-item.row-1
      width calc(100% - 1rem)
    .card-item.row-2
      width calc(100%/2 - 1rem)
    .card-item.row-3
      width calc(100%/3 - 1rem)
    .card-item.row-4
      width calc(100%/4 - 1rem)

.theme-mode-dark
  .cardImgListContainer
    .card-list
      .card-item
        border-color: var(--borderColor)
        .box-footer
           border-color: var(--borderColor)

// 卡片列表的响应
@media (max-width: 900px)
  .cardListContainer
    .card-list
      .card-item.row-4
        width calc(100%/3 - .7rem)
  .cardImgListContainer
    .card-list
      .card-item.row-4
        width calc(100%/3 - 1rem)

@media (max-width: 720px)
  .cardListContainer
    .card-list
      .card-item.row-3, .card-item.row-4
        width calc(100%/2 - .7rem)
        img
          margin-left 1.5rem
  .cardImgListContainer
    .card-list
      .card-item.row-3, .card-item.row-4
        width calc(100%/2 - 1rem)

@media (max-width: 500px)
  .cardListContainer
    .card-list
      .card-item.row-1, .card-item.row-2, .card-item.row-3, .card-item.row-4
        width calc(100% - .7rem)
        img
          margin-left 1.5rem
  .cardImgListContainer
    .card-list
      .card-item.row-1, .card-item.row-2, .card-item.row-3, .card-item.row-4
        width calc(100% - 1rem)