add pencil banner

bedrock/mozorg/templates/mozorg/home/home-m24.html

@@ -26,6 +26,8 @@
   {{ css_bundle('m24') }}
 {% endblock %}
 
+{% include 'mozorg/home/includes/m24/pencil-banner.html'%}
+
 {% block site_header %}
     {% include 'includes/protocol/navigation/navigation.html' %}
 {% endblock %}

bedrock/mozorg/templates/mozorg/home/includes/m24/pencil-banner.html

@@ -0,0 +1,21 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+{% block page_css %}
+  {{ css_bundle('m24-pencil-banner') }}
+{% endblock %}
+
+<aside class="m24-pencil-banner c-banner">
+  <div class="m24-pencil-banner-copy">
+    {% set donate_url = 'href="https://foundation.mozilla.org/en/?form=donate-today"' %}
+
+    {% set download_url = 'href="https://www.mozilla.org/en-US/firefox/download/thanks/"' %}
+
+    <p class="c-banner-mofo-donate">{{ ftl('m24-pencil-banner-support-ethical', donate=donate_url) }}</p>
+
+    <p class="c-banner-firefox-download">{{ ftl('m24-pencil-banner-download-firefox', download=download_url) }}</p>
+  </div>
+</aside>

bedrock/settings/base.py

@@ -283,6 +283,7 @@ def _put_default_lang_first(langs, default_lang=LANGUAGE_CODE):
     "navigation",
     "navigation_v2",
     "newsletter_form",
+    "mozorg/m24-pencil-banner",
     "send_to_device",
     "sub_navigation",
     "ui",

l10n/en/mozorg/m24-pencil-banner.ftl

@@ -0,0 +1,11 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+# Variables:
+# $donate (url) - link to https://foundation.mozilla.org/en/?form=donate-today
+m24-pencil-banner-support-ethical = Support ethical AI and internet privacy — <a { $donate }>donate today!</a>
+
+# Variables:
+# $download (url) - link to https://www.mozilla.org/en-US/firefox/download/thanks/
+m24-pencil-banner-download-firefox = You know whats good for ya? <a { $download }>downloading { -brand-name-firefox }</a>

media/css/m24/pencil-banner.scss

@@ -0,0 +1,48 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+
+@import 'vars/color';
+@import 'vars/fonts';
+@import 'vars/grid';
+@import 'vars/spacing';
+@import 'vars/text';
+
+.m24-pencil-banner {
+    background-color: $m24-color-light-green;
+    border-bottom: 2px solid $m24-color-green;
+    padding: $spacer-sm;
+
+    .m24-pencil-banner-copy {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        p {
+            color: $m24-color-black;
+            margin-bottom: 0;
+            text-align: center;
+        }
+
+        .c-banner-mofo-donate {
+            display: none;
+        }
+
+        .c-banner-firefox-download {
+            display: block;
+        }
+
+        .is-firefox & {
+            .c-banner-mofo-donate {
+                display: block;
+            }
+
+            .c-banner-firefox-download {
+                display: none;
+            }
+        }
+
+    }
+}

media/static-bundles.json

@@ -261,6 +261,12 @@
       ],
       "name": "m24-navigation-and-footer"
     },
+    {
+      "files": [
+        "css/m24/pencil-banner.scss"
+      ],
+      "name": "m24-pencil-banner"
+    },
     {
       "files": [
         "css/legal/legal.scss"