Add a banner to a page (#217)

```
:page-banner: note
:page-banner-text: Lorem ipsum dolor sit est.
:page-banner-link: https://neo4j.com/docs
:page-banner-link-text: Link text
```

`note` is the default, `warning` can also be used.

preview-src/banner-note.adoc

@@ -0,0 +1,20 @@
+= Note banner
+:page-theme: docs
+:page-banner: note
+:page-banner-text: Lorem ipsum dolor sit est.
+:page-banner-link: https://neo4j.com/docs
+:page-banner-link-text: Link text
+
+
+[abstract]
+--
+Add page banner attributes to a page to display a message between the header and the toolbar.
+--
+
+[source]
+----
+:page-banner: note
+:page-banner-text: Lorem ipsum dolor sit est.
+:page-banner-link: https://neo4j.com/docs
+:page-banner-link-text: Link text
+----

preview-src/banner-warning.adoc

@@ -0,0 +1,20 @@
+= Warning banner
+:page-theme: docs
+:page-banner: warning
+:page-banner-text: Lorem ipsum dolor sit est.
+:page-banner-link: https://neo4j.com/docs
+:page-banner-link-text: Link text
+
+
+[abstract]
+--
+Add page banner attributes to a page to display a message between the header and the toolbar
+--
+
+[source]
+----
+:page-banner: warning
+:page-banner-text: Lorem ipsum dolor sit est.
+:page-banner-link: https://neo4j.com/docs
+:page-banner-link-text: Link text
+----

preview-src/docs-roles.adoc

@@ -1,6 +1,10 @@
 = Docs `code test` flags
 :page-role: not-on-aura
 :page-theme: docs
+:page-banner: warning
+:page-banner-text: Lorem ipsum dolor sit est.
+:page-banner-link: https://neo4j.com/docs
+:page-banner-link-text: Link text
 // :page-labels: fabric enterprise-edition alpha test
 
 [abstract]

preview-src/ui-model.yml

@@ -139,6 +139,14 @@ page:
     - content: Admonitions
       url: admonitions.html
       urlType: internal
+    - content: Page Banners
+      items:
+      - content: note
+        url: banner-note.html
+        urlType: internal
+      - content: warning
+        url: banner-warning.html
+        urlType: internal
     - content: Labels
       url: labels.html
       urlType: internal

src/css/header.css

@@ -6,6 +6,31 @@ body {
   padding-top: var(--navbar-height);
 }
 
+.header-banner {
+  background: var(--note-background-color);
+  color: var(--note-color);
+  box-shadow: 0 0 1px var(--note-border-color);
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  height: var(--banner-height);
+  position: fixed;
+  top: var(--navbar-height);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-index-banner);
+}
+
+.header-banner.warning-banner {
+  background: var(--warning-background-color);
+  color: var(--warning-color);
+  box-shadow: 0 0 1px var(--warning-border-color);
+}
+
+.header-banner span {
+  padding: 0.25rem;
+}
+
 .navbar {
   background: var(--navbar-background);
   color: var(--navbar-font-color);

src/css/nav.css

@@ -50,6 +50,10 @@
     position: sticky;
     height: var(--nav-height--desktop);
   }
+
+  body.has-banner .nav {
+    top: calc(var(--navbar-height) + var(--banner-height));
+  }
 }
 
 .nav .panels {

src/css/toolbar.css

@@ -12,6 +12,10 @@
   z-index: var(--z-index-toolbar);
 }
 
+body.has-banner .toolbar {
+  top: calc(var(--navbar-height) + var(--banner-height));
+}
+
 .toolbar-wrapper {
   display: flex;
   width: 100%;

src/css/vars.css

@@ -250,6 +250,7 @@
   --tip-color: rgba(var(--theme-light-palette-primary-bg-strong));
   --tip-background-color: rgba(var(--theme-light-palette-primary-bg-weak));
   --warning-color: rgba(var(--theme-light-palette-danger-bg-strong));
+  --warning-border-color: rgba(var(--theme-light-palette-danger-bg-strong));
   --warning-background-color: rgba(var(--theme-light-palette-danger-bg-weak));
   --mark-background: rgba(var(--theme-light-palette-primary-bg-weak));
 
@@ -370,6 +371,7 @@
   /* dimensions and positioning */
   --navbar-height: calc(68 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
+  --banner-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
   --body-top: var(--navbar-height);
   --body-min-height: calc(100vh - var(--body-top));
@@ -398,6 +400,7 @@
   /* stacking */
   --z-index-nav: 1;
   --z-index-toolbar: 20;
+  --z-index-banner: 30;
   --z-index-code: 10;
   --z-index-page-version-menu: 3;
   --z-index-navbar: 5000;

src/layouts/default.hbs

@@ -3,7 +3,7 @@
   <head>
 {{> head defaultPageTitle='Untitled'}}
   </head>
-  <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}{{#with asciidoc.attributes.role}} {{{this}}}{{/with}}{{#with (or page.attributes.theme "developer")}} {{{this}}}{{/with}}{{#with (or page.attributes.styles page.styles)}} {{{this}}}{{/with}}{{#if (or page.attributes.show-labels page.show-labels)}} show-labels{{/if}}">
+  <body class="article{{#if page.attributes.banner}} has-banner{{/if}}{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}{{#with asciidoc.attributes.role}} {{{this}}}{{/with}}{{#with (or page.attributes.theme "developer")}} {{{this}}}{{/with}}{{#with (or page.attributes.styles page.styles)}} {{{this}}}{{/with}}{{#if (or page.attributes.show-labels page.show-labels)}} show-labels{{/if}}">
 {{> header}}
 {{> body}}
 {{> footer}}

src/partials/header-content.hbs

@@ -103,4 +103,15 @@
       {{/if}}
     </div>
   </nav>
+  {{#if (and page.attributes.banner page.attributes.banner-text)}}
+  <div class="header-banner{{#with (or page.attributes.banner "info")}} {{{this}}}-banner{{/with}}">
+    <span>{{#with page.attributes.banner-text}}{{{this}}}{{/with}}</span>
+    {{#if page.attributes.banner-link}}
+    <span>
+      <a href="{{{page.attributes.banner-link}}}">{{#with (or page.attributes.banner-link-text page.attributes.banner-link)}}{{{this}}}{{/with}}</a>
+    </span>
+    {{/if}}
+  </div>
+  {{/if}}
+
 </header>