Merge #350 from saitheninja/update-deps

Related issue: #228

Things done in this pull request:
- Update Bootstrap from 5.0 beta to 5.3.3.
- Remove old normalize.css. Bootstrap already includes its own [reboot](https://getbootstrap.com/docs/5.3/content/reboot/).
- Remove jquery. It isn't a dependency of Bootstrap in v5. The bootstrap.bundle.js includes popper.js as a replacement.
- Update nix-shell, because the ruby version was too old to build.
- Update navbar to match previous styling. There's also some new CSS classes to target things better.
- Update fonts. Serif fonts weren't being used at all, and Inter wasn't being loaded in some places. Also Lato isn't being used at all anymore, so I removed the old files.
- Clean up some CSS.

TODO:
There's some scripts that need to get their references updated to the correct filenames:
- core: https://github.com/neovim/neovim/blob/40ce8577977fcdce8ad76863c70eb522e4cefd4d/scripts/gen_help_html.lua#L829
- docs: https://github.com/neovim/doc/blob/6f805e0d6085bd29ef881dcfe907638c943aac75/templates/report-header.sh.html#L11

Author: justinmk

_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>

_layouts/default.html

@@ -12,8 +12,8 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
     <link rel="preconnect" href="https://X185E15FPG-dsn.algolia.net" crossorigin />
 
-    <link href="/css/normalize.min.css" rel="stylesheet">
     <link href="/css/bootstrap.min.css" rel="stylesheet">
+
     <link href="/css/main.css" rel="stylesheet">
     <link href="/css/neovim-hi.css" rel="stylesheet">
     <link rel="canonical" href="{{ site.url }}{% if page.canonical_url %}{{ page.canonical_url }}{% else %}{{ page.url }}{% endif %}" />
@@ -24,7 +24,7 @@
 
     {% include footer.html %}
 
-    <script src="/js/bootstrap.min.js"></script>
+    <script src="/js/bootstrap.bundle.min.js"></script>
 
     <!-- algolia docsearch https://docsearch.algolia.com/docs/docsearch-v3/ -->
     <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

css/bootstrap.css

@@ -3,9 +3,6 @@
 :root {
   --main-breakpoint: 60em;
 
-  /* Serif fonts for body text. Easier to read for larger chunks */
-  --serif-fonts: "Inter", var(--bs-font-serif);
-  /* Sans-serif for smoother fonts. Useful for titles and shorter chunks */
   --sans-serif-fonts: "Inter", var(--bs-font-sans-serif);
 
   /* Colors */
@@ -14,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;
 }
 
@@ -26,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;
   }
 }
 
@@ -49,15 +43,12 @@
 
 @supports (font-variation-settings: normal) {
   :root {
-    --sans-serif-fonts: "Inter var", var(--sans-serif-fonts),
-      var(--bs-font-sans-serif);
-    --serif-fonts: "Inter var", var(--serif-fonts), var(--bs-font-serif);
+    --sans-serif-fonts: "Inter var", var(--bs-font-sans-serif);
   }
 }
 
 body {
-  /* font-family: "Helvetica Neue", Helvetica, Calibri, Arial, sans-serif; */
-  font-family: var(--serif-fonts);
+  font-family: var(--sans-serif-fonts);
   font-size: initial;
   line-height: 1.6;
   color: var(--fg-color);
@@ -72,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 */
@@ -100,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 {
@@ -235,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);
 }