Merge pull request #3495 from craigcook/bug-1214835-smarton-tracking-…

…home-promo

Fix bug 1214835 - Add SmartOn Tracking home page promo

bedrock/mozorg/templates/mozorg/home/home.html

@@ -208,7 +208,13 @@ <h3>{{ _('Let’s build a Web that’s open <br>and made by everyone.') }}</h3>
         <li id="promo-7" class="item promo-face">
           {{ promo_face(3, 'promo-7') }}
         </li>
-      {% if l10n_has_tag('webmaker_promo_thimble') %}
+      {% if l10n_has_tag('smarton_promo_tracking') and waffle.switch('tracking-protection') %}
+        <li id="promo-8" class="item promo-small-landscape smarton-tracking" tabindex="0">
+          <a class="panel-link" rel="external" href="{{ url('teach.smarton.tracking') }}" data-promotion-id="promo-8" data-promotion-name="Get smart on Tracking" data-promotion-class="promo-small-landscape" data-promotion-type="tile">
+            <h2>{{ _('Get smart on Tracking') }}</h2>
+          </a>
+        </li>
+      {% elif l10n_has_tag('webmaker_promo_thimble') %}
         <li id="promo-8" class="item promo-small-landscape thimble" tabindex="0">
           <a class="panel-link" rel="external" href="https://thimble.mozilla.org/" data-promotion-id="promo-8" data-promotion-name="Try the Thimble code editor" data-promotion-class="promo-small-landscape" data-promotion-type="tile">
             <h2>{{ _('Try the Thimble code editor') }}</h2>

media/css/mozorg/home/home-promo.less

@@ -924,6 +924,44 @@ html[lang|="en"] {
     }
 }
 
+
+/***************************************************************************/
+// SmartOn Tracking
+.promo-small-landscape.smarton-tracking {
+
+    background-color: #821c76;
+
+    h2 {
+        .at2x('/media/img/home/voices/promos/smarton/smarton-tracking.png', 95px, 95px);
+        background-repeat: no-repeat;
+        background-position: left center;
+        margin: @baseLine 10px 0;
+        padding: 15px 0 @baseLine 110px;
+        min-height: 60px;
+        .font-size(@largeFontSize);
+    }
+}
+
+[lang|="en"] {
+    .promo-small-landscape.smarton-tracking {
+        h2 {
+            .font-size(22px);
+        }
+    }
+}
+
+.html-rtl {
+    .promo-small-landscape.smarton-tracking {
+        h2 {
+            background-position: right center;
+            padding: 15px 110px @baseLine 0;
+            text-align: right;
+        }
+    }
+}
+
+
+
 /****************************************************************************/
 // Gear
 .promo-large-landscape.gear {