Prepare for deployment

- convert to sass styling
  - move config to rackup file

.gitignore

@@ -1 +1,2 @@
 *.db
+.sass-cache

config.ru

@@ -0,0 +1,5 @@
+require './main'
+
+DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://#{Dir.pwd}/development.db")
+
+run Sinatra::Application

main.rb

@@ -1,8 +1,7 @@
 require 'sinatra'
 require 'data_mapper'
 require 'haml'
-
-DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://#{Dir.pwd}/development.db")
+require 'sass'
 
 class Task
   include DataMapper::Resource
@@ -20,6 +19,11 @@ end
 
 DataMapper.finalize
 
+get '/styles.css' do
+  content_type 'text/css', :charset => 'utf-8'
+  scss :styles
+end
+
 get '/' do
   @lists = List.all(:order => [:name])
   haml :index

public/styles.css

@@ -1,58 +0,0 @@
-h1.logo{
-  font-family: helvetica,arial,sans-serif;
-  font-size: 24px;
-  color: black;
-  padding: 64px 0 0;
-  margin: 0 auto;
-  text-transform: uppercase;
-  text-align: center;
-  font-weight: normal;
-  letter-spacing: 0.3em;
-  background: transparent url(/logo.png) 50% 0 no-repeat;
-  }
-.completed{
-  text-decoration: line-through;
-  }
-.tasks{
-  padding:0;
-  list-style:none;
-  }
-.task{
-  position:relative;
-  padding:2px 0 2px 28px;
-  border-bottom: dotted 1px #ccc;
-}
-form.update{
-  position:absolute;
-  bottom:2px;
-  left:0;
-  }
-form.update input{
-  background:white;
-  color:gray;
-  padding:0 2px;
-  border:none;
-  cursor:pointer;
-}
-.tasks li.completed form.update input{
-  color:#47FD6B;
-  }
-form.delete{
-  display:inline;
-  }
-form.delete input{
-  background:none;
-  cursor:pointer;
-  border:none;
-  }
-.lists{
-  padding:0;
-  list-style:none;
-  overflow:hidden;
-  }
-.list{
-  float: left;
-  width:23%;
-  margin:0 1%;
-  border-top:solid 5px #ccc;
-  }

views/styles.scss

@@ -0,0 +1,152 @@
+$orange:#D78123;
+$blue:#1E1641;
+$green:#02d330;
+$grey: #999;
+
+$background:$blue;
+$logo-color:white;
+$heading-color:$orange;
+
+@mixin button($color){
+    background:$color;
+    border: 2px solid darken($color,15%);
+    cursor: pointer;
+    color: #fff;
+    width: 150px;
+    margin-left:4px;
+}
+
+body{
+  background:$background;
+  padding:0;
+  margin:0;
+}
+
+h1.logo{
+  font-family: helvetica,arial,sans-serif;
+  font-size: 24px;
+  color:$logo-color;
+  padding:64px 0 0;
+  margin: 0 auto;
+  text-transform: uppercase;
+  text-align: center;
+  font-weight: normal;
+  letter-spacing: 0.3em;
+  background: transparent url(/logo.png) 50% 0 no-repeat;
+}
+
+.new-list{
+  margin: 0 auto;
+  padding: 10px;
+  width: 424px;
+  input{
+    padding: 4px 8px;
+    font-size: 24px;
+    border:none;
+    font-weight: bold;
+    width: 250px;
+  }
+  .button{
+    @include button($orange);
+  }
+}
+
+
+.completed{
+  text-decoration: line-through;
+}
+
+.tasks{
+  padding:0;
+  list-style:none;
+}
+
+.task{
+  font-family: helvetica,arial,sans-serif;
+  font-size: 12px;
+  color:#444;
+  position:relative;
+  padding:2px 0 2px 28px;
+  border-bottom: dotted 1px #ccc;
+}
+
+form.update{
+  position:absolute;
+  bottom:2px;
+  left:0;
+  input{
+    background: white;
+    color: white;
+    padding:0 2px;
+    border:solid 1px $grey;
+    cursor:pointer;
+    width:20px;
+    height:20px;
+  }
+}
+
+.tasks li.completed form.update input{
+  color:$green;
+  font-weight: bold;
+}
+
+form.delete{
+  display:inline;
+}
+
+form.delete input{
+  color: white;
+  background:none;
+  cursor:pointer;
+  border:none;
+}
+
+.lists{
+  padding:0;
+  list-style:none;
+  overflow:hidden;
+  clear: left;
+  padding-top: 20px;
+}
+
+.list{
+  float: left;
+  position: relative;
+  width:21%;
+  margin:0 1% 20px;
+  padding: 0 1% 8px;
+  border-top: solid 5px $green;
+  background: #fff;
+  background: rgba(#fff,0.7);
+  padding-bottom: 20px;
+
+  h1{
+    text-align:center;
+    font-family: helvetica,arial,sans-serif;
+    font-size: 20px;
+    color:$heading-color;
+    margin:0;
+  }
+  form.new input{
+    width: 80%;
+    display: block;
+    margin:0 auto 8px;
+  }
+  form.destroy input{
+    display: block;
+    margin:0;
+    position:absolute;
+    top:2px;
+    right:2px;
+    background: transparent;
+    border: 1px solid $grey;
+    color: $grey;
+    font-size:16px;
+    opacity:0.6;
+    &:hover{
+      opacity:1;
+      background: #fff;
+      color: $green;
+    }
+  }
+}