Restructured layout to remove the grid system and use HTML5

public/style.css

@@ -4,9 +4,16 @@ body
   color: #555;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 100%;
-  width: 760px;
-  margin: 60px auto;
-  line-height: 1.5em;  
+  width: 100%;
+  line-height: 1.5em;
+  margin: 0;
+  padding: 0;
+}
+
+.warning {
+  padding: 10px 15px;
+  background-color: beige;
+  margin: 25px 0;
 }
 
 p
@@ -27,15 +34,39 @@ input.postcode
 
 #main
 {
-  margin: 30px 0;
+  width: 920px;
+  margin: 50px auto;
+}
+
+tr.footer {
+  border-top: 2px solid #777;
+  border-bottom: 0px solid black;
+}
+
+tr.header {
+  border-bottom: 2px solid #777;
 }
 
+
 #footer
 {
   font-size: 100%;
-  background-color: #fff;
+  background-color: #555;
+  color: #fff;
   text-align: left;
-  margin: 40px 0 40px 0;
+  margin: 40px 0 0 0;
+  height: 100%;
+}
+
+#footer_inner {
+  margin: 0 auto;
+  padding: 30px 0;
+  width: 930px;
+}
+
+#footer h1 {
+  font-size: 180%;
+  color: #fff;
 }
 
 a
@@ -70,12 +101,21 @@ h1
 
 h2
 {
-  margin-top: 50px;
+  margin-top: 40px;
   line-height: 1.5em;
   font-weight: bold;
   color: #86a11d;
 }
 
+h3
+{
+  margin: 30px 0 10px 0;
+  line-height: 1.5em;
+  font-weight: bold;
+  color: #86a11d;
+}
+
+
 form
 {
   font-size: 150%;
@@ -95,7 +135,6 @@ form
 .highlight
 {
   background-color: #fff7c0;
-  padding: 5px;
 }
 
 strong
@@ -113,6 +152,10 @@ td, th
   padding: 6px;
 }
 
+th {
+  font-weight: normal;
+}
+
 tr
 {
   border-bottom: 1px solid #eee;
@@ -127,7 +170,7 @@ tr
 {
   background-color: #777;
   color: white;
-  padding: 2px 2px;
+  padding: 2px 5px;
   font-weight: normal;
 }
 

views/layout.haml

@@ -1,36 +1,40 @@
-!!! XML
-!!!
+!!!5
 %html
   %head
-    %title= @page_title ? @page_title + " - Sutton Elections" : "Sutton Parliament and Council Elections 6 May 2010"
+    %title= @page_title ? @page_title + " - Sutton Elections" : "Sutton Elections - Your guide to voting and elections in the London Borough of Sutton"
     %link{ :rel => 'stylesheet', :type => 'text/css', :href => '/style.css' }
     %link{ :rel => 'stylesheet', :type => 'text/css', :href => '/print.css', :media => 'print' }
-    %link{ :rel => 'stylesheet', :type => 'text/css', :href => '/grid.css' }
     <script type="text/javascript" src="http://use.typekit.com/wfg6cvc.js"></script>
     <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   %body
-    .container_12
+    #main
       = yield
-      .clear  
-      #footer
-        .grid_12
-          %p
-            %a{ :href => '/' } Home
-          %p
-            %a{ :href => '/how-the-parliament-election-works' } How the parliament election works
-          %p
-            %a{ :href => '/how-the-council-election-works' } How the council election works
-          -#
-            %p
-              %a{ :href => '/wards' } Sutton Council wards
-          %p
-            %a{ :href => '/about' } About this website
-    <script type="text/javascript">
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-    try {
-    var pageTracker = _gat._getTracker("UA-3042981-17");
-    pageTracker._trackPageview();
-    } catch(err) {}</script>
+    #footer
+      #footer_inner
+        %h1 Sutton Elections
+        %p
+          %a{ :href => '/' } Home
+        %p
+          %a{ :href => '/how-the-parliament-election-works' } How parliament elections work
+        %p
+          %a{ :href => '/how-the-council-election-works' } How council elections work
+        %p
+          %a{ :href => '/about' } About this website
+        %p
+          %br
+          An independent website designed by
+          %a{ :href => "http://about.adrianshort.co.uk/" }<
+            Adrian Short
+          with data from 
+          %a{ :href => "http://www.sutton.gov.uk/" }<
+            Sutton Council
+          
+  <script type="text/javascript">
+  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+  </script>
+  <script type="text/javascript">
+  try {
+  var pageTracker = _gat._getTracker("UA-3042981-17");
+  pageTracker._trackPageview();
+  } catch(err) {}</script>