Update non-frontpage header to include hexagon branding.

Author: laceysanderson

_includes/header.html

@@ -0,0 +1,60 @@
+<nav
+    class="navbar not-front is-primary {% if site.fixed_navbar %} is-fixed-{{ site.fixed_navbar }} {% endif %}"
+    x-data="{ openNav: false }"
+>
+    <div class="container">
+        <div class="navbar-brand">
+            <a href="{{ site.baseurl }}/" class="navbar-item">
+                <img src="/images/TripalLogo_light_lrg.png" alt="Home">
+            </a>
+            <a
+                role="button"
+                class="navbar-burger burger"
+                aria-label="menu"
+                aria-expanded="false"
+                data-target="navMenu"
+                :class="{ 'is-active': openNav }"
+                x-on:click="openNav = !openNav"
+            >
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </a>
+        </div>
+        <div class="navbar-menu" id="navMenu" :class="{ 'is-active': openNav }">
+            <div class="navbar-end">
+                {% if site.data.navigation %}
+                    {% for item in site.data.navigation %}
+                        {% if item.dropdown %}
+                            <div class="navbar-item has-dropdown is-hoverable {% if site.fixed_navbar == 'bottom' %} has-dropdown-up {% endif %}">
+                                <a
+                                    href="{{ item.link | relative_url }}"
+                                    class="navbar-link {% if page.url contains item.link %}is-active{% endif %}"
+                                >
+                                    {{- item.name -}}
+                                </a>
+                                <div class="navbar-dropdown">
+                                    {% for subitem in item.dropdown %}
+                                        <a
+                                            href="{{ subitem.link | relative_url }}"
+                                            class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}"
+                                        >
+                                            {{- subitem.name -}}
+                                        </a>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        {% else %}
+                            <a
+                                href="{{ item.link | relative_url }}"
+                                class="navbar-item {% if item.link == page.url %}is-active{% endif %}"
+                            >
+                                {{- item.name -}}
+                            </a>
+                        {% endif %}
+                    {% endfor %}
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</nav>

assets/css/app.scss

@@ -6,6 +6,15 @@ $link: #990000;
 
 :root {
   --bulma-navbar-height: 8rem !important;
+  --tripal-gray: hsl(40deg, 10%, 15%);
+}
+.navbar.is-primary {
+  --bulma-navbar-background-color: var(--tripal-gray) !important;
+}
+.hero.is-primary {
+  --bulma-hero-h: 40deg !important;
+  --bulma-hero-s: 15% !important;
+  --bulma-hero-background-l: 5% !important;
 }
 
 // Navbar.
@@ -26,10 +35,15 @@ a.navbar-item, .navbar-link {
     background-color: #e7e7e7 !important;
   }
 }
+.navbar {
+  background: var(--tripal-gray);
+  background-image: url("/images/hexagon_pattern.png") !important;
+  background-repeat: repeat !important;
+}
 
 // Frontpage Header.
 .frontpage-panel {
-  background: #1f1f1f;
+  background: var(--tripal-gray);
   background-image: url("/images/hexagon_pattern.png") !important;
   background-repeat: repeat !important;