Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Made font bigger.

  • Loading branch information...
commit c2480d74640c6b4e58f4222b55f8609f7a9a0ce8 1 parent 9b404e1
@timoxley timoxley authored
View
2  app/controllers/shots_controller.rb
@@ -1,7 +1,7 @@
class ShotsController < ApplicationController
def index
@page = params[:page]
- @shots = Dribbble::Shot.popular(:page => @page, :per_page => 10)
+ @shots = Dribbble::Shot.popular(:page => @page, :per_page => 12)
if request.xhr?
render :layout => false
View
17 app/views/layouts/application.html.haml
@@ -3,12 +3,13 @@
%head
%title InspiredShots
= stylesheet_link_tag :all
- = javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js', 'jquery.infinitescroll.js', 'application'
+ = javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js', 'jquery.infinitescroll.js', 'application', 'view'
%body
- %h1 InspiredShots
- %p Infinitely scrolling dribbble.
- %ul= yield
- %footer
- Created by #{link_to 'Odin Dutton', 'http://odindutton.com/'}.
-/ Ruby Dribbble API wrapper by Jeremy Weiskotten (http://github.com/jeremyw/swish)
-/ jQuery infinite scroll plugin by Brian Lopez (http://github.com/brianmario/jquery-infinite-scroll)
+ #content
+ %h1#title InspiredShots
+ %h4#subtitle &rarr; Infinitely scrolling <a href='http://dribbble.com'>dribbble</a>
+ %ul#feed= yield
+ %footer
+ Created by #{link_to 'Odin Dutton', 'http://odindutton.com/'}
+ / Ruby Dribbble API wrapper by Jeremy Weiskotten (http://github.com/jeremyw/swish)
+ / jQuery infinite scroll plugin by Brian Lopez (http://github.com/brianmario/jquery-infinite-scroll)
View
20 public/javascripts/application.js
@@ -1,16 +1,20 @@
jQuery(document).ready(function($) {
+
$(window).infinitescroll({
url: window.location.href,
- appendTo: 'ul'
+ appendTo: '#feed',
+ triggerAt: 620,
});
-
- $('ul').bind('infinitescroll.beforesend', function(e) {
- console.log('beforesend');
+
+ var feed = $('#feed');
+
+ // display loading animation
+ feed.bind('infinitescroll.beforesend', function() {
$(this).append('<li class="loading"></li>');
});
-
- $('ul').bind('infinitescroll.finish', function() {
- console.log('finish');
- $('li.loading').hide();
+
+ // hide loading animation
+ feed.bind('infinitescroll.finish', function() {
+ $('li.loading').fadeOut('fast');
});
});
View
31 public/javascripts/view.js
@@ -0,0 +1,31 @@
+
+
+function generateNoise(opacity) {
+ if ( !!!document.createElement('canvas').getContext ) {
+ return false;
+ }
+
+ var canvas = document.createElement("canvas"),
+ ctx = canvas.getContext('2d'),
+ x, y,
+ number,
+ opacityopacity = opacity || .2;
+
+ canvas.width = 200;
+ canvas.height = 200;
+
+ for ( x = 0; x < canvas.width; x++ ) {
+ for ( y = 0; y < canvas.height; y++ ) {
+ number = Math.floor( Math.random() * 60 );
+
+ ctx.fillStyle = "rgba(" + number + "," + number + "," + number + "," + opacity + ")";
+ ctx.fillRect(x, y, 1, 1);
+ }
+ }
+
+ document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
+}
+$(function() {
+ generateNoise(.05); // default opacity is .2
+})
+
View
29 public/stylesheets/sass/style.scss
@@ -21,15 +21,26 @@ sup,sub{vertical-align:baseline}
header, nav, section, article, footer{display:block;}
// -- Global -------------------------------------------------------------------
-body{color:#666;background:#111;width:400px;margin:20px auto;font:12px/140% 'Helvetica Neue', Arial, Sans-Serif;}
-h1{font-size:20px;margin-bottom:10px;color:#ea4c89;}
-p{magin-bottom:20px;}
-ul{
- li{margin:20px 0;background:#000;text-align:center;width:400px;height:300px;line-height:300px;
- img{margin:0 auto;}
- &.loading{background:url('../images/loading.gif') 50% 50% no-repeat;height:16px;}
+body{color:#8d8d8e;background:#111415;width:400px;margin:40px auto;font:12px/140% 'Helvetica Neue', Arial, Sans-Serif;}
+#title{font-size:61px;margin-bottom:40px;color:#ea4c89; text-shadow: 1px -1px 0px #fc629d; font-weight: bold}
+#subtitle{font-size: 21px; margin-bottom:30px; text-transform: lowercase; font-weight: normal; font-family: Palatino, 'Times New Roman', serif; text-align:right; text-shadow: 1px -1px 0px #000;}
+ul#feed{
+ li{margin:20px 0;background:#000;text-align:center;width:400px;height:300px;line-height:300px; position: relative;
+ img{margin:0 auto;
+ -moz-box-shadow: 1px 1px 0px #171b1c;
+ -webkit-box-shadow: 1px 1px 0px #171b1c;
+ box-shadow: 1px 1px 0px #171b1c;
+ }
+ .details{}
+ &.loading{background:url('../images/loading.gif') 50% 50% no-repeat;height:16px; margin: 40px auto;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+
}
}
-footer{text-align:center;
- a{color:#999;}
+footer{text-align:right; position: fixed; bottom: 10px; right: 20px;
+ a{color:#aaa;}
}
+a:link, a:visited, a:hover, a:active { color: #2B899D; }
View
60 public/stylesheets/style.css
@@ -69,34 +69,56 @@ header, nav, section, article, footer {
display: block; }
body {
- color: #666;
- background: #111;
+ color: #8d8d8e;
+ background: #111415;
width: 400px;
- margin: 20px auto;
+ margin: 40px auto;
font: 12px/140% "Helvetica Neue", Arial, Sans-Serif; }
-h1 {
- font-size: 20px;
- margin-bottom: 10px;
- color: #ea4c89; }
-
-p {
- magin-bottom: 20px; }
-
-ul li {
+#title {
+ font-size: 61px;
+ margin-bottom: 40px;
+ color: #ea4c89;
+ text-shadow: 1px -1px 0px #fc629d;
+ font-weight: bold; }
+
+#subtitle {
+ font-size: 21px;
+ margin-bottom: 30px;
+ text-transform: lowercase;
+ font-weight: normal;
+ font-family: Palatino, 'Times New Roman', serif;
+ text-align: right;
+ text-shadow: 1px -1px 0px black; }
+
+ul#feed li {
margin: 20px 0;
background: #000;
text-align: center;
width: 400px;
height: 300px;
- line-height: 300px; }
- ul li img {
- margin: 0 auto; }
- ul li.loading {
+ line-height: 300px;
+ position: relative; }
+ ul#feed li img {
+ margin: 0 auto;
+ -moz-box-shadow: 1px 1px 0px #171b1c;
+ -webkit-box-shadow: 1px 1px 0px #171b1c;
+ box-shadow: 1px 1px 0px #171b1c; }
+ ul#feed li.loading {
background: url("../images/loading.gif") 50% 50% no-repeat;
- height: 16px; }
+ height: 16px;
+ margin: 40px auto;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none; }
footer {
- text-align: center; }
+ text-align: right;
+ position: fixed;
+ bottom: 10px;
+ right: 20px; }
footer a {
- color: #999; }
+ color: #aaa; }
+
+a:link, a:visited, a:hover, a:active {
+ color: #2B899D; }
Please sign in to comment.
Something went wrong with that request. Please try again.