diff --git a/apps/devhub/templates/devhub/builder.html b/apps/devhub/templates/devhub/builder.html index 518b2ccd64..4738829cdf 100644 --- a/apps/devhub/templates/devhub/builder.html +++ b/apps/devhub/templates/devhub/builder.html @@ -12,9 +12,11 @@
- {{ _('Video 1') }} + {{ _('Video 1') }} +
{{ _('Video 1') }}
- {{ _('Video 2') }} + {{ _('Video 2') }} +
{{ _('Video 2') }}

{% trans %} @@ -32,33 +34,39 @@

- +

{{ _('Add-on Builder (Beta)') }}

{% 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 %}

+
    +
  • {{ _('Feature-rich code editor') }}
  • +
  • {{ _('Instant testing for your add-ons') }}
  • +
  • {{ _('Built-in code revisioning & sharing') }}
  • +
{{ _('Try the Builder Now') }}
- +

{{ _('Add-on SDK') }}

{% 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 %}

+
    +
  • {{ _('Ability to choose your own code editor') }}
  • +
  • {{ _('Local access to your development files') }}
  • +
  • {{ _('Greater control over SDK build steps') }}
  • +
{{ _('Download the Add-on SDK') }}
diff --git a/media/css/impala/developers.less b/media/css/impala/developers.less index 3483855bca..ad007bd9a1 100644 --- a/media/css/impala/developers.less +++ b/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; } } } diff --git a/media/img/developers/command.png b/media/img/developers/command.png deleted file mode 100644 index 922bf67e2d..0000000000 Binary files a/media/img/developers/command.png and /dev/null differ diff --git a/media/img/developers/jetpack_icon_box.png b/media/img/developers/jetpack_icon_box.png new file mode 100644 index 0000000000..99c554df1b Binary files /dev/null and b/media/img/developers/jetpack_icon_box.png differ diff --git a/media/img/developers/jetpack_icon_command.png b/media/img/developers/jetpack_icon_command.png new file mode 100644 index 0000000000..fd7a4f4f71 Binary files /dev/null and b/media/img/developers/jetpack_icon_command.png differ