Add announcement banner to all pages

linkerd.io/content/_index.md

@@ -7,8 +7,6 @@ keywords:
 - cloud native applications
 outputs:
 - html
-announcement_banner:
-  description: "[NEW EBOOK: Linkerd Up and Running by O'Reilly > **Download ebook**](https://buoyant.io/download/linkerd-up-and-running)"
 top_hero:
   title: The world's most advanced service mesh
   description: Enterprise power *without* enterprise complexity. Linkerd adds

linkerd.io/data/announcement_banner.yaml

@@ -0,0 +1 @@
+description: "[NEW EBOOK: Linkerd Up and Running (O’Reilly) > **Download ebook**](https://buoyant.io/download/linkerd-up-and-running)"

linkerd.io/layouts/_default/baseof.html

@@ -15,6 +15,7 @@
   <!-- End Google Tag Manager (noscript) -->
   {{ end }}
   {{ partial "header.html" . }}
+  {{ partial "announcement-banner.html" . }}
   <section class="hero">
     <main aria-role="main" class="hero-body">
       {{ block "main" . }}

linkerd.io/layouts/index.html

@@ -1,5 +1,4 @@
 {{ define "main" }}
-{{ partial "homepage/homepage-notification.html" .Params.announcement_banner  }}
 {{ partial "homepage/top-hero.html" .Params.top_hero  }}
 {{ partial "homepage/stats-list.html" .Params.stats }}
 {{ partial "homepage/featured-articles.html" .Params.featured_articles }}

linkerd.io/layouts/partials/announcement-banner.html

@@ -0,0 +1,5 @@
+{{ with site.Data.announcement_banner }}
+<div class="announcement-banner has-background-light-blue has-text-navy-black center has-text-centered">
+  <p>{{ .description | markdownify }}</p>
+</div>
+{{ end }}

linkerd.io/themes/buoyant/assets/scss/styles-base.scss

@@ -12,21 +12,27 @@ body {
 .wrapper {
   position: relative;
 }
-.homepage-notification {
+.announcement-banner {
   min-height: 40px;
   padding: 0 10px;
   background-color: $deep-blue;
 }
-.homepage-notification,
-.homepage-notification a {
+.announcement-banner,
+.announcement-banner a {
   color: white;
   font-size: 16px !important;
   font-weight: 400;
   line-height: 1.2;
 }
-.homepage-notification img {
+.announcement-banner img {
   vertical-align: text-bottom;
 }
+@media (max-width: 1024px) {
+  .announcement-banner {
+    height: auto;
+    padding: 10px 15px;
+  }
+}
 .hero-body {
   position: relative;
   -webkit-box-orient: vertical;
@@ -1027,12 +1033,6 @@ a.card-link {
 }
 
 @media (max-width: 1024px) {
-
-  .homepage-notification {
-    height: auto;
-    padding: 10px 15px;
-  }
-
   .hero .hero-head .navbar {
     height: auto;
   }