Permalink
Browse files

add flickrbomb

  • Loading branch information...
1 parent d7a1191 commit 130dc92234744fad97014ff1af98860a037bb701 @evenwu committed Dec 1, 2011
View
@@ -3,7 +3,6 @@ GEM
specs:
activesupport (3.1.3)
multi_json (~> 1.0)
- addressable (2.2.6)
chunky_png (1.2.5)
coffee-script (2.2.0)
coffee-script-source
@@ -14,94 +13,60 @@ GEM
fssm (>= 0.2.7)
sass (~> 3.1)
daemons (1.1.4)
- em-websocket (0.3.5)
- addressable (>= 2.1.1)
- eventmachine (>= 0.12.9)
eventmachine (0.12.10)
execjs (1.2.9)
multi_json (~> 1.0)
fssm (0.2.7)
- guard (0.6.3)
+ guard (0.8.8)
thor (~> 0.14.6)
- guard-livereload (0.3.1)
- em-websocket (>= 0.2.0)
- guard (>= 0.4.0)
- multi_json (~> 1.0.3)
haml (3.1.4)
hike (1.2.1)
- http_router (0.10.2)
- rack (>= 1.0.0)
- url_mount (~> 0.2.1)
i18n (0.6.0)
- maruku (0.6.0)
- syntax (>= 1.0.0)
- middleman (2.0.14)
+ middleman (3.0.0.alpha.3)
+ activesupport (~> 3.1.0)
coffee-script (~> 2.2.0)
compass (~> 0.11.3)
execjs (~> 1.2.7)
- guard (~> 0.6.2)
+ guard (~> 0.8.8)
haml (~> 3.1.0)
- maruku (~> 0.6.0)
- middleman-livereload (~> 0.2.0)
- padrino-core (~> 0.10.5)
- padrino-helpers (~> 0.10.5)
+ i18n (~> 0.6.0)
rack (~> 1.3.5)
rack-test (~> 0.6.1)
+ rb-fsevent
sass (~> 3.1.7)
- sinatra (~> 1.3.1)
- slim (~> 1.0.2)
- sprockets (~> 2.0.3)
+ sprockets (~> 2.1.2)
+ sprockets-sass (~> 0.5.0)
thin (~> 1.2.11)
thor (~> 0.14.0)
tilt (~> 1.3.1)
- uglifier (~> 1.0.0)
- middleman-livereload (0.2.1)
- guard-livereload (~> 0.3.1)
+ uglifier (~> 1.1.0)
multi_json (1.0.4)
- padrino-core (0.10.5)
- activesupport (~> 3.1.0)
- http_router (~> 0.10.2)
- sinatra (~> 1.3.1)
- thor (~> 0.14.3)
- tilt (~> 1.3.0)
- padrino-helpers (0.10.5)
- i18n (~> 0.6)
- padrino-core (= 0.10.5)
rack (1.3.5)
- rack-protection (1.1.4)
- rack
rack-test (0.6.1)
rack (>= 1.0)
+ rb-fsevent (0.4.3.1)
sass (3.1.11)
- sinatra (1.3.1)
- rack (~> 1.3, >= 1.3.4)
- rack-protection (~> 1.1, >= 1.1.2)
- tilt (~> 1.3, >= 1.3.3)
- slim (1.0.4)
- temple (~> 0.3.4)
- tilt (~> 1.3.2)
- sprockets (2.0.3)
+ sprockets (2.1.2)
hike (~> 1.2)
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
- syntax (1.0.0)
- temple (0.3.4)
+ sprockets-sass (0.5.0)
+ sprockets (~> 2.0)
+ tilt (~> 1.1)
therubyracer-heroku (0.8.1.pre3)
thin (1.2.11)
daemons (>= 1.0.9)
eventmachine (>= 0.12.6)
rack (>= 1.0.0)
thor (0.14.6)
tilt (1.3.3)
- uglifier (1.0.4)
+ uglifier (1.1.0)
execjs (>= 0.3.0)
multi_json (>= 1.0.2)
- url_mount (0.2.1)
- rack
PLATFORMS
ruby
DEPENDENCIES
- middleman (~> 2.0.14)
+ middleman (~> 3.0.0.alpha.3)
therubyracer-heroku (~> 0.8.0)
View
@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+gem "middleman", "~>2.0.14"
+gem "therubyracer-heroku", "~>0.8.0"
View
@@ -8,7 +8,7 @@
# Change Compass configuration
compass_config do |config|
- config.output_style = :compress
+ config.output_style = :compressed
config.line_comments = false
end
View
@@ -4,9 +4,10 @@
- content_for :header do
.logo
.wrapper
- %h1= image_tag( lorem.image("200x50", :text => "Pinterest"), :alt => "" )
+ %h1= image_tag( lorem.image("200x50", :text => "L O G O"), :alt => "" )
.search
- = image_tag( lorem.image("200x50", :text => "Search box"), :alt => "" )
+ %ul
+ %li Search
.right
%ul
%li About
@@ -22,8 +23,8 @@
#container
- 100.times do
.item
- - @imgheight = ( rand(10) * 20 + 100 ).to_s
- = image_tag( lorem.image( "192x" + @imgheight ), :alt => "", :height => @imgheight )
+ - @imgheight = ( rand(20) * 10 + 150 ).to_s + "px"
+ = image_tag( "flickr://" + (lorem.first_name) , :alt => "",:width => "192px", :height => @imgheight, :class => "photo" )
%h2= lorem.sentence
.comments
= 1 + rand(10)
@@ -41,4 +42,6 @@
.chatbox
= image_tag( lorem.image("30x30"), :alt => "" )
%b= lorem.name
- %p= lorem.sentence
+ %p= lorem.sentence
+
+= javascript_include_tag( "jquery.flickrbomb.min.js" )
@@ -1,4 +1,3 @@
-//= require_tree .
$(function(){
$('#container').masonry({

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -3,7 +3,7 @@
%head
%meta{:charset => "utf-8"}
= stylesheet_link_tag 'main'
- = javascript_include_tag( "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js", "all" )
+ = javascript_include_tag( "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js", "jquery.masonry.min.js", "all" )
= yield_content :head
%body{:class => page_classes}
%header#hd
@@ -0,0 +1,40 @@
+/* Artfully masterminded by ZURB */
+/* -----------------------------------------
+THIS IS ALL DECLARED IN THE PLUGIN
+----------------------------------------- */
+.flickrbombWrapper{/* width:350px;height:200px;*/
+overflow:hidden;display:block;position:relative;}
+.flickrbombContainer{position:relative;}
+.flickrbombContainer img.placeholder { opacity: 0; }
+.flickrbombWrapper .setupIcon{display:none;}
+
+img.flickrbomb{/* width:100%;*/
+position:absolute;left:0;top:0; max-width: none;}
+.flickrbombFlyout{display:none;background:rgba(0,0,0,.9);width:345px;height:230px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid rgba(10,10,10,.95);-moz-box-shadow:1px 1px 9px rgba(0,0,0,.85);-webkit-box-shadow:1px 1px 9px rgba(0,0,0,.85);box-shadow:1px 1px 9px rgba(0,0,0,.85);background:-ms-linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/* IE10+ */
+filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1e21',endColorstr='#000000',GradientType=.5 );/* IE6-9 */
+background-image:-webkit-gradient(
+linear,
+left bottom,
+left top,
+color-stop(0.28,rgba(23,23,23,.7)),
+color-stop(1,rgba(48,48,48,.85))
+);background-image:-moz-linear-gradient(
+center bottom,
+rgba(23,23,23,.85) 28%,
+rgba(48,48,48,.85) 100%
+);padding:20px 35px 0px 45px;position:absolute;z-index:9999;}
+.flickrbombFlyout a.photo{display:block;overflow:hidden;width:100px;height:60px;float:left;margin:0 15px 15px 0;position:relative;}
+.flickrbombFlyout a.photo img{width:100%;}
+.flickrbombFlyout a.photo:hover{-moz-box-shadow:0 0 8px rgba(0,0,0,.7);-webkit-box-shadow:0 0 8px rgba(0,0,0,.7);box-shadow:0 0 8px rgba(0,0,0,.7);top:-1px;}
+.flickrbombFlyout a.prev,.flickrbombFlyout a.next{background:rgb(29,30,33);/* Old browsers */
+background:-moz-linear-gradient(left,rgba(29,30,33,.5) 0%,rgba(0,0,0,1) 100%);/* FF3.6+ */
+background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(29,30,33,.5)),color-stop(100%,rgba(0,0,0,.5)));/* Chrome,Safari4+ */
+background:-webkit-linear-gradient(left,rgba(29,30,33,.5) 0%,rgba(0,0,0,.5) 100%);/* Chrome10+,Safari5.1+ */
+background:-o-linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/* Opera11.10+ */
+background:-ms-linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/* IE10+ */
+filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1e21',endColorstr='#000000',GradientType=.5 );/* IE6-9 */
+background:linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/* W3C */
+border:1px solid #111;padding-top:95px;text-align:center;position:absolute;color:#fff;width:25px;overflow:hidden;height:113px;}
+.flickrbombFlyout a.prev:hover,.flickrbombFlyout a.next:hover{color:#666;border-color:#222;}
+.flickrbombFlyout a.prev{left:10px;}
+.flickrbombFlyout a.next{right:10px;}
@@ -1,6 +1,8 @@
+@import "flickrbomb";
@import "compass";
@include global-reset;
+
$bg: #faf7f7;
$color: #8c7e7e;
@@ -49,14 +51,14 @@ body {
position: absolute;
top: 0;
right: 0;
- ul {
- font-weight: bold;
- @extend .text-shadow;
- li {
- float: left;
- padding: 15px 27px 0 14px;
- }
- }
+ }
+ ul {
+ font-weight: bold;
+ @extend .text-shadow;
+ li {
+ float: left;
+ padding: 15px 27px 0 14px;
+ }
}
}
nav {
@@ -91,6 +93,9 @@ body {
background: white;
@include box-shadow( 0 1px 3px rgba(34,25,25,0.4) );
line-height: 1.5;
+ h2 {
+ padding-top: 5px;
+ }
.comments {
color: $color;
padding-bottom: 15px;

0 comments on commit 130dc92

Please sign in to comment.