Capella Operational vs Columnar IA distinction

add a "capella-type" and format this as labels + alternate highlight in nav bar.

Author: osfameron

src/css/header.css

@@ -221,6 +221,10 @@
   background-color: var(--color-brand-red);
 }
 
+.Columnar .nav-item-selected {
+  background-color: var(--color-brand-caution);
+}
+
 @media screen and (min-width: 1024px) {
   .navbar-start > a.navbar-item:hover,
   .navbar-start > .navbar-item:hover > .navbar-link {

src/css/labels.css

@@ -126,6 +126,21 @@
   opacity: 0.6;
 }
 
+/* Capella types: columnar vs operational */
+.doc .columnar {
+  color: var(--color-brand-caution);
+  border: 1px solid var(--color-brand-caution);
+  border-radius: 3px;
+  opacity: 1;
+}
+
+.doc .operational {
+  color: var(--color-brand-red);
+  border: 1px solid var(--color-brand-red);
+  border-radius: 3px;
+  opacity: 0.6;
+}
+
 .doc .edition.page-edition {
   color: #999;
   border: 1px solid #999;

src/partials/header-content.hbs

@@ -30,7 +30,7 @@
   {{! Start secondary header }}
   <div class="header-bottom-row" id="topbar-menu">
     <div class="container">
-        <nav  class="navbar navbar-new-bottom">
+        <nav  class="navbar navbar-new-bottom {{page.attributes.capella-type}}">
 
               <div class="navbar-collapse collapse" id="navbar2">
                 <ul class="navbar-nav w-100 justify-content-start">

src/partials/labels.hbs

@@ -1,3 +1,19 @@
+{{#with page.attributes.capella-type}}
+<div class="labels">
+<ul>
+{{#if (eq this "Columnar")}}
+  <li class="columnar">
+    <i class="fas fa-chart-line"></i> 
+    Capella Columnar</li>
+{{else}}
+  <li class="operational">
+    <i class="fas fa-database"></i> 
+    Capella Operational</li>
+{{/if}}
+</ul>
+</div>
+{{/with}}
+
 {{#if (or page.attributes.topic-type)}}
 <div class="labels">
 <ul>{{#if (eq page.attributes.topic-type 'concept')}}
@@ -17,6 +33,7 @@
 </ul>
 </div>
 {{/if}}
+
 {{#if (or page.attributes.edition page.attributes.status)}}
 <div class="labels">
 <ul>
@@ -30,4 +47,3 @@
 </div>
 {{/if}}
 
-