From b35e24868a86283773d7ded8138d70604a332a5c Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Tue, 27 Oct 2015 18:08:33 +0100
Subject: [PATCH] tweak responsive behaviour

---
 app/styles/app/layouts/home-pro.sass | 25 ++++++++++++++++++-------
 app/templates/home-pro.hbs           |  4 ++--
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/styles/app/layouts/home-pro.sass b/app/styles/app/layouts/home-pro.sass
index 5d862d84..4ed7da91 100644
--- a/app/styles/app/layouts/home-pro.sass
+++ b/app/styles/app/layouts/home-pro.sass
@@ -83,8 +83,11 @@
   .hero-computer
     width: 100%
     height: 35em
-    position: absolute
-    transform: translateY(-.1rem)
+    margin-top: 3em
+    @media #{$medium-up}
+      position: absolute
+      margin-top: 0
+      transform: translateY(-.1rem)
 
   .section--grey
     padding: 4rem 0 5rem
@@ -102,13 +105,15 @@
     .inner
       display: flex
       justify-content: space-between
-      flex-direction: column
+      flex-direction: column-reverse
       @media #{$medium-up}
         flex-direction: row
     
     .section-list,
     .section-text
-      flex: 0 0 47%
+      flex: 0 0 50%
+      @media (min-width: 54em)
+        flex: 0 0 47%
 
 
   .section--hero
@@ -121,6 +126,9 @@
     
     .section-text
       flex: 0 0 47%
+      text-align: center
+      @media #{$medium-up}
+        text-align: left
     .section-image
       flex: 0 0 50%
 
@@ -174,10 +182,13 @@
     @extend %list
     display: flex
     justify-content: space-between
-    flex-wrap: wrap
-
+    flex-flow: column wrap
+    margin-top: 5em
+    @media #{$medium-up}
+      flex-flow: row wrap
+      margin-top: 0
     li
-      flex: 0 0 43%
+      flex: 0 0 15em
 
   [class^="customer-"]
     display: block
diff --git a/app/templates/home-pro.hbs b/app/templates/home-pro.hbs
index 13dc6fc6..a25fddc9 100644
--- a/app/templates/home-pro.hbs
+++ b/app/templates/home-pro.hbs
@@ -4,7 +4,7 @@
       <div class="section-text">
         <h1 class="h1">Builds apps <br class="br-small"> with confidence</h1>
         <p class="text-big">Focus on writing code. Let Travis CI take care<br class="br-small"> of running your tests and deploying your apps.</p>
-        <a href="#" class="hero-button" title="Start your free trial">Start your free trial</a>
+        <a href="https://travis-ci.com/signin" class="hero-button" title="Start your free trial">Start your free trial</a>
       </div>
       <div class="section-image">
         <img src="../images/pro-landing/hero-screen.svg" class="hero-computer" aria-hidden="true">
@@ -85,7 +85,7 @@
   <section class="section--grey section--center">
     <div class="inner">
       <h2 class="h2--teal">Interested in running your <br class="br-small"> private projects with Travis CI?</h2>
-      <a href="#" class="landing-button">Start your free trial</a>
+      <a href="https://travis-ci.com/signin" class="landing-button">Start your free trial</a>
     </div>
   </section>
 </div>
\ No newline at end of file