From e247ab35b45243d1967ec576cb6674de01c543c3 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Thu, 29 Oct 2015 17:43:51 +0100
Subject: [PATCH] responsive tweaks

---
 app/styles/app/layouts/home-pro.sass | 47 ++++++++++++++++++++++++----
 app/templates/pricing.hbs            | 18 +++++------
 2 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/app/styles/app/layouts/home-pro.sass b/app/styles/app/layouts/home-pro.sass
index 8df5a5c8..92125232 100644
--- a/app/styles/app/layouts/home-pro.sass
+++ b/app/styles/app/layouts/home-pro.sass
@@ -17,6 +17,12 @@
         text-decoration: none
         border-color: transparent
 
+
+  br
+    display: none
+    @media #{$medium-up}
+      display: block
+
   .wrapper
     width: 100%
     padding-bottom: 0
@@ -74,6 +80,7 @@
     @extend %h3
     font-size: 28px
     text-align: center
+    line-height: 1.3
 
   .h3--teal
     @extend %h3
@@ -254,17 +261,25 @@
   .list--plans
     @extend %list
     display: flex
+    flex-wrap: wrap
     justify-content: space-between
     margin: 5em 0
+
+    @media #{$medium-up}
     
   [class^="plan--"]
-    flex: 0 0 230px
+    flex: 1 0 230px
     padding: .5em 1.5em 3em
+    margin-bottom: 2em
     border:
       width: 2px
       color: #E8E8E8
       style: solid
 
+    @media #{$medium-up}
+      flex: 0 0 230px
+      margin-bottom: 0
+
     .list--check
       margin: 3em 0
       font-size: 16px
@@ -339,20 +354,33 @@
     text-decoration: none
     transition: border-color 200ms ease
 
-
   .section--enterprise
     .inner
       display: flex
+      flex-flow: column wrap
       justify-content: space-between
+      @media #{$medium-up}
+        flex-flow: row wrap
 
     .section-text
-      text-align: right
+      text-align: center
+      @media #{$medium-up}
+        text-align: right
+
+    .section-image
+      img
+        display: block
+        width: 320px
+        height: auto
+        margin: auto
+      @media #{$medium-up}
+        img
+          width: 100%
 
     .section-text,
     .section-image
       flex: 0 0 47%
 
-
   .list--faq
     display: flex
     flex-flow: row wrap
@@ -362,9 +390,16 @@
     margin: 3em 0 0
     list-style: none
     li
-      flex: 0 0 48%
-      padding: 1em 1.5em 0
+      flex: 0 0 100%
+      padding: 1em 1.5em 1.7em
       margin-bottom: 2em
       border: solid 1px #E8E8E8
+      @media #{$medium-up}
+        flex: 0 0 48%
+
+  .faq-text
+    @include linkStyle
+    margin: 0
+    font-size: 16px
 
 
diff --git a/app/templates/pricing.hbs b/app/templates/pricing.hbs
index d10c70d8..aecfe808 100644
--- a/app/templates/pricing.hbs
+++ b/app/templates/pricing.hbs
@@ -95,39 +95,39 @@
       <ul class="list--faq">
         <li>
           <h4 class="h3--green">What is a concurrent job?</h4>
-          <p class="text-small">Every commit triggers a single job by default. If two commits have been pushed on the Startup plan, they'll be run right away. Subsequent commits have to wait until the builds finished.</p>
+          <p class="faq-text">Every commit triggers a single job by default. If two commits have been pushed on the Startup plan, they'll be run right away. Subsequent commits have to wait until the builds finished.</p>
         </li>
         <li>
           <h4 class="h3--teal">What hardware are my tests running on?</h4>
-          <p class="text-small">We use dedicated hardware to ensure full speed for your tests. You have 3GB of memory and up to 2 cores available. Your tests are running directly off SSDs with the most common databases optimized to run off RAM disks.</p>
+          <p class="faq-text">We use dedicated hardware to ensure full speed for your tests. You have 3GB of memory and up to 2 cores available. Your tests are running directly off SSDs with the most common databases optimized to run off RAM disks.</p>
         </li>
         <li>
           <h4 class="h3--yellow">Are there any restrictions on build time?</h4>
-          <p class="text-small">A build has 120 minutes to run. Should your build take longer, you can split it up using a build matrix.</p>
+          <p class="faq-text">A build has 120 minutes to run. Should your build take longer, you can split it up using a build matrix.</p>
         </li>
         <li>
           <h4 class="h3--red">Can I pay anually?</h4>
-          <p class="text-small">You most certainly can! When signing up for a subscription, simply select the annual option. You get 1 month for free &mdash; 12 months for the price of 11!</p>
+          <p class="faq-text">You most certainly can! When signing up for a subscription, simply select the annual option. You get 1 month for free &mdash; 12 months for the price of 11!</p>
         </li>
         <li>
           <h4 class="h3--teal">Can I cancel anytime?</h4>
-          <p class="text-small">Absolutely! Contact us and we'll make sure your subscription gets cancelled as you want.</p>
+          <p class="faq-text">Absolutely! Contact us and we'll make sure your subscription gets cancelled as you want.</p>
         </li>
         <li>
           <h4 class="h3--green">Am I able to upgrade my plan?</h4>
-          <p class="text-small">Yes, you can change your plan subscription at any time.</p>
+          <p class="faq-text">Yes, you can change your plan subscription at any time.</p>
         </li>
         <li>
           <h4 class="h3--red">Do the listed prices include VAT?</h4>
-          <p class="text-small">Prices listed are excluding VAT, which will be added depending on origin (Germany and Europe). Make sure to have your company's VAT ID ready when entering billing details to remove VAT!</p>
+          <p class="faq-text">Prices listed are excluding VAT, which will be added depending on origin (Germany and Europe). Make sure to have your company's VAT ID ready when entering billing details to remove VAT!</p>
         </li>
         <li>
           <h4 class="h3--yellow">How does the trial work?</h4>
-          <p class="text-small">Your free trial includes 100 builds and starts as soon as you set up your first project and push a commit. The trial is limitedj to one concurrent build.</p>
+          <p class="faq-text">Your free trial includes 100 builds and starts as soon as you set up your first project and push a commit. The trial is limitedj to one concurrent build.</p>
         </li>
         <li>
           <h4 class="h3--teal">Do you have plans for student?</h4>
-          <p class="text-small">We most certainly do! You can find all details on <a href="https://education.travis-ci.com">education.travis-ci.com</a></p>
+          <p class="faq-text">We most certainly do! You can find all details on <a href="https://education.travis-ci.com">education.travis-ci.com</a></p>
         </li>
       </ul>
     </div>