From 0af85e4751a07504a80c347b53124886f424abc3 Mon Sep 17 00:00:00 2001
From: yackob03 <jacob.moshenko@gmail.com>
Date: Sat, 5 Oct 2013 14:33:31 -0400
Subject: [PATCH] Increase the spacing on the tour. Use col-md, Alternate which
 side the image appears on for each step, make sure they are still aligned
 properly when collapsed. Use responsive images.

---
 static/css/quay.css          |  2 +-
 static/partials/landing.html | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/static/css/quay.css b/static/css/quay.css
index 8a699eb55..a28918bf7 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -163,7 +163,7 @@
 }
 
 .product-tour .tour-section {
-  margin-bottom: 20px;
+  margin-bottom: 60px;
 }
 
 .product-tour .tour-section .tour-section-title {
diff --git a/static/partials/landing.html b/static/partials/landing.html
index 493ef554d..3d2edf1e1 100644
--- a/static/partials/landing.html
+++ b/static/partials/landing.html
@@ -91,37 +91,37 @@
   </div>
 
   <div class="tour-section row">
-    <div class="col-lg-7"><img src="http://1.bp.blogspot.com/-HieEyF9wvVQ/Uk3epFZc6QI/AAAAAAAAADU/-Ov_3v2JkHQ/s640/Screenshot+from+2013-10-03+17%253A12%253A21.png"></div>
-    <div class="col-lg-5">
+    <div class="col-md-7"><img src="http://1.bp.blogspot.com/-HieEyF9wvVQ/Uk3epFZc6QI/AAAAAAAAADU/-Ov_3v2JkHQ/s640/Screenshot+from+2013-10-03+17%253A12%253A21.png" class="img-responsive"></div>
+    <div class="col-md-5">
       <div class="tour-section-title">Customized for you</div>
       <div class="tour-section-description">
-	Your personal home screen shows those repositories most important to you, ordered by recent activity.
+        Your personal home screen shows those repositories most important to you, ordered by recent activity.
       </div>
       <div class="tour-section-description">Keep up to date on the status of those repositories you deem important.</div>
     </div>
   </div>
 
   <div class="tour-section row">
-    <div class="col-lg-7"><img src="http://4.bp.blogspot.com/-0uJZWmoTuaU/Uk3eo8BHAjI/AAAAAAAAADM/PhY-ZNNj0tw/s640/Screenshot+from+2013-10-03+17%253A12%253A41.png"></div>
-    <div class="col-lg-5">
+    <div class="col-md-7 col-md-push-5"><img src="http://4.bp.blogspot.com/-0uJZWmoTuaU/Uk3eo8BHAjI/AAAAAAAAADM/PhY-ZNNj0tw/s640/Screenshot+from+2013-10-03+17%253A12%253A41.png" class="img-responsive"></div>
+    <div class="col-md-5 col-md-pull-7">
       <div class="tour-section-title">Useful views of respositories</div>
       <div class="tour-section-description">
-	Each repository is presented with the maximum amount of useful information, including its image history, <b>markdown</b>-based description, and tags.
+        Each repository is presented with the maximum amount of useful information, including its image history, <b>markdown</b>-based description, and tags.
       </div>
     </div>
   </div>
   
   <div class="tour-section row">
-    <div class="col-lg-7"><img src="http://4.bp.blogspot.com/-aF-RMMxhKmw/Uk3eoys3wsI/AAAAAAAAADc/1uxE8BJ-QHY/s640/Screenshot+from+2013-10-03+17%253A13%253A07.png"></div>
-    <div class="col-lg-5">
+    <div class="col-md-7"><img src="http://4.bp.blogspot.com/-aF-RMMxhKmw/Uk3eoys3wsI/AAAAAAAAADc/1uxE8BJ-QHY/s640/Screenshot+from+2013-10-03+17%253A13%253A07.png" class="img-responsive"></div>
+    <div class="col-md-5">
       <div class="tour-section-title">Share at your control</div>
       <div class="tour-section-description">
-	Share any repository with as many (or as few) users as you choose.
+        Share any repository with as many (or as few) users as you choose.
       </div>
       <div class="tour-section-description">Want to share with the world? Make your repository public.</div>
       <div class="tour-section-description">Need a repository only for your team? Share with your team members.</div>
       <div class="tour-section-description">Need finer grain control? Mark a user as read-only or read/write.</div>
-      </div>
+    </div>
   </div>
 </div>