_members.scss

.members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  @media screen and (min-width: (800/16)*1em) {
    max-width: 72%;
    float: left;
    justify-content: flex-start;
  }
}

.member {
  padding: 0;
  position: relative;
  width: (160/$base-font-size)*1em;
  // min-height: (240/$base-font-size)*1em;
  flex-basis: (160/$base-font-size)*1em;
  margin: 0 1em 1em 0;
  display: block;
  float: left;
  flex-grow: 0;
  flex-shrink: 1;
  // flex-basis: 25%;
  img {
    width: 100%;
    display: block;
    border: none;
  }
  a.website {
    position: relative;
    display: block;
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: (160/$base-font-size)*1em;
    }
    &:hover::before, &:focus::before {
      background-color: $text-color;
      background-color: rgba($text-color, 0.5);
    }
    &::after {
      content: '';
      display: none;
      width: (54/$base-font-size)*1em;
      height: (44/$base-font-size)*1em;
      position: absolute;
      z-index: 2;
      top: (58/$base-font-size)*1em;
      left: 50%;
      margin-left: (-27/$base-font-size)*1em;
      background-image: url('/images/social_icons@1x.png');
      background-position: center (-44/$base-font-size)*1em;
      background-size: (54/$base-font-size)*1em auto;
      background-repeat: no-repeat;
    }
    &:hover::after, &:focus::after {
      display: block;
    }
  }
}

.member--name {
  font-size: (14/$base-font-size)*1em;
  display: block;
  height: 1.4em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  // font-style: italic;
  // left: 0;
  // bottom: 0;
  // padding: 0 0.4em;
  // border: 2px solid $background-color;
  // border-left: none;
  // border-bottom: none;
  // position: absolute;
  // background-color: $text-color;
  // background-color: rgba($text-color, 0.7);
  // color: $background-color;
}

.member--links {
  list-style: none;
  margin: 0;
  padding: 0;
  // position: absolute;
  // top: 0;
  // left: 0;
  // right: 0;
  // height: (160/$base-font-size)*1em;
  // overflow: auto;
  // display: none;
  // background-color: rgba($background-color, 0.8);
  // :hover > &, :focus > & {
  //   display: block;
  // }
  li {
    display: block;
    float: left;
    width: 33%;
  }
  a {
    color: transparent;
    text-indent: -999em;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 80%;
    border: (3/$base-font-size)*1em solid transparent;
    border-radius: (3/$base-font-size)*1em;
    box-sizing: border-box;
    background-image: url('/images/social_icons@1x.png');
    background-position: center top;
    background-size: (54/$base-font-size)*1em auto;
    background-repeat: no-repeat;
    @media screen and (min-resolution: 1.4dppx) {
      background-image: url('/images/social_icons@2x.png');
    }
    @media screen and (min-resolution: 2.4dppx) {
      background-image: url('/images/social_icons@3x.png');
    }
    &.github {
      background-position: center (-44/$base-font-size)*2em;
    }
    &.twitter {
      background-position: center (-44/$base-font-size)*3em;
    }
    &.linkedin {
      background-position: center (-44/$base-font-size)*4em;
    }
    &.bitbucket {
      background-position: center (-44/$base-font-size)*5em;
    }
    &.stackoverflow {
      background-position: center (-44/$base-font-size)*6em;
    }
    &.gitlab {
      background-position: center (-44/$base-font-size)*7em;
    }
    &.facebook {
      background-position: center (-44/$base-font-size)*8em;
    }
    &:hover {
      background-color: #ddd;
    }
    &:focus {
      border-color: $text-color;
      outline: none;
    }
  }
}

.member_intro {
  margin-bottom: 2em;
  @media screen and (min-width: (800/16)*1em) {
    max-width: 25%;
    padding-right: 3%;
    float: left;
    clear: both;
  }
}