Style and layout improvements

public/style.css

@@ -1,9 +1,9 @@
 body
 {
-  background-color: beige;
+  background-color: #eee;
   font-family: Helvetica, Arial, sans-serif;
-  width: 760px;
-  margin: 40px auto;
+  width: 450px;
+  margin: 60px auto;
   
 }
 
@@ -16,4 +16,30 @@ input
 .highlight
 {
   background-color: yellow;
-}
+}
+
+#main
+{
+  margin: 60px 0;
+}
+
+#footer
+{
+  font-size: 90%;
+  text-align: right;
+}
+
+a, a:visited
+{
+  padding: 2px 5px;
+  background-color: #333;
+  color: #fff;
+  text-decoration: none;
+}
+
+a:hover
+{
+  background-color: #fff;
+  color: #333;
+}
+

views/home.haml

@@ -1,6 +1,9 @@
+%h2
+  Who are my local candidates in the Sutton Council elections on 6 May?
+
 %form{ :method => 'get', :action => '/wards' }
-  %label{ :for => "postcode" } Postcode
-  %input{ :type => 'text', :name => 'postcode', :size => 8, :maxlength => 8 }
+  %label{ :for => "postcode" } My postcode is 
+  %input{ :type => 'text', :name => 'postcode', :value => 'SM1 1EA', :size => 8, :maxlength => 8 }
   %input{ :type => 'submit', :value => "Find" }
 -#
   - for ward in @wards

views/layout.haml

@@ -5,11 +5,11 @@
     %link{ :rel => 'stylesheet', :type => 'text/css', :href => 'style.css' }
     %body
       #header
-        %h1 Find My Candidates
+        %h1
+          %a{ :href => '/' } Find My Candidates
       #main
         = yield
       #footer
-        %hr
         %p
-          Made by 
+          Design 
           %a{ :href => "http://adrianshort.co.uk/" } Adrian Short

views/wards.haml

@@ -1,7 +1,8 @@
 %h2
-  %span.highlight
-    = @postcode
+  = @postcode
   is in 
-  = @ward_name 
-  Ward in 
+  %span.highlight
+    = @ward_name 
+    Ward
+  in 
   = @district_name