make pages#tutorials pretty again

app/views/pages/tutorials.html.erb

@@ -1,60 +1,54 @@
 <% content_for :page_title, t('.menu_title') %>
-<% content_for :wrapper_class, "index_page" %>
+<% content_for :wrapper_class, 'index-page' %>
 
 <div id="masthead" class="hero">
   <div class="container">
     <h1><%= t '.headline' %></h1>
-    <h2><%= t '.byline' %></h2>
+    <h2 class="lead"><%= t '.byline' %></h2>
   </div>
 </div>
 
 <div class="container">
   <div class="row top-spacing">
-    <div class="span12">
-		<p><%= t '.tutorials_ex1' %></p>
-		<p><%= t('.tutorials_ex2', podup_link: link_to('Pod Uptime', "http://podupti.me/")).html_safe %></p>
+    <div class="col-md-9">
+		  <p><%= t '.tutorials_ex1' %></p>
+		  <p><%= t('.tutorials_ex2', podup_link: link_to('Pod Uptime', 'http://podupti.me/')).html_safe %></p>
 		</div>
-        <div class="span4">
-        	<%= image_tag "diaspora-handdrawn.png", alt: "diaspora* tutorials" %>
-        </div>
+    <div class="col-md-3">
+      <p class="text-center">
+        <%= image_tag 'diaspora-handdrawn.png', alt: 'diaspora* tutorials' %>
+      </p>
+    </div>
 	</div>
   <div class="row">
-    <div class="span-one-third">
-    	<h3><%= t '.started_head' %></h3>
-      		<ol>
-        		<li><%= link_to t('.started1'), sign_up_url %></li>
-		        <li><%= link_to t('.started2'), interface_url %></li>
-        		<li><%= link_to t('.started3'), aspects_url %></li>
-		        <li><%= link_to t('.started4'), connecting_url %></li>
-        		<li><%= link_to t('.started5'), sharing_url %></li>
-		        <li><%= link_to t('.started6'), conversations_url %></li>
-        		<li><%= link_to t('.started7'), finishing_url %></li>
-	      </ol>
+    <div class="col-md-4">
+    	<h4><%= t '.started_head' %></h4>
+      <ol>
+        <li><%= link_to t('.started1'), sign_up_url %></li>
+		    <li><%= link_to t('.started2'), interface_url %></li>
+        <li><%= link_to t('.started3'), aspects_url %></li>
+		    <li><%= link_to t('.started4'), connecting_url %></li>
+        <li><%= link_to t('.started5'), sharing_url %></li>
+		    <li><%= link_to t('.started6'), conversations_url %></li>
+        <li><%= link_to t('.started7'), finishing_url %></li>
+	    </ol>
     </div>
-    <div class="span-one-third">
-        <h3><%= t '.additional' %></h3>
-            <ul>
-                <li><%= link_to t('.formatting'), formatting_url %></li>
-            </ul>
+    <div class="col-md-4">
+      <h4><%= t '.additional' %></h4>
+      <ul>
+        <li><%= link_to t('.formatting'), formatting_url %></li>
+      </ul>
     </div>
-    <div class="span-one-third">
-        <h3><%= t '.more_tutorials' %></h3>
-            <ul>
-	        	<li><%= t('.other_docs', other_docs_link: link_to(t('.other_docs_link_text'), other_docs_url)).html_safe %></li>
-            </ul>
+    <div class="col-md-4">
+      <h4><%= t '.more_tutorials' %></h4>
+      <ul>
+	      <li><%= t('.other_docs', other_docs_link: link_to(t('.other_docs_link_text'), other_docs_url)).html_safe %></li>
+      </ul>
     </div>
   </div>
-  	<div class="row">
-    	<div class="span3">
-	    <p>&nbsp;</p>
-        </div>
-		<div class="span12">
-        <p  class="more-info"><% t '.thanks' %></p>
+  <div class="row">
+		<div class="col-md-12">
+      <p class="more-info"><% t '.thanks' %></p>
 		</div>
-    	<div class="span2">
-	    <p>&nbsp;</p>
-        </div>
-     </div>
-
+  </div>
 </div>
-