crispgm/holy-images

$almost-white: #fbfbfb;
$dark-shadow: #aaa;
$light-border: #eee;

figure {
  margin: 0;
}

.upload {
  margin-top: .4rem;

  [type=text],
  [type=password] {
    border: 1px solid $dark-shadow;
    border-radius: 2px;
    font-size: 1.5rem;
    width: 100%;
  }

  [type=submit] {
    font-size: 1.2rem;
  }

  [type=file] {
    border: 1px solid $dark-shadow;
    border-radius: 2px;
    height: 2rem;
    line-height: 2rem;
    padding: 0 .8rem;
    width: 100%;
  }

  select {
    border: 1px solid $dark-shadow;
    border-radius: 2px;
    height: 2rem;
    line-height: 2rem;
    width: 8rem;
  }
}

.gravatar {
  img {
    height: 2rem;
    width: 2rem;
  }
}

.section-explore {
  display: flex;
  flex-wrap: wrap;
}

.section-square {
  padding-left: .3rem;
  padding-top: .2rem;

  img {
    height: 11rem;
    width: 11rem;
  }

  &:hover {
    .section-overlay {
      display: block;
    }
  }
}

.section-overlay {
  color: $almost-white;
  display: none;
  font-size: 1rem;
  font-weight: bold;
  height: 11rem;
  line-height: 11rem;
  position: absolute;
  text-align: center;
  width: 11rem;
  z-index: 999;

  .fa {
    margin-right: .4rem;
  }
}

.section-blur {
  img {
    // scss-lint:disable VendorPrefix
    -webkit-filter: none;
    filter: none;
  }

  &:hover {
    img {
      // scss-lint:disable VendorPrefix
      // -webkit-filter: blur(2px);
      // filter: blur(2px);
    }
  }
}

@media (max-width: 36rem) {
  .section-explore {
    display: flex;
    flex-wrap: wrap;
  }

  .section-square {
    // width: 33%;
    // height: 33%;
    text-align: center;
  }

  .section-square img {
    height: 7.6rem;
    width: 7.6rem;
  }

  .section-overlay {
    display: none;
  }

  .section-square:hover .section-overlay {
    display: none;
  }
}

.site-menu .fa {
  font-size: 1.5rem;
  margin-left: .4rem;
}

.comment-new {
  border: .1rem solid $dark-shadow;
  border-radius: 4px;
  height: 3rem;
  padding: .4rem;
  width: 100%;
}

.section-comment {
  border-top: .1rem solid $light-border;
  padding-bottom: .4rem;
  padding-top: .8rem;
}

.section-comment-content {
  padding-bottom: .4rem;
  padding-top: .4rem;
}

.section-comment-name {
  width: 4rem;
}