website gallery fix

potential fix for misaligned rows in website browsing gallery page.
This commit is contained in:
Scott O'Hara 2013-09-15 21:28:09 -04:00
parent c3ceedbbe9
commit e8f13c4c23
6 changed files with 33 additions and 18 deletions

View file

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

View file

@ -4,16 +4,16 @@
.website-Gallery{ .website-Gallery{
list-style:none; list-style:none;
margin:0 auto; padding:10px 0;
padding:0;
width:90%;
li{ li{
@extend .col-25; @extend .col-25;
float:left; float:left;
margin-bottom:$spacing*2; 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{ a{
@ -22,15 +22,23 @@
} }
} }
.neo-SS{ .neo-SS, .neo-Screen-Shot{
background:#fff; background:#fff;
@include box-shadow($bs-4); @include box-shadow($bs-4);
display:block; display:block;
height:auto!important; height:auto!important;
padding:$spacing*2; padding:$spacing*2;
position:relative;
width:100%; 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% width:100%
} }

View file

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

File diff suppressed because one or more lines are too long

BIN
public/img/placeholder.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 991 B

View file

@ -39,12 +39,14 @@
</div> </div>
</div> <!-- end .row.content --> </div> <!-- end .row.content -->
<br />
<ul class="row website-Gallery"> <ul class="row website-Gallery content">
<% @sites.each do |site| %> <% @sites.each do |site| %>
<li> <li>
<a href="http://<%= site.username %>.neocities.org" target="_blank"> <a href="http://<%= site.username %>.neocities.org" class="neo-Screen-Shot" target="_blank" title="Website of <%= site.username %>">
<img src="http://neocities.org/site_screenshots/<%= site.username %>.jpg" class="neo-SS" alt="<%= 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> </a>
</li> </li>
<% end %> <% end %>