Add publish my addon block

src/olympia/devhub/templates/devhub/new-landing/components/publish_your_addon.html

@@ -0,0 +1,22 @@
+<section class="DevHub-publish-addon content scheme-default">
+  <div class="DevHub-content-container">
+    <div class="DevHub-content-image-wrapper">
+      <img class="DevHub-content-image DevHub-content-image--alt"
+           src="{{ STATIC_URL }}img/developers/new-landing/publish-my-addon.png"
+           srcset="{{ STATIC_URL }}img/developers/new-landing/publish-my-addon.png 1x,
+                   {{ STATIC_URL }}img/developers/new-landing/publish-my-addon-2x.png 2x"
+           alt="" />
+    </div>
+    <div class="DevHub-content-copy">
+      <h2 class="DevHub-content-header">{{ _('Publish Your Add-on') }}</h2>
+      <p>
+        {% trans %}
+        Have you an add-on ready? Submit your extension or theme to be
+        listed on addons.mozilla.org or sign and distribute your extension
+        on your own.
+        {% endtrans %}
+      </p>
+      <a href="#" class="Button">{{ _('Sign in') }}</a>
+    </div>
+  </div>
+</section>

src/olympia/devhub/templates/devhub/new-landing/index.html

@@ -52,6 +52,7 @@
     {% if not user_authenticated %}
       {% include 'devhub/new-landing/components/overview.html' %}
       {% include 'devhub/new-landing/components/port_chrome_ext.html' %}
+      {% include 'devhub/new-landing/components/publish_your_addon.html' %}
     {% endif %}
 
     {% if not user_authenticated %}

static/css/devhub/new-landing/base.less

@@ -3,8 +3,9 @@
 
 // Grid
 @grid-max: 940px;
-@small: ~"only screen and (max-width: 599px)";
-@medium: ~"only screen and (min-width: 600px)";
+@extra-small: ~"only screen and (max-width: 599px)";
+@small: ~"only screen and (min-width: 599px)";
+@medium: ~"only screen and (min-width: 700px)";
 @large: ~"only screen and (min-width: 1024px)";
 @retina: ~"only screen and (min-device-pixel-ratio: 2)";
 
@@ -16,6 +17,9 @@
 @color-items: #fff;
 
 // Color Schemes
+// Default
+@color-scheme-default-background: #ffffff;
+
 // Light
 @color-scheme-light-text: #333;
 @color-scheme-light-background: #f1f3f6;
@@ -37,6 +41,13 @@
 // Common styles
 * {
   font-family: @font-primary;
+  // widths take into account padding + borders.
+  box-sizing: border-box;
+}
+
+*::before,
+*::after {
+  box-sizing: content-box;
 }
 
 img {
@@ -86,4 +97,3 @@ h3 {
 @import 'sections/overview';
 @import 'sections/more-information';
 @import 'sections/my-addons';
-@import 'sections/port-chrome-ext';

static/css/devhub/new-landing/button.less

@@ -8,6 +8,11 @@
   margin: 10px 0;
   text-align: center;
   text-decoration: none;
+  width: 100%;
+
+  @media @small {
+    width: auto;
+  }
 
   @media @medium {
     margin: 0 10px 0 0;

static/css/devhub/new-landing/common.less

@@ -6,19 +6,23 @@
     padding: 20px 20px;
 
     @media @medium {
-      padding: 20px 60px;
-      max-width: @grid-max;
       margin: 0 auto;
+      max-width: @grid-max;
+      padding: 20px 60px;
     }
   }
 
   p,
   li {
-    font-weight: 300;
     color: @color-text;
+    font-weight: 300;
   }
 }
 
+.scheme-default {
+  background-color: @color-scheme-default-background;
+}
+
 .scheme-light {
   background-color: @color-scheme-light-background;
 
@@ -60,3 +64,90 @@
     background-color: @color-scheme-dark-background;
   }
 }
+
+.DevHub-content-container {
+  display: flex;
+  position: relative;
+}
+
+.DevHub-content-header {
+  font-size: 40px;
+  max-width: 66%;
+}
+
+.DevHub-content-image-wrapper {
+  max-width: 33%;
+  padding: 30px 0 30px 30px;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  z-index: 2;
+}
+
+
+.DevHub-content-copy {
+  position: relative;
+  z-index: 4;
+}
+
+@media @small {
+  .DevHub-content-copy {
+    max-width: 66%;
+  }
+
+  .DevHub-content-image-wrapper {
+    max-width: 33%;
+  }
+}
+
+
+@media @medium {
+  .DevHub-content-copy,
+  .DevHub-content-image-wrapper {
+    max-width: 50%;
+  }
+
+  .DevHub-content-copy {
+    margin: 0 auto 40px auto;
+  }
+
+  .DevHub-content-container {
+    overflow: visible;
+  }
+
+  .DevHub-content-header {
+    max-width: 100%;
+    margin: 60px 0 20px;
+  }
+
+  .DevHub-content-image-wrapper {
+    position: relative;
+    top: 10px;
+    width: 100%;
+
+    &::before {
+      content: '';
+      display: block;
+      // Pad out the wrapper to a percentage
+      // based on the wrapper's width.
+      padding-bottom: 65%;
+
+      .DevHub-publish-addon & {
+        padding-bottom: 50%;
+      }
+    }
+  }
+
+  .DevHub-content-image {
+    position: absolute;
+    top: 50px;
+    right: 0;
+    left: 20px;
+    bottom: 0;
+  }
+
+  .DevHub-content-image--alt {
+    top: -70px;
+    min-width: 350px;
+  }
+}

static/css/devhub/new-landing/sections/port-chrome-ext.less

@@ -1,38 +0,0 @@
-.DevHub-content-container {
-  display: flex;
-  position: relative;
-}
-
-.DevHub-content-header {
-  font-size: 40px;
-  max-width: 66%;
-}
-
-.DevHub-content-image-wrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 30px 0 30px 30px;
-  max-width: 33%;
-  z-index: 2;
-}
-
-.DevHub-content-copy {
-  position: relative;
-  z-index: 4;
-}
-
-@media @medium {
-  .DevHub-content-copy,
-  .DevHub-content-image-wrapper {
-    max-width: 50%;
-  }
-
-  .DevHub-content-header {
-    max-width: 100%;
-  }
-
-  .DevHub-content-image-wrapper {
-    position: static;
-  }
-}