neocities/sass/_project-sass/_project-Website-Gallery.scss

// ----------------------------------------------------------------
//		Project Specific: Browse Websites Gallery
// ----------------------------------------------------------------

.website-Gallery{
  list-style:none;
  padding:30px 24px;
  
  li{
    @extend .col-25;
    float:left;
    margin-bottom:$spacing*2;
    color: #666;
    @include box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.18));
    
    @media (max-device-width:480px), screen and (max-width:800px){
      width:50%
    }
  }
  
//  li a {
//    display:block;
//  }
  .site-info {
    a, a:visited {
      color: #666;
      font-size: 80%;
    }
    .username {
      float: left;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 63%;
      height: 1.3em;
      white-space: nowrap;
    }
    .site-stats {
      float: right;
      overflow: hidden;
      width: 35%;
      text-align: right;
    }
    .site-tags {
      width: 100%;
      height: 1.4em;
      float: left;
      margin-top: -4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .site-tags .fa-tag {
      vertical-align: -2px;
    }
    .fa-user {
      margin-right: .45em;
    }
  }
  .title {
    margin-top: 8px;
    margin-bottom: 2px;
    white-space: nowrap;
    a {
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      float: left;
    }
  }
  
  &.int-Gall{
    
    li {
      margin:0 .5% 12px;
      width:24%;
      
      background-color: white;
      border: 9px solid white;
      overflow: hidden;

      @media (max-width:1000px){
        width:32%
      }      
      @media (max-device-width:480px), screen and (max-width:800px){
        width:48%;
        margin:0 1% 12px;
      }
    }
    &.suggestions {
      padding: .25em 0 0 0;
      
      li {
        margin: 0 1.33% 12px 0;
        width: 32%;
        @include box-shadow(1px 1px 2px 1px rgba(0, 0, 0, 0.1));

        @media (max-width:1000px){
          width:48%
        } 
      }
    }
    
    @media (max-device-width:480px), screen and (max-width:800px){
      padding: 4% 2%;
    }
  }

  .admin {
    font-size: 80%;
    form {
      display: inline;
      padding-right: 10px;
    }

    button {
      background:none!important;
      border:none;
      padding:0!important;
      cursor: pointer;
    }
  }
}

.neo-SS, .z{
  border: 4px solid #eee;
  display:block;
  height:auto!important;
  position:relative;
  width:100%;
}

.img-Holder{
  -moz-background-size:cover!important;
  -webkit-background-size:cover!important;
  background-size:cover!important;
  display:block;
  border: 1px solid #eee;
}
.hp-Gallery img, .neo-Screen-Shot img{
  width:100%
}
.hp-Gallery {
  padding: 0px;
  margin-bottom: 0;
  margin-left: 5.7%;

  li {
    width: 14.5%;
    margin-right: 1.5%;
    margin-bottom: 0;
    
    @media (max-device-width:480px), screen and (max-width:800px){
      width:45%;
      margin-bottom: 8px;
      margin-right: 0;
      margin-left: 1.5%;
    }
  }
  li:last-child {
    margin-right: 0;
  }
}