From 32db6098cc7820ecd089610d7b1a568307a4afa0 Mon Sep 17 00:00:00 2001
From: Justine Arreche <justinearreche@gmail.com>
Date: Thu, 2 Apr 2015 10:58:28 +0200
Subject: [PATCH] responsive fixes to the build flow diagrams

---
 app/styles/app/landing.sass | 34 ++++++++++++++++++++++++++++++----
 app/templates/home.hbs      | 32 ++++++++++++++++++++++++--------
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/app/styles/app/landing.sass b/app/styles/app/landing.sass
index 62c0da5f..5fd4e513 100644
--- a/app/styles/app/landing.sass
+++ b/app/styles/app/landing.sass
@@ -69,7 +69,7 @@
     display: none
 
   .hero
-    background-color: #f8f7f4
+    background-color: #faf9f6
     h1
       color: #339999
       line-height: 1.2em
@@ -116,7 +116,7 @@
       text-align: left
 
   .recent-builds
-    background-color: #f4f3eb
+    background-color: #faf9f6
     text-align: center
 
     h2
@@ -178,7 +178,7 @@
       display: inline-block
 
   .features-list
-    background-color: #f7f7f1
+    background-color: #faf9f6
 
     h2
       margin: 0
@@ -230,13 +230,16 @@
           line-height: 1.5em
           color: #5f6062
 
-    .divider-line
+    .divider-line-horizontal
       width: 50px
       height: 3px
       background: #eaeaec
       display: inline-block
       margin-bottom: 75px
 
+    .divider-line-vertical
+      display: none
+
   .user-testimonials
     h2
       color: #418793
@@ -254,6 +257,29 @@
     .landing-centered-wrapper
       width: 100%
 
+  @media (max-width: 846px)
+    .build-flows .branch-bf .bf
+      width: 100%
+      display: block
+      clear: all
+
+    .build-flows .branch-bf .bf img
+      width: 120px
+      height: 120px
+
+    .build-flows .branch-bf .bf p
+      font-size: 1.5em
+
+    .build-flows .branch-bf .divider-line-horizontal
+      display: none
+
+    .build-flows .branch-bf .divider-line-vertical
+      width: 3px
+      height: 40px
+      background: #eaeaec
+      display: inline-block
+      margin-bottom: 10px
+
   @media (max-width: 797px)
     .laptop-wrapper-mobile
       display: block
diff --git a/app/templates/home.hbs b/app/templates/home.hbs
index 79eec185..5164dcb9 100644
--- a/app/templates/home.hbs
+++ b/app/templates/home.hbs
@@ -132,25 +132,33 @@
         		<img src="../images/landing-page/push-icon-1.svg">
         		<p>You push your<br>code to Github</p>
         	</div>
-        	<div class="divider-line">
+        	<div class="divider-line-horizontal">
+        	</div>
+        	<div class="divider-line-vertical">
         	</div>
         	<div class="bf">
         		<img src="../images/landing-page/push-icon-2.svg">
         		<p>Github triggers<br>Travis CI to build</p>
         	</div>
-        	<div class="divider-line">
+        	<div class="divider-line-horizontal">
+        	</div>
+        	<div class="divider-line-vertical">
         	</div>
         	<div class="bf">
         		<img src="../images/landing-page/push-icon-3.svg">
         		<p>Hooray!<br>Your build passes!</p>
         	</div>
-        	<div class="divider-line">
+        	<div class="divider-line-horizontal">
+        	</div>
+        	<div class="divider-line-vertical">
         	</div>
         	<div class="bf">
         		<img src="../images/landing-page/push-icon-4.svg">
         		<p>Travis CI deploys<br>to Heroku</p>
         	</div>
-        	<div class="divider-line">
+        	<div class="divider-line-horizontal">
+        	</div>
+        	<div class="divider-line-vertical">
         	</div>
         	<div class="bf">
         		<img src="../images/landing-page/push-icon-5.svg">
@@ -163,25 +171,33 @@
         		<img src="../images/landing-page/pull-icon-1.svg">
         		<p>A pull request<br>is created</p>
         	</div>
-        	<div class="divider-line">
+        	<div class="divider-line-horizontal">
+        	</div>
+        	<div class="divider-line-vertical">
         	</div>
         	<div class="bf">
         		<img src="../images/landing-page/pull-icon-2.svg">
         		<p>Github tells Travis CI the build is mergeable</p>
         	</div>
-        	<div class="divider-line">
+        	<div class="divider-line-horizontal">
+        	</div>
+        	<div class="divider-line-vertical">
         	</div>
         	<div class="bf">
         		<img src="../images/landing-page/push-icon-3.svg">
         		<p>Hooray!<br>Your build passes!</p>
         	</div>
-        	<div class="divider-line">
+        	<div class="divider-line-horizontal">
+        	</div>
+        	<div class="divider-line-vertical">
         	</div>
         	<div class="bf">
         		<img src="../images/landing-page/pull-icon-4.svg">
         		<p>Travis CI updates the PR that it passed</p>
         	</div>
-        	<div class="divider-line">
+        	<div class="divider-line-horizontal">
+        	</div>
+        	<div class="divider-line-vertical">
         	</div>
         	<div class="bf">
         		<img src="../images/landing-page/pull-icon-5.svg">