Small view and style tweaks.

* Put the footer in a paragraph.
 * Update the intro text.
 * Kill the stupid  .
 * Make CSS pixel perfect.

anne-survey.rb

@@ -1,6 +1,7 @@
+require "camping"
+require "camping/session"
 require "pathname"
 require "markaby"
-require "camping/session"
 
 Markaby::Builder.set(:indent, 2)
 
@@ -174,19 +175,21 @@ module Anne::Views
           h1 "Enquête ruimtelijke effecten"
         end
         div.content! { self << yield }
-        div.footer! { "Copyright &copy; 2010 Anne Pijl, Bram Senders, Paul van Tilburg" }
+        div.footer! do
+          p "Copyright © 2010 Anne Pijl, Bram Senders, Paul van Tilburg"
+        end
       end
     end
   end
 
   def intro
     p "Met deze enquête worden een aantal ruimtelijke effecten onderzocht. " \
-      "Je krijgt 45 keer een plaatje met twee afbeeldingen te zien. " \
+      "Je krijgt 45 keer twee afbeeldingen te zien. Je kiest welke afbeelding" \
-      "Je kiest welke afbeelding, de linker of de rechter afbeelding, " \
+      " je ruimtelijker ervaart. In welke afbeelding zie je meer diepte, " \
-      "je ruimtelijker ervaart. " \
+      "welke afbeelding lijkt jou het meest 3-dimensionaal? Als je het niet " \
-      "In welk plaatje zie je meer diepte, welk plaatje lijkt jou het meest " \
+      "weet, klik je op een willekeurige afbeelding. De test duurt 5 á 10 " \
-      "3-dimensionaal? Als je het niet weet, klik je op een willekeurige " \
+      "minuten. Succes!"
-      "afbeelding. De test duurt 5 à 10 minuten. Succes!"
+
     p "Doe de test volledig om kans te maken op de prijs."
     p "– Anne Pijl"
 
@@ -220,7 +223,8 @@ module Anne::Views
          "Technische Natuurkunde",
          "Werktuigbouwkunde",
          "Wiskunde & Informatica"]
-      make_select "Studiejaar", "user_study_year", ["niet van toepassing"] + (1998..2009).to_a
+      make_select "Studiejaar", "user_study_year", 
+        ["niet van toepassing"] + (1998..2009).to_a
       make_select "Geslacht", "user_gender", ["", "man", "vrouw"]
       make_select "Ben je kleurenblind?", "user_colorblind", ["nee", "ja"]
       make_select "Vind je dat je een goed ruimtelijk voorstellingsvermogen hebt?", 
@@ -234,17 +238,19 @@ module Anne::Views
     h2 "Welk beeld is ruimtelijker?"
     form :action => R(Vote), :method => :post do
       input :type => "hidden", :name => "image", :value => image
-      input.image :type => "image", :src => R(ImageX, "#{image}-l.png"), :name => "left", :id => "left"
+      input.image :type => "image", :src => R(ImageX, "#{image}-l.png"), 
-      input.image :type => "image", :src => R(ImageX, "#{image}-r.png"), :name => "right", :id => "right"
+                  :name => "left", :id => "left"
+      input.image :type => "image", :src => R(ImageX, "#{image}-r.png"), 
+                  :name => "right", :id => "right"
     end
     div.progressbar! do
-      div.done! :style => "width: #{progress}%" do "&nbsp;" end
+      div.done! :style => "width: #{progress}%" do end
     end
   end
 
   def finish
     h2 "Dank je wel voor het meedoen aan dit onderzoek."
-    p "Als je geïnteresseerd bent in de resultaten van de enquête of je wilt " +
+    p "Als je geïnteresseerd bent in de resultaten van de enquête of je wilt " \
       "meedingen naar de prijs, vul dan hier je e-mailadres in."
 
     form :action => R(Finish), :method => :post do
@@ -279,20 +285,18 @@ end
 __END__
 /* Style sheet for the Anne Survey Camping app */
 
-html, body { margin: 0; padding: 0; background: #333; }
+html { background: #333; }
 
 body {
-  margin: 0 auto;
+  margin: 10px auto;
-  margin-top: 10pt;
+  padding: 12px;
-  border: thin solid #333;
-  padding: 10px;
   width: 960px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   color: white;
   background-color: black;
-  -webkit-border-radius: 1em;
+  -webkit-border-radius: 12px;
-  -moz-border-radius: 1em;
+  -moz-border-radius: 12px;
-  border-radius: 1em;
+  border-radius: 12px;
 }
 
 #header {
@@ -300,28 +304,26 @@ body {
   height: 73px;
 }
 
-#header h1 {
+#header h1 { padding-top: 25px; margin-top: 0px; }
-  padding-top: 20px;
-}
 
-.image { border: thin solid #888; text-align: center; }
+.image { border: thin solid #888; }
-#left  { margin-right: 10px; }
+#left  { margin: 0px 15px 0px 0px; }
-#right { margin-left: 10px; }
+#right { margin: 0px 0px 0px 15px; }
 
 #progressbar {
   height: 6px;
-  margin-top: 1.2em;
+  margin-top: 14px;
   background-color: #101073;
 }
 
 #progressbar #done {
-  height: 5pt;
+  height: inherit;
   background-color: #d6007b;
 }
 
 #footer {
-  padding: 3pt 8pt 0pt 8pt;
+  padding: 0px 0px 0px 8px;
-  margin-top: 1em;
+  margin-top: 14px;
   border-top: thin #eee solid;
-  font-size: 62.5%;
+  font-size: 69.4%;
 }