From cd82f30f8c317eccfd767e73beafc88c06f5b52a Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Wed, 28 Oct 2015 12:39:21 +0100
Subject: [PATCH] change some markup bits

---
 app/styles/app/layouts/home-pro.sass | 80 +++-------------------------
 app/templates/home-pro.hbs           | 40 +++++++-------
 2 files changed, 28 insertions(+), 92 deletions(-)

diff --git a/app/styles/app/layouts/home-pro.sass b/app/styles/app/layouts/home-pro.sass
index 4ed7da91..672d416d 100644
--- a/app/styles/app/layouts/home-pro.sass
+++ b/app/styles/app/layouts/home-pro.sass
@@ -22,7 +22,6 @@
     max-width: 1024px
     padding: 0 $column-gutter/2
 
-
   .h1
     font-size: 64px
     color: #408692 !important
@@ -100,7 +99,6 @@
   .section--center
     text-align: center
 
-
   .section--feature
     .inner
       display: flex
@@ -143,16 +141,19 @@
     padding: 0
     margin: 0
 
-
   .list--customers
     @extend %list
     display: flex
     justify-content: space-around
     flex-wrap: wrap
-    width: 88%
-    margin: auto
+    align-items: center
+    width: 80%
+    margin: 2em auto 0
     li
-      flex: 0 0 12em
+      flex: 0 0 9em
+      margin-bottom: 3em
+      @media #{$medium-up}
+        margin-bottom: 0
 
   .list--languages
     @extend %list
@@ -160,7 +161,7 @@
     justify-content: space-around
     flex-wrap: wrap
     li
-      flex: 0 0 9%
+      flex: 0 0 5em
 
   .list--check
     @extend %list
@@ -177,7 +178,6 @@
         background:
           image: inline-image('line-icons/icon-passed.svg')
 
-
   .list--features
     @extend %list
     display: flex
@@ -190,81 +190,17 @@
     li
       flex: 0 0 15em
 
-  [class^="customer-"]
-    display: block
-    height: 5em
-    text-indent: -999%
-    overflow: hidden
-    background:
-      repeat: no-repeat
-      size: 12em 2em
-      position: center center
-
-  .customer-zendesk
-    background-image: inline-image('pro-landing/customer-logos-zendesk.svg')
-  .customer-heroku
-    background-image: inline-image('pro-landing/customer-logos-heroku.svg')
-  .customer-engineyard
-    background-image: inline-image('pro-landing/customer-logos-engineyard.svg')
-  .customer-bittorrent
-    background-image: inline-image('pro-landing/customer-logos-bittorrent.svg')
-  .customer-moz
-    background-image: inline-image('pro-landing/customer-logos-moz.svg')
-
-
   [class^="feature-"]
     display: block
     height: 2em
     width: 2em
-    overflow: hidden
     margin: auto
-    background:
-      repeat: no-repeat
-      size: 100%
-      position: center center
-
-  .feature-github
-    background-image: inline-image('pro-landing/feature-icon-github.svg')
-  .feature-db
-    background-image: inline-image('pro-landing/feature-icon-platform.svg')
-  .feature-pr
-    background-image: inline-image('pro-landing/feature-icon-pullrequests.svg')
-  .feature-heroku
-    background-image: inline-image('pro-landing/feature-icon-heroku.svg')
-
 
   [class^="language-"]
     display: block
     height: 3.5em
     width: 3.5em
     margin: 0 auto .5em
-    background:
-      repeat: no-repeat
-      size: 100%
-      position: center center
-
-  .language-clojure
-    background-image: inline-image('pro-landing/lang-clojure.svg')
-  .language-node
-    background-image: inline-image('pro-landing/lang-nodejs.svg')
-  .language-php
-    background-image: inline-image('pro-landing/lang-php.svg')
-  .language-xcode
-    background-image: inline-image('pro-landing/lang-xcode.svg')
-  .language-ruby
-    background-image: inline-image('pro-landing/lang-ruby.svg')
-  .language-python
-    background-image: inline-image('pro-landing/lang-python.svg')
-  .language-java
-    background-image: inline-image('pro-landing/lang-java.svg')
-  .language-erlang
-    background-image: inline-image('pro-landing/lang-erlang.svg')
-  .language-go
-    background-image: inline-image('pro-landing/lang-go.svg')
-  .language-scala
-    background-image: inline-image('pro-landing/lang-scala.svg')
-  .language-perl
-    background-image: inline-image('pro-landing/lang-perl.svg')
 
 
 
diff --git a/app/templates/home-pro.hbs b/app/templates/home-pro.hbs
index a25fddc9..87a7192a 100644
--- a/app/templates/home-pro.hbs
+++ b/app/templates/home-pro.hbs
@@ -15,11 +15,11 @@
     <div class="inner">
       <h3 class="h3">Some pretty awesome companies and projects are a few of our users</h3>
       <ul class="list--customers">
-        <li><a href="#" class="customer-zendesk">Zendesk</a></li>
-        <li><a href="#"class="customer-heroku">Heroku</a></li>
-        <li><a href="#"class="customer-engineyard">Engine Yard</a></li>
-        <li><a href="#"class="customer-bittorrent">BitTorrent</a></li>
-        <li><a href="#"class="customer-moz">moz</a></li>
+        <li><a href="https://www.zendesk.com/" title="Zendesk" class="customer-zendesk"><img width="120" height="20" src="../images/pro-landing/customer-logos-zendesk.svg" alt="Zendesk logo"></a></li>
+        <li><a href="http://www.heroku.com/" title="Heroku" class="customer-heroku"><img width="100" height="20" src="../images/pro-landing/customer-logos-heroku.svg" alt="Heroku logo"></a></li>
+        <li><a href="https://www.engineyard.com/" title="Engine Yard" class="customer-engineyard"><img width="120" height="20" src="../images/pro-landing/customer-logos-engineyard.svg" alt="Engine Yard logo"></a></li>
+        <li><a href="http://www.bittorrent.com/" title="BitTorrent" class="customer-bittorrent"><img width="120" height="20" src="../images/pro-landing/customer-logos-bittorrent.svg" alt="BitTorrent logo"></a></li>
+        <li><a href="https://moz.com/" title="moz" class="customer-moz"><img width="90" height="20" src="../images/pro-landing/customer-logos-moz.svg" alt="Moz logo"></a></li>
       </ul>
     </div>
   </section>
@@ -28,22 +28,22 @@
       <div class="section-list section--center">
         <ul class="list--features">
           <li>
-            <span class="feature-github" aria-hidden="true"></span>
+            <img src="../images/pro-landing/feature-icon-github.svg" class="feature-github" aria-hidden="true">
             <h3 class="h3">Get set up in seconds</h3>
             <p class="text-small">Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
           </li>
           <li>
-            <span class="feature-db" aria-hidden="true"></span>
+            <img src="../images/pro-landing/feature-icon-platform.svg" class="feature-db" aria-hidden="true">
             <h3 class="h3">Supports your platform</h3>
             <p class="text-small">Many databases and services are pre-installed and can be enabled in your build configuration.</p>
           </li>
           <li>
-            <span class="feature-pr" aria-hidden="true"></span>
+            <img src="../images/pro-landing/feature-icon-pullrequests.svg" class="feature-pr" aria-hidden="true">
             <h3 class="h3">Test your pull requests</h3>
             <p class="text-small">Make sure every Pull Request to your project is tested before it's merged.</p>
           </li>
           <li>
-            <span class="feature-heroku" aria-hidden="true"></span>
+            <img src="../images/pro-landing/feature-icon-heroku.svg" class="feature-heroku" aria-hidden="true">
             <h3 class="h3">Deploy anywhere</h3>
             <p class="text-small">Updating staging or production as soon as your tests pass has never been easier!</p>
           </li>
@@ -68,17 +68,17 @@
       <h3 class="h3">Supported languages</h3>
       <p class="text-small">These are just a few of our most popular languages, check out the full list <a href="#">in our docs</a>.</p>
       <ul class="list--languages">
-        <li><span class="language-clojure"></span>Clojure</li>
-        <li><span class="language-node"></span>Node</li>
-        <li><span class="language-php"></span>PHP</li>
-        <li><span class="language-xcode"></span>XCode</li>
-        <li><span class="language-ruby"></span>Ruby</li>
-        <li><span class="language-python"></span>Python</li>
-        <li><span class="language-java"></span>Java</li>
-        <li><span class="language-erlang"></span>Erlang</li>
-        <li><span class="language-go"></span>Go</li>
-        <li><span class="language-scala"></span>Scala</li>
-        <li><span class="language-perl"></span>Perl</li>
+        <li><a href="http://docs.travis-ci.com/user/languages/clojure/"><img alt="Clojure logo" src="../images/pro-landing/lang-clojure.svg" class="language-clojure">Clojure</a></li>
+        <li><a href="http://docs.travis-ci.com/user/languages/javascript-with-nodejs/"><img alt="NodeJS logo" src="../images/pro-landing/lang-nodejs.svg" class="language-node">Node</a></li>
+        <li><a href="http://docs.travis-ci.com/user/languages/php/"><img alt="PHP logo" src="../images/pro-landing/lang-php.svg" class="language-php">PHP</a></li>
+        <li><a href="http://docs.travis-ci.com/user/languages/objective-c/"><img alt="Xcode logo" src="../images/pro-landing/lang-xcode.svg" class="language-xcode">XCode</a></li>
+        <li><a href="http://docs.travis-ci.com/user/languages/ruby/"><img alt="Ruby logo" src="../images/pro-landing/lang-ruby.svg" class="language-ruby">Ruby</a></li>
+        <li><a href="http://docs.travis-ci.com/user/languages/python/"><img alt="Python logo" src="../images/pro-landing/lang-python.svg" class="language-python">Python</a></li>
+        <li><a href="http://docs.travis-ci.com/user/languages/java/"><img alt="Java logo" src="../images/pro-landing/lang-java.svg" class="language-java">Java</a></li>
+        <li><a href="http://docs.travis-ci.com/user/languages/erlang/"><img alt="Erlang logo" src="../images/pro-landing/lang-erlang.svg" class="language-erlang">Erlang</a></li>
+        <li><a href="http://docs.travis-ci.com/user/languages/go/"><img alt="Go logo" src="../images/pro-landing/lang-go.svg" class="language-go">Go</a></li>
+        <li><a href="http://docs.travis-ci.com/user/languages/scala/"><img alt="Scala logo" src="../images/pro-landing/lang-scala.svg" class="language-scala">Scala</a></li>
+        <li><a href="http://docs.travis-ci.com/user/languages/perl/"><img alt="Perl logo" src="../images/pro-landing/lang-perl.svg" class="language-perl">Perl</a></li>
       </ul>
     </div>
   </section>