Add banner

Author: romannurik

app/_generator-base.html

@@ -33,4 +33,5 @@ <h1 class="page-header-title">{{ title }}</h1>
   </div>
   {% endblock %}
 </div>
+{% block banner %}{% endblock %}
 {% endblock %}

app/components/page-header.scss

@@ -32,6 +32,29 @@
   transform: translateZ(0);
 }
 
+.page-header-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 0;
+  box-shadow: material-shadow(4);
+  background-color: $colorAccent;
+  color: $colorWhitePrimary;
+  font-weight: 500;
+  z-index: 4;
+
+  a {
+    color: $colorWhitePrimary;
+    // background-color: rgba($colorBlackPrimary, .2);
+    // padding: 4px 8px;
+    // border-radius: 4px;
+  }
+
+  .material-icons {
+    margin-right: 8px;
+  }
+}
+
 .page-header-back-button {
   position: absolute;
   font-size: 24px;

app/pages/launcher-icon-generator.html

@@ -6,6 +6,17 @@
 
 {% extends '_generator-base.html' %}
 
+{% block banner %}
+<div class="page-header-banner">
+  <i class="material-icons">new_releases</i>
+  <span>
+    <a href="https://icon.kitchen">Try IconKitchen</a>, the successor to the
+    Android Asset Studio, and a great new way to make highly customizable
+    app icons for Android, iOS, and the web.
+  </span>
+</div>
+{% endblock %}
+
 {% block body %}
 {{ super() }}
 <script>