Minor tweaks

apps/devhub/templates/devhub/builder.html

@@ -12,9 +12,11 @@
     </h2>
     <div class="builder-videos">
       <a href="http://people.mozilla.org/~clouserw/public/blog/amo-2011-development.ogv" rel="video-lightbox">
-        <img src="{{ media('img/developers/jetpack_video_1.jpg') }}" alt="{{ _('Video 1') }}"></a>
+        <img src="{{ media('img/developers/jetpack_video_1.jpg') }}" alt="{{ _('Video 1') }}">
+        <div>{{ _('Video 1') }}</div></a>
       <a href="http://people.mozilla.org/~clouserw/public/blog/amo-2011-development.ogv" rel="video-lightbox">
-        <img src="{{ media('img/developers/jetpack_video_2.jpg') }}" alt="{{ _('Video 2') }}"></a>
+        <img src="{{ media('img/developers/jetpack_video_2.jpg') }}" alt="{{ _('Video 2') }}">
+        <div>{{ _('Video 2') }}</div></a>
     </div>
     <p>
     {% trans %}
@@ -32,33 +34,39 @@
   <div class='cols'>
     <div class='col-2 island'>
       <div class='jetpack-builder'>
-        <img src="{{ media('img/illustrations/logo-collections-100x125.png') }}">
+        <img src="{{ media('img/developers/jetpack_icon_box.png') }}">
         <h2><a href='https://builder.addons.mozilla.org'>{{ _('Add-on Builder (Beta)') }}</a></h2>
         <p>
         {% trans %}
-        The Add-on Builder is an online build environment that gives you access to the Add-on SDK.
-        It offers a robust code editor with a toolset of built-in revisioning, module selection,
-        testing and build tools.  It also lets you share your add-on selectively or upload it to
-        addons.mozilla.org.
+        The Add-on Builder is a web-based development environment that provides additional functionality for
+        working with the Add-on SDK.
         {% endtrans %}
         </p>
+        <ul>
+          <li>{{ _('Feature-rich code editor') }}</li>
+          <li>{{ _('Instant testing for your add-ons') }}</li>
+          <li>{{ _('Built-in code revisioning &amp; sharing') }}</li>
+        </ul>
         <a href='https://builder.addons.mozilla.org' class='button add'>{{ _('Try the Builder Now') }}</a>
       </div>
     </div>
     <div class="col"></div>
     <div class='col-2 island'>
       <div class='jetpack-sdk'>
-        <img src="{{ media('img/developers/command.png') }}">
+        <img src="{{ media('img/developers/jetpack_icon_command.png') }}">
         <h2><a href='https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip'>
           {{ _('Add-on SDK') }}</a></h2>
         <p>
         {% trans %}
-        The Add-on SDK is downloadable and lets you create add-ons using open Web technologies
-        in your own development environment through a command line interface.
-        If you're a code junkie who prefers to work with your computer rather than online,
-        this is for you.
+        The Add-on SDK is set of APIs bundled with a command line utility that allows you to
+        develop add-ons with your own tool chain.
         {% endtrans %}
         </p>
+        <ul>
+          <li>{{ _('Ability to choose your own code editor') }}</li>
+          <li>{{ _('Local access to your development files') }}</li>
+          <li>{{ _('Greater control over SDK build steps') }}</li>
+        </ul>
         <a href='https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip' class='button add'>
           {{ _('Download the Add-on SDK') }}</a>
       </div>

media/css/impala/developers.less

@@ -20,23 +20,37 @@
         }
     }
     &.jetpack {
+        h2 {
+            font-style: italic;
+            strong {
+                font-weight: bold;
+            }
+        }
         div.builder-videos {
             float: right;
             margin-bottom: 2em;
             margin-left: 1em;
             a {
-                background-color: #FFFFFF;
+                text-decoration: none;
                 display: inline-block;
-                border: 1px solid #BCDCF2;
-                .border-radius(4px);
-                .box-shadow(0 2px 3px #D1E5F4);
-                margin-left: 1em;
-                opacity: 0.8;
-                padding: 6px;
-                &:hover {
-                    opacity: 1;
+                img {
+                  background-color: #FFFFFF;
+                  display: inline-block;
+                  border: 1px solid #BCDCF2;
+                  .border-radius(4px);
+                  .box-shadow(0 2px 3px #D1E5F4);
+                  margin-left: 1em;
+                  opacity: 0.8;
+                  padding: 6px;
+                }
+                &:hover img {
+                      opacity: 1;
                 }
             }
+
+          div {
+              padding: 5px 0 0 15px;
+          }
         }
         p {
             .p-light;
@@ -75,6 +89,17 @@
 }
 
 #jetpack {
+    ul {
+        color: #777;
+        font-size: 14px;
+        list-style: disc;
+        padding-bottom: 1em;
+        list-style-position: inside;
+        li {
+            padding-bottom: 5px;
+        }
+    }
+
     h2.section {
         font-family: Georgia;
         font-size: 25px;
@@ -86,7 +111,7 @@
         margin-bottom: 1em;
     }
     .island p {
-        font-size: 15px;
+        font-size: 14px;
     }
     h2 a {
         font-weight: bold;
@@ -111,12 +136,12 @@
         }
     }
     .jetpack-builder, .jetpack-sdk {
-        padding-left: 130px;
+        padding: 1em 0em 1em 100px;
         position: relative;
         img {
             position: absolute;
             top: 10px;
-            left: 10px;
+            left: 5px;
         }
     }
 }