Update documentation theme with main project site

ui-supplemental/css/custom.css

@@ -1,3 +1,46 @@
+:root {
+  --white: #fff;
+  --primary-color: #d0245e;
+  --secondary-color: #888;
+  --button-gradient: linear-gradient(82.8deg, #d0245e 5%, #df487b 95%);
+  --main-gradient: linear-gradient(135deg, #0b365b, #6b1011);
+  --black-10: rgba(0, 0, 0, .1);
+  --black-20: rgba(0, 0, 0, .2);
+  --black-30: rgba(0, 0, 0, .3);
+  --black-40: rgba(0, 0, 0, .4);
+  --black-50: rgba(0, 0, 0, .5);
+  --black-60: rgba(0, 0, 0, .6);
+  --black-70: rgba(0, 0, 0, .7);
+  --black-80: rgba(0, 0, 0, .8);
+  --black-90: rgba(0, 0, 0, .9);
+  --black-100: #000;
+  --bg-grad-1: #f3f3f3;
+  --bg-grad-2: #f8f3f3;
+  --dialog-bg: #f6f6f6;
+  --border-primary: #eaeaea;
+  --light-grey: #999;
+  --medium-grey: #666;
+  --dark-grey: #333;
+}
+
+body {
+  background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
+  padding-top: 4rem;
+}
+
+.toolbar {
+  top: 4rem;
+}
+
+.content {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.doc {
+  width: 100%;
+  max-width: 100%;
+}
 
 .doc .prompt {
   color: blue;
@@ -108,3 +151,153 @@ kbd {
 img.medium-zoom-image {
   z-index: 1000;
 }
+
+.navbar-burger span {
+  background: var(--medium-grey);
+  border-radius: 2px;
+  width: 18px;
+}
+
+.navbar {
+  background: transparent;
+  height: 4rem;
+  background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.navbar .navbar-item,
+.navbar .navbar-link {
+  font-size: 16px;
+  color: var(--medium-grey);
+}
+
+.navbar-end .navbar-item.has-dropdown:hover .navbar-link,
+.navbar-end .navbar-link:hover,
+.navbar-end>a.navbar-item:hover {
+  background: transparent !important;
+  color: var(--medium-grey) !important;
+}
+
+.nav-toggle {
+  display: none;
+}
+
+footer {
+  background-color: var(--white);
+  padding: 60px 0
+}
+
+footer .footer-link-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border-primary);
+  padding: 0 36px 12px;
+  margin: 0 24px 36px
+}
+
+@media only screen and (max-width:768px) {
+  footer .footer-link-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr
+  }
+}
+
+footer .footer-link-section .footer-logo {
+  display: flex;
+  margin: 0 auto
+}
+
+@media only screen and (max-width:768px) {
+  footer .footer-link-section .footer-logo {
+    order: -1;
+    grid-column: 1/3;
+    margin-bottom: 12px
+  }
+}
+
+footer .footer-link-section ul {
+  display: flex;
+  margin: 0;
+  padding: 0
+}
+
+@media only screen and (max-width:768px) {
+  footer .footer-link-section ul {
+    flex-direction: column
+  }
+}
+
+footer .footer-link-section ul li {
+  list-style: none;
+  margin-right: 60px;
+}
+
+
+footer .footer-link-section ul li a {
+  color: var(--dark-grey);
+  font-size: 16px;
+}
+
+footer .footer-link-section ul li a:hover {
+  text-decoration: none;
+}
+
+@media only screen and (max-width:768px) {
+  footer .footer-link-section ul li {
+    margin: 0 0 12px
+  }
+}
+
+footer .footer-link-section ul li:last-child {
+  margin-right: 0;
+  margin-bottom: 0
+}
+
+footer .footer-social {
+  display: flex;
+  margin: 0 auto 12px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content
+}
+
+footer .footer-social a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--medium-grey);
+  border-radius: 1000px;
+  height: 36px;
+  width: 36px;
+  margin-right: 24px
+}
+
+footer .footer-social a:last-child {
+  margin-right: 0
+}
+
+footer .footer-practices {
+  display: flex;
+  margin: 0 auto 36px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content
+}
+
+footer .footer-copyright {
+  padding: 0 36px;
+  text-align: center;
+  margin: auto
+}
+
+footer .footer-copyright h2 {
+  font-size: 16px;
+  color: var(--dark-grey)
+}
+
+footer .footer-copyright p {
+  font-size: 14px;
+  color: var(--light-grey)
+}

ui-supplemental/partials/footer-content.hbs

@@ -1,6 +1,85 @@
-{{!-- we don't need any footer for the time being
-<footer class="footer">
-  <p>This page was built using the Antora default UI.</p>
-  <p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
+<footer>
+  <div class="footer-link-section">
+    <ul>
+      <li>
+        <a href="https://github.com/BRL-CAD/brlcad">Download</a>
+      </li>
+      <li>
+        <a href="https://www.facebook.com/BRL-CAD-387112738872/">News</a>
+      </li>
+      <li>
+        <a href="https://en.wikipedia.org/wiki/BRL-CAD">About</a>
+      </li>
+    </ul>
+    <a class="footer-logo" href="/">
+      <img
+        alt="BRL-CAD"
+        src="{{@root.uiRootPath}}/img/logo/brlcad.png"
+        height="64"
+        width="64"
+      />
+    </a>
+    <ul>
+      <li>
+        <a href="https://brlcad.org/wiki/">Docs</a>
+      </li>
+      <li>
+        <a href="https://github.com/BRL-CAD/brlcad/issues">Support</a>
+      </li>
+      <li>
+        <a href="https://brlcad.org/gallery/">Gallery</a>
+      </li>
+    </ul>
+  </div>
+  <div class="footer-social">
+    <a href="https://www.facebook.com/pages/BRL-CAD/387112738872">
+    <img
+        alt="Facebook"
+        src="{{@root.uiRootPath}}/img/facebook.svg"
+        height="18"
+        width="18"
+      />
+    </a>
+    <a href="https://twitter.com/brl_cad">
+       <img
+        alt="Twitter"
+        src="{{@root.uiRootPath}}/img/twitter.svg"
+        height="18"
+        width="18"
+      />
+    </a>
+    <a href="https://www.linkedin.com/in/brlcad">
+       <img
+        alt="LinkedIn"
+        src="{{@root.uiRootPath}}/img/linkedin.svg"
+        height="18"
+        width="18"
+      />
+    </a>
+    <a href="https://www.youtube.com/results?search_query=brl+-+cad">
+      <img
+        alt="Youtube"
+        src="{{@root.uiRootPath}}/img/youtube.svg"
+        height="18"
+        width="18"
+      />
+    </a>
+  </div>
+  <a
+    class="footer-practices"
+    href="https://bestpractices.coreinfrastructure.org/projects/66"
+  >
+    <img
+      alt="best practices"
+      src="https://bestpractices.coreinfrastructure.org/projects/66/badge"
+      height="20"
+      width="184"
+    />
+  </a>
+  <div class="footer-copyright">
+    <h2>BRL-CAD © 2021</h2>
+    <p>All trademarks referenced herein are the properties of their respective
+      owners. This site is not sponsored, endorsed, or run by the U.S.
+      Government.</p>
+  </div>
 </footer>
---}}

ui-supplemental/partials/header-content.hbs

@@ -20,7 +20,7 @@
     </div>
     <div id="topbar-nav" class="navbar-menu">
       <div class="navbar-end">
-        <!-- <a class="navbar-item" href="{{site.url}}">Home</a> -->
+        <a class="navbar-item" href="https://brlcad.org">Home</a>
         <a class="navbar-item" href="{{site.url}}/intro/">Introduction</a>
         <a class="navbar-item" href="https://brl-cad.github.io/gallery/" target="_blank">Gallery</a>
         <a class="navbar-item" href="https://brl-cad.github.io/wiki/" target="_blank">Wiki</a>
@@ -35,8 +35,7 @@
           </div>
         </div>
 
-{{!-- the header menu needs to be customized
-        <div class="navbar-item has-dropdown is-hoverable">
+        {{!-- <div class="navbar-item has-dropdown is-hoverable">
           <a class="navbar-link" href="#">Products</a>
           <div class="navbar-dropdown">
             <a class="navbar-item" href="#">Product A</a>
@@ -56,8 +55,7 @@
           <span class="control">
             <a class="button is-primary" href="#">Download</a>
           </span>
-        </div>
---}}
+        </div> --}}
       </div>
     </div>
   </nav>

ui-supplemental/partials/nav.hbs

@@ -1,4 +1,4 @@
-<div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
+<div class="nav-container" style="display: none;" {{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
   <aside class="nav">
     <div class="panels">
 {{> nav-menu}}
@@ -8,7 +8,7 @@
     But if we just remove nav-explore, the right menu (toc) disappears as well.
     So, we enclose it in another div, and make it invisible.
 --}}
-<div style="display: none;">
+<div>
 {{> nav-explore}}
 </div>
     </div>