devhub landing page css updates; (bug 804378)

media/css/ecosystem/documentation.less

@@ -73,6 +73,10 @@
     li ul {
         margin-top: 0;
     }
+
+    li > a {
+        font-weight: normal;
+    }
 }
 
 #document-navigation {

media/css/ecosystem/landing.less

@@ -29,19 +29,19 @@
     p.intro {
         font-size: 25px;
         font-weight: 100;
-        padding-bottom: 30px;
+        padding-bottom: 20px;
         text-align: center;
     }
 
     .button-wrapper {
-        padding: 30px 0 20px;
+        padding: 20px 10px;
+        width: 288px;
     }
 }
 
 #landing-page .half {
     float: left;
     margin: 8px 0;
-    padding: 10px 20px 0;
     position: relative;
     width: 920px;
 
@@ -52,19 +52,31 @@
     }
 
     &.initial-steps {
-        background: #fff url(../../img/ecosystem/landing-steps.png) no-repeat 15px 50%;
+        background: #fff url(../../img/ecosystem/landing-steps.png) no-repeat -8px 38%;
         margin-bottom: 40px;
+        padding-top: 0;
+    }
+
+    .button.prominent {
+        &.first {
+            background: #eb492d;
+        }
+
+        &.second {
+            background: #ff9600;
+        }
     }
 
     &.contact {
+        margin: 25px 0;
         text-align: center;
 
         .contact-info, .logo {
             float: left;
         }
 
         .logo {
-            padding: 15px 20px 15px 0;
+            padding: 15px 20px 5px 0;
             width: 142px;
 
             img {
@@ -101,24 +113,32 @@
 
     .panel {
         float: left;
-        width: 33.3%;
+        width: 306px;
 
         h2 {
+            margin-top: 10px;
             text-align: center;
         }
 
-        a p {
-            color: @medium-gray;
+        p {
+            border-bottom: 2px solid transparent;
+            display: block;
+            height: 50px;
+            margin: 0 auto;
+            overflow: hidden;
+            padding-top: 10px;
+            text-overflow: ellipsis;
+            width: 230px;
         }
 
-        a:hover {
-            text-decoration: none;
+        a p {
+            color: @medium-gray;
         }
 
         p {
             margin: 0 auto;
+            padding: 0 10px 10px 10px;
             text-align: center;
-            width: 200px;
         }
     }
 

mkt/developers/templates/developers/skeleton_impala.html

@@ -57,6 +57,11 @@
             <nav id="aux-nav" role="navigation" class="menu-nav c">
               <ul>
                 {% if not settings.READ_ONLY %}
+                  <li class="nomenu">
+                    <a href="{{ url('submit.app') }}">
+                      {{ _('Submit an App') }}
+                    </a>
+                  </li>
                   {% if user.is_authenticated() %}
                     <li class="account">
                       <a href="{{ amo_user.get_url_path() }}" class="user"

mkt/ecosystem/templates/ecosystem/landing.html

@@ -16,52 +16,47 @@ <h1>{{ _('Developer Hub') }}</h1>
     </p>
     <section class="half initial-steps">
       <div class="panel">
-        <a href="{{ url('ecosystem.documentation', page='principles') }}">
-          <h2>{{ _('Design') }}</h2>
-          <p>
-            {% trans %}
-              Learn how to design Web Apps that provide a user experience
-              optimized for Firefox OS &amp; Mobile
-            {% endtrans %}
-          </p>
-        </a>
-        <div class="button-wrapper">
+        <h2>{{ _('Design') }}</h2>
+        <p>
+          {% trans %}
+            Learn how to design Web Apps that provide a user experience
+            optimized for Firefox OS &amp; Mobile
+          {% endtrans %}
+        </p>
+        <div class="button-wrapper first">
           <a href="{{ url('ecosystem.documentation', page='principles') }}"
-             class="button prominent">
-            {{ _('View the Design Guide') }}
+             class="button prominent first">
+            {{ _('Design your App') }}
           </a>
         </div>
       </div>
       <div class="panel">
-        <a href="{{ url('ecosystem.documentation', page='html5') }}">
-          <h2>{{ _('Build') }}</h2>
-          <p>
-            {% trans %}
-              All the tools, docs and references you'll need for
-              development and testing of your App
-            {% endtrans %}
-          </p>
-        </a>
+        <h2>{{ _('Build') }}</h2>
+        <p>
+          {% trans %}
+            All the tools, docs and references you'll need for
+            development and testing of your App
+          {% endtrans %}
+        </p>
         <div class="button-wrapper">
           <a href="{{ url('ecosystem.documentation', page='tutorial_general') }}"
-             class="button prominent">
-            {{ _('Start the Tutorial') }}
+             class="button prominent second">
+            {{ _('Build your App') }}
           </a>
         </div>
       </div>
       <div class="panel">
-        <a href="{{ url('ecosystem.documentation', page='mkt_hosting') }}">
-          <h2>{{ _('Publish') }}</h2>
-          <p>
-            {% trans %}
-              Find out how to distribute your Apps on an open marketplace
-              that puts users and developers first
-            {% endtrans %}
-          </p>
-        </a>
-        <div class="button-wrapper">
-          <a href="{{ url('submit.app') }}" class="button prominent">
-            {{ _('Submit an App') }}</a>
+        <h2>{{ _('Publish') }}</h2>
+        <p>
+          {% trans %}
+            Find out how to distribute your Apps on an open marketplace
+            that puts users and developers first
+          {% endtrans %}
+        </p>
+        <div class="button-wrapper last">
+          <a href="{{ url('ecosystem.documentation', page='mkt_hosting') }}"
+             class="button prominent third">
+            {{ _('Publish your App') }}</a>
         </div>
       </div>
     </section>