Skip to content

Instantly share code, notes, and snippets.

@hammerdr
Created November 19, 2012 20:36
Show Gist options
  • Save hammerdr/4113713 to your computer and use it in GitHub Desktop.
Save hammerdr/4113713 to your computer and use it in GitHub Desktop.
hammer time grid special
%ul
%li{style: "background-image: #{dynamic_image}"}>
= link_to :article_url do
%span.caption "Yanul Kabak brings to Afgan children... "
%span.details
Yanul Kabak brings to Afgan children
%small
The panel says it has 1,000 pages of evidence showing
Lance Armstrong's role in a...
%span.read-more
Read More
$frame-size: 200px;
$read-more-line-height: 24px;//a guess fill it in as needed
$read-more-font-size: 16px;//a guess fill it in as needed
li {
display: inline-block;
position: relative;
height: $frame-size;
width: $frame-size;
margin: 0 10px;
border: 5px solid #fff;
box-shadow: 0 1px 3px 0 rgba(0,0,0, .4);
background-color: red;
//these handle the bg-image
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
a, .details {
display: block;
height: 100%;
width: 100%; }
.caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0, .6); }
.details {
display: none;
padding: 20px;
background: rgba(0,0,0, .5); }
.read-more {
font-size: $read-more-font-size;
line-height: $read-more-line-height;
&:before {
content: "";
display: inline-block;
height: $read-more-line-height;
width: $read-more-line-height;
margin-right: 1em;
background: url("arrow-image-thingy") center center no-repeat;
background-size: contain; }
}
//----------------------------
// the li hover state
&:hover {
.caption { display: none; }
.details { display: block; }
}//&:hover
}//li
# Ellipsis options:
# 1:
# Truncate the text server side. That makes it easier.
# Multi-line ellipsis are js HEAVY and very very nasty.
# Multi-line ellipsis killed performance at ACE.
# 2:
# Single line and CSS ellipsis
# http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
<ul class="row">
<li class="span3 article-tile">
<a href="/test:article" class="article-tile-inside">
<img src="http://localhost:9292/BAhbCFsHOgZmSSI4aW1hZ2VzL2FuLWltYWdlODU5YWQxZmVmN2YwZmNkNTZmNDYxZGJjNjk2N2QyZTMucG5nBjoGRVRbCDoGcDoKdGh1bWJJIg0yNjB4MjYwIwY7BkZbBzsHOgpzdHJpcA?sha=4c75b037" alt="">
<div class="article-tile-overlay">
<div class="article-tile-caption">test234</div>
<div class="article-tile-leadin">test</div>
<div class="article-tile-readmore">Read More</div>
</div>
</a> </li>
</ul>
$red: #b61c26;
$white: white;
@mixin blur($blur-amount) {
-webkit-filter: blur($blur-amount);
-moz-filter: blur($blur-amount);
-ms-filter: blur($blur-amount);
-o-filter: blur($blur-amount);
filter: blur($blur-amount);
}
.article-tile {
height: 200px;
width: 200px;
background-color: $white;
border: #ccc solid thin;
color: $white;
@include box-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
.article-tile-caption {
font-size: 13px;
font-weight: bold;
}
.article-tile-leadin {
line-height: 16px;
padding-top: 10px;
}
.article-tile-readmore {
color: $white;
font-weight: bold;
height: 14px;
line-height: 14px;
position: absolute;
right: 20px;
bottom: 20px;
&:before {
content: '';
display: inline-block;
background-image: url(/assets/glyphicons-halflings-white.png);
background-position: -240px -144px;
height: 14px;
line-height: 14px;
width: 14px;
margin-top: 2px;
vertical-align: bottom;
}
}
.article-tile-inside {
margin: 5px;
color: $white;
display: block;
background-color: $red;
position: relative;
height: 190px;
img { @include box-sizing(border-box); }
overflow: hidden;
}
.article-tile-overlay {
@include box-sizing(border-box);
position: absolute;
bottom: 0;
padding: 20px;
width: 100%;
background-color: rgba(0,0,0,0.5);
.article-tile-leadin { display: none; }
.article-tile-readmore { display: none; }
}
&:hover {
img { @include blur(5px); }
.article-tile-caption { font-size: 16px; }
.article-tile-overlay {
top: 0;
height: 100%;
.article-tile-leadin { display: block; }
.article-tile-readmore { display: inline-block; }
}
}
}
<div class='row'>
<% articles.take(3).each do |article| %>
<div class='span3 article-tile'>
<div class='article-tile-inside'>
<% if image = article.sorted_images.first %>
<a href="<%= @page.get_article_url(article._id) %>"><img src="<%= hermes_image_url(image.cloud_file_key, width: 260, height: 260) %>" alt="<%= image.caption %>" /></a>
<% end %>
<div class='article-tile-overlay'>
<div class='article-tile-caption'><%= truncate(article.headline, length: 50) %></div>
<div class='article-tile-leadin'><%= truncate(article.summary, length: 80) %></div>
<a href="<%= @page.get_article_url(article._id) %>" class='article-tile-readmore' >
<i class='icon-circle-arrow-right icon-white'>&nbsp;</i>
<span class='article-tile-readmore-text'>Read More</span>
</a>
</div>
</div>
</div>
<% end %>
</div>
$red: #b61c26;
$white: white;
@mixin blur($blur-amount) {
-webkit-filter: blur($blur-amount);
-moz-filter: blur($blur-amount);
-ms-filter: blur($blur-amount);
-o-filter: blur($blur-amount);
filter: blur($blur-amount);
}
.article-tile {
height: 200px;
width: 200px;
background-color: $white;
border: #ccc solid thin;
color: $white;
@include box-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
.article-tile-caption {
font-size: 13px;
font-weight: bold;
}
.article-tile-leadin {
line-height: 16px;
padding-top: 10px;
}
.article-tile-readmore {
color: $white;
font-weight: bold;
text-decoration: none;
position: absolute;
bottom: 20px;
right: 20px;
}
.article-tile-inside {
margin: 5px;
background-color: $red;
position: relative;
height: 190px;
img { @include box-sizing(border-box); }
overflow: hidden;
}
.article-tile-overlay {
@include box-sizing(border-box);
position: absolute;
bottom: 0;
padding: 20px;
width: 100%;
background-color: rgba(0,0,0,0.5);
.article-tile-leadin { display: none; }
.icon-circle-arrow-right { display: none; }
.article-tile-readmore { display: none; }
}
&:hover {
img { @include blur(5px); }
.article-tile-caption { font-size: 16px; }
.article-tile-overlay {
top: 0;
height: 100%;
.article-tile-leadin { display: block; }
.article-tile-readmore { display: block; }
.icon-circle-arrow-right { display: inline-block; }
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment