$friend-link-item-height = 82px
$friend-link-item-height-tablet = 68px
$friend-link-item-interval = 16px
$friend-link-item-border-radius = 6px

.page-template-container {

  keep-container(false, 0, 0, 30px, 30px)

  .page-template-content {
    color var(--default-text-color)

    h1
    h2
    h3
    h4
    h5
    h6 {

      &:first-child {
        margin-top 0
      }
    }
  }


  if (hexo-config('menu.Links')) {
    .friends-link-container {

      .friends-link-list {
        position relative

        .friends-link-item {
          position relative
          float left
          box-sizing border-box
          width 50%
          height $friend-link-item-height
          padding-bottom $friend-link-item-interval
          cursor pointer

          +keep-tablet() {
            height $friend-link-item-height-tablet
          }

          &:nth-child(odd) {
            padding-right $friend-link-item-interval * 0.5
          }

          &:nth-child(even) {
            padding-left $friend-link-item-interval * 0.5
          }

          .content {
            position relative
            box-sizing border-box
            width 100%
            height 100%
            padding-left $friend-link-item-height - $friend-link-item-interval
            border-radius $friend-link-item-border-radius
            box-shadow 1px 1px 2px var(--shadow-color)


            +keep-tablet() {
              padding-left $friend-link-item-height-tablet - $friend-link-item-interval
            }

            &:hover {
              box-shadow 1px 1px 6px var(--shadow-color)

              .info .name {
                color var(--primary-color)
              }
            }

            .radius {
              border-top-left-radius $friend-link-item-border-radius
              border-bottom-left-radius $friend-link-item-border-radius
            }

            .avatar {
              position absolute
              top 0
              left 0
              display flex
              align-items center
              justify-content center
              width $friend-link-item-height  - $friend-link-item-interval
              height 100%
              color var(--second-text-color)
              font-size 2rem
              background var(--second-background-color)


              +keep-tablet() {
                width $friend-link-item-height-tablet  - $friend-link-item-interval
              }

              img {
                position relative
                box-sizing border-box
                width 100%
                height 100%
              }
            }


            .info {
              position relative
              display flex
              flex-direction column
              align-items center
              justify-items flex-start
              box-sizing border-box
              width 100%
              height 100%
              padding 10px

              +keep-tablet() {
                padding 6px
              }

              .name {
                width 100%
                height 60%
                color var(--second-text-color)
                font-size 1.28rem

                +keep-tablet() {
                  font-size 1.08rem
                }
              }

              .description {
                width 100%
                height 40%
                color var(--third-text-color)
                font-size 1rem


                +keep-tablet() {
                  font-size 0.98rem
                }
              }

              .ellipsis {
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
              }
            }
          }
        }
      }
    }
  }
}