Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fix style and info

  • Loading branch information...
commit efb5b478f613ab2351a2ddce21773f5226aa9126 1 parent b49cab7
@evenwu authored
View
1  .powder
@@ -0,0 +1 @@
+pin
View
66 source/index.html.haml
@@ -1,45 +1,45 @@
- content_for :head do
- %title Pinterest clone html mockup
+ %title Pinterest clone html mockup (designed by rocodev)
- content_for :header do
.logo
.wrapper
- %h1= image_tag( lorem.image("200x50", :text => "L O G O"), :alt => "" )
- .search
- %ul
- %li Search
+ %h1= link_to( "Pinterest Clone Layout", "#" )
.right
%ul
%li About
- %li Login
+ %li
+ = link_to( "RocoDev", "http://rocodev.com" )
%nav
- .top-menu
- %ul
- %li Everything
- %li Videos
- %li Discussions
- %li Gifts
+ .wrapper
+ .top-menu
+ %ul
+ %li Everything
+ %li Videos
+ %li Discussions
+ %li Gifts
-#container
- - 50.times do |num|
- .item
- - @imgheight = ( rand(20) * 10 + 150 ).to_s + "px"
- = image_tag( lorem.image("192x" + @imgheight ) , :alt => "",:width => "192px", :height => @imgheight )
- %h2.lipsum
- .comments
- = 1 + rand(10)
- comments
- .chat
- .chatbox
- = image_tag( lorem.image( "30x30" ) , :alt => "",:width => "30px", :height => "30px" )
- %b= lorem.name
- via
- %b= lorem.name
- onto
- %b= lorem.words rand(3) + 1
- - @chat = rand(3)
- - @chat.times do
+.wrapper
+ #masonry
+ - 100.times do |num|
+ .item
+ - @imgheight = ( rand(20) * 10 + 150 ).to_s + "px"
+ = image_tag( lorem.image("192x" + @imgheight , :text => lorem.word, :random_color => "true" ) , :alt => "",:width => "192px", :height => @imgheight )
+ %h2.lipsum
+ .comments
+ = 1 + rand(10)
+ comments
+ .chat
.chatbox
- = image_tag( lorem.image( "30x30" ) , :alt => "",:width => "30px", :height => "30px" )
+ = image_tag( lorem.image( "30x30" , :text => lorem.word, :random_color => "true" ) , :alt => "",:width => "30px", :height => "30px" )
+ %b= lorem.name
+ via
%b= lorem.name
- %p= lorem.sentence
+ onto
+ %b= lorem.words rand(3) + 1
+ - @chat = rand(3)
+ - @chat.times do
+ .chatbox
+ = image_tag( lorem.image( "30x30" , :text => lorem.word, :random_color => "true" ) , :alt => "",:width => "30px", :height => "30px" )
+ %b= lorem.name
+ %p= lorem.sentence
View
24 source/javascripts/all.js
@@ -1,6 +1,24 @@
+function initLayout(){
+ var window_width = $(window).width();
+ if ( window_width > 960 ) {
+ wrapper_width = Math.floor( window_width / 240 ) * 240;
+ $('.wrapper').css("width", wrapper_width + "px" );
+ }
+}
-$(function(){
- $('#container').masonry({
- itemSelector : '.item'
+function resort(){
+ $('#masonry').masonry({
+ itemSelector : '.item',
+ isResizable: false
});
+}
+
+$(function(){
+ initLayout();
+ resort();
+});
+
+$(window).resize(function(){
+ initLayout();
+ resort();
});
View
4 source/layout.haml
@@ -15,4 +15,6 @@
= yield_content :header
.wrapper
#bd
- = yield
+ = yield
+ %a{:href => "https://github.com/evenwu/pinterest-clone-layout"}
+ %img{:alt => "Fork me on GitHub", :src => "https://a248.e.akamai.net/assets.github.com/img/5d21241b64dc708fcbb701f68f72f41e9f1fadd6/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67", :style => "position: fixed; top: 0; left: 0; border: 0; z-index: 1000;"}
View
25 source/stylesheets/main.css.scss
@@ -13,6 +13,10 @@ body {
padding-top: 150px;
}
+a {
+ @include link-colors(#369);
+}
+
.text-shadow {
text-shadow: 0 1px 0 white;
}
@@ -35,15 +39,19 @@ body {
padding: 7px 0;
border-bottom: 1px solid rgba(#000,.2);
h1 {
- width: 200px;
+ color: DarkRed;
+ width: 400px;
height: 50px;
margin: 0 auto;
- }
- .search {
- float: left;
- position: absolute;
- top: 0;
- left: 0;
+ text-align: center;
+ font-size: 26px;
+ line-height: 50px;
+ font-family: georgia, serif;
+ font-style: italic;
+ a {
+ @include link-colors(DarkRed);
+ @include unstyled-link;
+ }
}
.right {
float: right;
@@ -74,6 +82,9 @@ body {
padding-left: 7px;
color: rgba(#000,.3);
}
+ &:last-child:after {
+ content: none;
+ }
}
}
}
Please sign in to comment.
Something went wrong with that request. Please try again.