Permalink
Browse files

use sass and compass

  • Loading branch information...
1 parent 7dfbf66 commit 7c57c3ff432ae025e2074339fe554ffd0162696f @jarmo committed Apr 17, 2012
Showing with 71 additions and 45 deletions.
  1. +1 −0 .gitignore
  2. +2 −0 Gemfile
  3. +9 −0 Gemfile.lock
  4. +18 −0 programming-quotes.rb
  5. +0 −45 public/style.css
  6. +41 −0 views/style.scss
View
@@ -14,3 +14,4 @@ spec/reports
test/tmp
test/version_tmp
tmp
+/.sass-cache
View
@@ -2,4 +2,6 @@ source :rubygems
gem "sinatra"
gem "haml"
+gem "sass"
+gem "compass"
gem "yajl-ruby"
View
@@ -1,10 +1,17 @@
GEM
remote: http://rubygems.org/
specs:
+ chunky_png (1.2.5)
+ compass (0.11.5)
+ chunky_png (~> 1.2)
+ fssm (>= 0.2.7)
+ sass (~> 3.1)
+ fssm (0.2.7)
haml (3.1.4)
rack (1.4.1)
rack-protection (1.2.0)
rack
+ sass (3.1.10)
sinatra (1.3.2)
rack (~> 1.3, >= 1.3.6)
rack-protection (~> 1.2)
@@ -18,6 +25,8 @@ PLATFORMS
x86-mingw32
DEPENDENCIES
+ compass
haml
+ sass
sinatra
yajl-ruby
View
@@ -1,9 +1,22 @@
# encoding: UTF-8
require "sinatra"
require "haml"
+require "sass"
+require "compass"
require "yaml"
require "yajl"
+configure do
+ Compass.configuration do |config|
+ config.project_path = File.dirname(__FILE__)
+ config.sass_dir = 'views'
+ config.output_style = :compressed
+ end
+
+ set :haml, {:format => :html5}
+ set :scss, Compass.sass_engine_options
+end
+
def quotes
#@quotes = YAML.load <<-EOF
#EOF
@@ -29,3 +42,8 @@ def format quote
Yajl::Encoder.encode format(quotes.sample)
end
+get '/style.css' do
+ content_type 'text/css', :charset => 'utf-8'
+ scss :style
+end
+
View
@@ -1,45 +0,0 @@
-html {min-height: 100%}
-
-body {
- background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #425370 100%);
- background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #425370 100%);
- background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #425370 100%);
- background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #425370));
- background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #425370 100%);
- background-image: linear-gradient(bottom, #FFFFFF 0%, #425370 100%);
- background-color: #425370;
- color: #353535;
- font: 2.6em/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-#container {height: 100%}
-
-blockquote {
- font-weight: bold;
- margin-top: 300px;
- margin-left: auto;
- margin-right: auto;
- width: 700px;
- display: none;
-}
-
-.content {
- font-size: 32px;
- line-height: 1.2;
-}
-
-.quote {
- font-size: 250px;
- float: left;
- margin-top: -93px;
- padding-right: 10px;
-}
-
-.author {
- text-align: right;
- font-size: 20px;
- margin-top: -20px;
- color: #454545;
-}
-
-.author:before {content: '\2014 ';}
View
@@ -0,0 +1,41 @@
+@import "compass/reset";
+@import "compass/css3/images";
+
+html { min-height: 100%; }
+
+body {
+ background-color: #425370;
+ @include background-image(linear-gradient(#425370, #fff));
+ color: #353535;
+ font: 2.6em / 1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+#container { height: 100%; }
+
+blockquote {
+ font-weight: bold;
+ margin-top: 300px;
+ margin-left: auto;
+ margin-right: auto;
+ width: 700px;
+ display: none;
+}
+
+.content {
+ font-size: 32px;
+ line-height: 1.2;
+}
+
+.quote {
+ font-size: 250px;
+ float: left;
+ margin-top: -93px;
+ padding-right: 10px;
+}
+
+.author {
+ text-align: right;
+ font-size: 20px;
+ color: #454545;
+ &:before { content: '\2014 '; }
+}

0 comments on commit 7c57c3f

Please sign in to comment.