fix: match previous navbar styling.

Problem:
New Bootstrap update broke navbar styling.

Solution:
Update navbar to match previous styling.
Clean up a bit.

Author: saitheninja

_includes/nav.html

@@ -6,50 +6,51 @@
       </a>
 
       <button
+        class="navbar-toggler"
         type="button"
         data-bs-toggle="collapse"
-        data-bs-target="#neovim-navbar"
-        class="navbar-toggler"
+        data-bs-target="#navbarNav"
         aria-expanded="false"
         aria-label="Main menu"
       >
-        <span class="navbar-toggler-icon">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="feather feather-menu"
-          >
-            <line x1="3" y1="12" x2="21" y2="12"></line>
-            <line x1="3" y1="6" x2="21" y2="6"></line>
-            <line x1="3" y1="18" x2="21" y2="18"></line>
-          </svg>
-        </span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="3" y1="12" x2="21" y2="12"></line>
+          <line x1="3" y1="6" x2="21" y2="6"></line>
+          <line x1="3" y1="18" x2="21" y2="18"></line>
+        </svg>
       </button>
+
       <div
         class="collapse navbar-collapse justify-content-end"
-        id="neovim-navbar"
+        id="navbarNav"
       >
         <ul class="navbar-nav">
-          {% for nav in site.data.nav %} {% assign active = include.active %} {%
-          assign has_sections = nav.sections != null %} {% if has_sections %}
+          {% for nav in site.data.nav %}
+          {% assign active = include.active %}
+          {% assign has_sections = nav.sections != null %}
+          {% if has_sections %}
+
           <li class="nav-item dropdown">
             <a
-              href="#"
               class="nav-link dropdown-toggle"
+              href="#"
+              role="button"
               data-bs-toggle="dropdown"
               aria-expanded="false"
-              id="neovim-dropdown"
-              role="button"
+              id="neovimDropdown"
               >{{ nav.title }}</a
             >
-            <ul class="dropdown-menu" aria-labelledby="neovim-dropdown">
+            <ul class="dropdown-menu" aria-labelledby="neovimDropdown">
               {% for section in nav.sections %}
 
               <li>

css/main.css

@@ -11,9 +11,9 @@
   --fg-color: #29332f;
   --inverse-fg-color: #a9d5c4; /* Dark-mode fg color. */
   --bg-color: #e7eee8;
+  --accent-bg-color: #d3e4db;
   --link-color: #195174;
   --accent-color: #000;
-  --accent-bg-color: #d3e4db;
   --border-color: #658fac;
 }
 
@@ -23,12 +23,9 @@
     --inverse-fg-color: #29332f; /* Light-mode fg color. */
     --bg-color: #0f191f;
     --accent-bg-color: #0b151b;
-    --border-color: #1174b1;
-    --link-color: #78d55b;
-    --accent-color: #61ff00;
-
     --link-color: #5fb950;
     --accent-color: #61ff00;
+    --border-color: #1174b1;
   }
 }
 
@@ -66,9 +63,8 @@ body {
 
 a {
   color: var(--link-color);
-  transition: all ease-in-out 140ms;
-  /* text-decoration: underline var(--link-color); */
   text-decoration: underline var(--border-color);
+  transition: all ease-in-out 140ms;
 }
 
 /* Ensure that the hover border is sized correctly for <a><img…></a>. #295 */
@@ -94,9 +90,9 @@ h3,
 h4,
 h5 {
   font-family: var(--sans-serif-fonts);
+  font-weight: bold;
   line-height: 1.6;
   margin: 0.66em 0;
-  font-weight: bold;
 }
 
 h1 {
@@ -229,52 +225,50 @@ samp {
  * Logo and navigation at the top of the page
  */
 
-.nav {
-  background-color: var(--accent-bg-color);
-  border-color: var(--link-color);
+.nav-link {
+  color: var(--link-color);
 }
-
-.nav > li > a:focus,
-.nav > li > a:hover {
-  background-color: var(--bg-color);
+.nav-link:hover,
+.nav-link:focus,
+.nav-link:active {
+  color: var(--accent-color);
 }
 
-.nav .open > a:focus,
-.nav .open > a:hover {
-  background-color: var(--accent-bg-color);
+.navbar-toggler {
+  border-width: 0;
+  color: var(--fg-color);
 }
 
-#navbar-logo {
-  height: 2.5em;
+/**
+ * Logo
+ */
+.navbar-brand {
+  color: var(--link-color);
+}
+.navbar-brand:hover,
+.navbar-brand:focus,
+.navbar-brand:active {
+  color: var(--accent-color);
 }
-
-/* .navbar-top-align { */
-/*   margin-top: 1em; */
-/* } */
-
-/* .navbar-brand { */
-/* float: none; */
-/* height: auto; */
-/* padding: 0; */
-/* font-size: inherit; */
-/* line-height: inherit; */
-/* } */
 
 /**
  * Menu dropdown
  */
 
+#neovimDropdown.show {
+  color: var(--accent-color);
+}
+
 .dropdown-menu {
   background-color: var(--accent-bg-color);
 }
 
-.dropdown-menu > li > a {
+.dropdown-item {
   color: var(--link-color);
 }
-
-.dropdown-menu > li > a:focus,
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:active {
+.dropdown-item:focus,
+.dropdown-item:hover,
+.dropdown-item:active {
   color: var(--bg-color);
   background-color: var(--link-color);
 }