_person.scss

// 名片 (media object)
// 容器
@mixin person-container {
  // 为了让每一行的名片高度统一, Flexbox 搞起
  // oldIE 是什么, 可以吃吗?
  @include media($non-mobile) {
    .browser-modern & {
      @include display(flex);
      @include flex-wrap(wrap);
    }
  }
}


// 名片
.person {
  @include clearfix;

  // 名片外观
  @include media($non-mobile) {
    background-color: $person-card-bg;

    border: 1px solid $person-card-border-color;
    box-shadow: 0 0.5em 1em $person-card-shadow-color;

    margin-bottom: 2em;
    padding: 1em;
  }

  @include media($mobile) {
    border-bottom: 1px solid $person-card-border-color;
    padding: 1em;

    &:hover {
      background-color: $person-card-bg;
    }

    &:last-child {
      border-bottom: none;
    }
  }

  // 布局
  @include media($wide) {
    .browser-modern & {
      @include flex(0 0 flex-grid(6));

      &:nth-child(2n) {
        margin-left: flex-gutter();
      }
    }

    .browser-ie & {
      @include span-columns(6);
      @include omega(2n);
    }
  }

  @include media($narrow) {
    .browser-modern & {
      @include flex(0 0 flex-grid(3, 6));

      &:nth-child(2n) {
        margin-left: flex-gutter(6);
      }
    }

    .browser-ie & {
      @include span-columns(6);
      @include omega(2n);
    }
  }

  @include media($mobile) {
    @include span-columns(4);
  }
}

.person__name {
  font-size: 125%;
  font-weight: 600;

  margin-bottom: 0.5em;
}

// 头像
// 说是 link, 实际上还承担着固定尺寸容器的作用
// TODO: 重构
$avatar-size: 80px;
.person__avatar-link {
  float: left;
  margin-right: 1em;

  width: $avatar-size;
  height: $avatar-size;

  // 头像图片宽度撑不满容器的话, 也要居中显示
  text-align: center;
}

.person__avatar {
  display: inline-block;

  max-width: $avatar-size;
  max-height: $avatar-size;

  border-radius: 0.5em;
}

// 介绍文字
// .person__intro {
  // color: $text-secondary-color;

  // .person:hover > .person__desc > & {
  //   color: inherit;
  // }
// }


// vim:set ai et ts=2 sw=2 sts=2 fenc=utf-8: