website gallery fix

potential fix for misaligned rows in website browsing gallery page.

public/assets/css/_project-sass/_project-Base.scss

@@ -18,7 +18,7 @@ body{background:#CCDF9B}
 // while allowing for larger sections to expand the whole page for BG purposes
 .content{
 	margin:0 auto;
-	max-width:1000px;
+	max-width:1200px;
 	padding:$spacing*5;
 	
 	& > :last-child{

public/assets/css/_project-sass/_project-Website-Gallery.scss

@@ -4,16 +4,16 @@
 
 .website-Gallery{
   list-style:none;
-  margin:0 auto;
-  padding:0;
-  width:90%;
+  padding:10px 0;
   
   li{
     @extend .col-25;
     float:left;
     margin-bottom:$spacing*2;
     
-    @media (max-device-width:480px), screen and (max-width:800px){width:50%}
+    @media (max-device-width:480px), screen and (max-width:800px){
+      width:50%
+    }
   }
   
   a{
@@ -22,15 +22,23 @@
   }
 }
 
-.neo-SS{
+.neo-SS, .neo-Screen-Shot{
   background:#fff;
   @include box-shadow($bs-4);
   display:block;
   height:auto!important;
   padding:$spacing*2;
+  position:relative;
   width:100%;
 }
 
-.hp-Gallery img{
+.img-Holder{
+  -moz-background-size:100% auto;
+  -webkit-background-size:100% auto;
+  background-size:100% auto;
+  display:block;
+}
+
+.hp-Gallery img, .neo-Screen-Shot img{
   width:100%
 }

public/assets/css/neo.css

@@ -935,7 +935,7 @@ body {
 
 .content, .footer-Content {
   margin: 0 auto;
-  max-width: 1000px;
+  max-width: 1200px;
   padding: 20px; }
   .content > :last-child, .footer-Content > :last-child {
     margin-bottom: 0; }
@@ -1385,9 +1385,7 @@ a {
 
 .website-Gallery {
   list-style: none;
-  margin: 0 auto;
-  padding: 0;
-  width: 90%; }
+  padding: 10px 0; }
   .website-Gallery li {
     float: left;
     margin-bottom: 8px; }
@@ -1398,7 +1396,7 @@ a {
     padding: 0 8px;
     display: block; }
 
-.neo-SS {
+.neo-SS, .neo-Screen-Shot {
   background: #fff;
   -moz-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
@@ -1406,7 +1404,14 @@ a {
   display: block;
   height: auto !important;
   padding: 8px;
+  position: relative;
   width: 100%; }
 
-.hp-Gallery img {
+.img-Holder {
+  -moz-background-size: 100% auto;
+  -webkit-background-size: 100% auto;
+  background-size: 100% auto;
+  display: block; }
+
+.hp-Gallery img, .neo-Screen-Shot img {
   width: 100%; }

views/browse.erb

@@ -39,12 +39,14 @@
       </div>
       
     </div> <!-- end .row.content -->
-
-  <ul class="row website-Gallery">
+<br />
+  <ul class="row website-Gallery content">
     <% @sites.each do |site| %>
       <li>
-        <a href="http://<%= site.username %>.neocities.org" target="_blank">
-          <img src="http://neocities.org/site_screenshots/<%= site.username %>.jpg" class="neo-SS" alt="<%= site.username %>" />
+        <a href="http://<%= site.username %>.neocities.org" class="neo-Screen-Shot" target="_blank" title="Website of <%= site.username %>">
+          <span class="img-Holder" style="background:url(http://neocities.org/site_screenshots/<%= site.username %>.jpg) no-repeat;">
+            <img src="/assets/img/placeholder.png" alt="<%= site.username %>" />
+          </span>
         </a>
       </li>
     <% end %>