From a946805b0fe2d52e99779a8ee96756596b1ef994 Mon Sep 17 00:00:00 2001
From: Despo Pentara <despo@despo.me>
Date: Mon, 30 May 2011 02:15:59 +0100
Subject: [PATCH] it should look like this...

---
 datamapper_example.rb |   3 +
 views/layout.haml     |  12 ++++
 views/posts.haml      |   2 +-
 views/style.sass      | 150 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 166 insertions(+), 1 deletion(-)
 create mode 100644 views/layout.haml
 create mode 100644 views/style.sass

diff --git a/datamapper_example.rb b/datamapper_example.rb
index edfe2d0..dfc3502 100644
--- a/datamapper_example.rb
+++ b/datamapper_example.rb
@@ -26,4 +26,7 @@ class DataMapperExample < Sinatra::Base
     redirect "/posts"
   end
 
+  get '/application.css' do
+    sass :style
+  end
 end
diff --git a/views/layout.haml b/views/layout.haml
new file mode 100644
index 0000000..9f2a54e
--- /dev/null
+++ b/views/layout.haml
@@ -0,0 +1,12 @@
+!!! 5
+%html
+  %head
+    %title a-datamapper-example
+    %link{ rel: 'stylesheet', href: '/application.css', type: 'text/css', medial: 'all' }
+  %body
+    %div.center{ style: 'margin:0 auto; width: 850px'}
+      %h1
+        %span.req a
+        %span.imp 'datamapper'
+        %span.req example
+      = yield
diff --git a/views/posts.haml b/views/posts.haml
index fe78778..b5c286a 100644
--- a/views/posts.haml
+++ b/views/posts.haml
@@ -6,7 +6,7 @@
     %tr
       %td.line_numbers
         %pre
-          - 1...200.times do |x|
+          - 1...30.times do |x|
             %span #{x}
 
       %td.main{ :width => "100%" }
diff --git a/views/style.sass b/views/style.sass
new file mode 100644
index 0000000..0f283bd
--- /dev/null
+++ b/views/style.sass
@@ -0,0 +1,150 @@
+body 
+  font-family: 'Bitstream Vera Sans Mono','Courier',monospace
+  font-size: 12px
+
+  h1 
+    font-family: Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace
+
+  input[type=text] 
+    border: none
+    border: 1px solid #ddd
+    padding: 0 5px
+    font-size: 16px
+    text-align: center
+    font-style: italic
+    width: 110px
+    margin: 0 5px
+
+  a 
+    font-weight: bold
+
+    &:hover 
+      text-decoration: none
+
+  .gist-file 
+    font-size: 12px
+
+  .title 
+    font-size: 18px
+
+  .list_posts 
+    margin-top: 20px
+
+  .comment, .post .body 
+    color: #999988
+    font-style: italic
+
+  .right 
+    float: right
+    width: 300px
+    font-size: 15px
+
+  .posta 
+    .body 
+      display: inline-block
+      background-color: #999
+      color: white
+      margin: 5px 0
+      padding: 10px
+      overflow: hidden
+      font: 115% Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace
+      width: 350px
+      border-radius: 5px
+
+
+  .post 
+    .comment 
+      display: inline-block
+      width: 550px
+
+  .post_body .id 
+    vertical-align: top
+
+  .method_name 
+    color: #990000
+    font-weight: bold
+
+  .like 
+    color: red
+    font-style: bold
+
+  .query 
+    line-height: 1.4em
+    margin-bottom: 20px
+
+  span.no 
+    color: #008080
+
+  span.dot 
+    font-weight: bold
+
+  span.sym 
+    color: #990073
+
+  span.imp
+    color: #DD1144
+    
+  span.req 
+    color: #0086B3
+
+
+  .get_links 
+    margin-top: 20px
+
+
+  .get_links div 
+    display: inline-block
+    width: 320px
+
+  .sort 
+    width: 450px
+    padding-left: 20px
+
+  .code_block 
+    display: inline-block
+    width: 300px
+
+  .like_block 
+    float: right
+
+  .line_numbers 
+    background-color: #ECECEC
+    margin: 0 5px 0 0
+    padding: 0 5px 0 0
+    text-align: right
+    color: #aaa
+
+  pre 
+    margin: 0
+    padding: 0
+
+  table 
+    margin-bottom: 20px
+    width: 850px
+
+  td 
+    border: 1px solid #ddd
+
+  td.main 
+    font-size: 12px
+    padding-left: 5px
+
+  span.id, div.id 
+    display: inline-block
+    width: 150px
+
+  thead 
+    background-color: #eee
+    height: 40px
+    padding: 5px
+
+  thead td 
+    padding-left: 10px
+
+  tr.head td 
+    font-family: Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace
+    color: #333
+    font-size: 12px
+
+  .content 
+    vertical-align: top