feat: adjust styling to match stackable website (#42)

Author: xeniape

js/nav.js

@@ -3,8 +3,7 @@
     "build:doc": "esbuild js/doc.js --bundle  --minify --sourcemap --format=esm --outfile=static/js/doc.js",
     "build:home": "esbuild js/home.js --bundle  --minify --sourcemap --outfile=static/js/home.js",
     "build:org": "esbuild js/org.js --bundle  --minify --sourcemap --outfile=static/js/org.js",
-    "build:nav": "esbuild js/nav.js --bundle  --minify --sourcemap --outfile=static/js/nav.js",
-    "build": "pnpm build:nav && pnpm build:home && pnpm build:org && pnpm build:doc"
+    "build": "pnpm build:home && pnpm build:org && pnpm build:doc"
   },
   "devDependencies": {
     "esbuild": "^0.23.1",

package.json

@@ -45,8 +45,8 @@ code {
 }
 
 .nav-link:hover {
-    color: var(--navbar-font-color);
-    text-decoration: underline;
+    color: var(--navbar-font-color-hover);
+    text-decoration: none;
 }
 
 .nav-item.active>.nav-link,
@@ -86,14 +86,26 @@ code {
   visibility: hidden;
 }
 
-#operator-menu.active {
+#operator-menu-button:hover + #operator-menu,
+#operator-menu:hover {
   visibility: visible;
 }
 
 .dropdown-menu {
-  top: 60px;
+  top: var(--navbar-height);
   border-radius: 0;
   border: none;
+  padding: 0px;
+}
+
+.dropdown-item {
+  color: var(--navbar-font-color);
+  background-color: var(--navbar-background);
+}
+.dropdown-item:hover {
+  text-decoration: none;
+  color: var(--navbar-font-color-hover);
+  background-color: var(--navbar-background-hover);
 }
 
 /* copy tooltip */

static/css/root.css

@@ -23,7 +23,9 @@
     --header-font-family-weight: 600; /* semi-bold */
     /* navbar */
     --navbar-background: var(--color-white);
+    --navbar-background-hover: var(--color-background2);
     --navbar-font-color: var(--color-text);
+    --navbar-font-color-hover: var(--color-brand-primary);
     /* footer */
     --footer-background: var(--color-white);
     --footer-font-color: var(--color-text);

static/css/vars.css

@@ -8,10 +8,7 @@
         <a href="/" class="nav-link">CRD Documentation</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" id="operator-menu-button"  onclick="toggleMenu()">
-          Operators
-          <i class="fa fa-angle-down ml-5" aria-hidden="true"></i> <!-- ml-5= margin-left: 0.5rem (5px) -->
-        </a>
+        <a class="nav-link" id="operator-menu-button">Operators</a>
         <div class="dropdown-menu dropdown-menu-right" id="operator-menu" aria-labelledby="operator-menu-button">
           <a class="dropdown-item" href="/airflow-operator">Airflow Operator</a>
           <a class="dropdown-item" href="/druid-operator">Druid Operator</a>
@@ -32,5 +29,4 @@
       </li>
     </ul>
   </div>
-</nav>
-<script src="/static/js/nav.js"></script>
+</nav>