falconry · vytas7 · Mar 14, 2026 · Mar 12, 2026 · Mar 12, 2026 · Mar 14, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,15 +7,14 @@
     "build": "webpack --config webpack-prod.config.js"
   },
   "dependencies": {
-    "bootstrap": "^4.6.0",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
-    "highlight.js": "^10.7.2",
-    "jquery": "^3.7.1",
-    "popper.js": "^1.16.1"
+    "highlight.js": "^11.11.1"
   },
   "devDependencies": {
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^13.0.1",
+    "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.4",
     "html-loader": "^5.1.0",
     "html-webpack-plugin": "^5.6.6",

diff --git a/src/dynamics.js b/src/dynamics.js
@@ -100,7 +100,7 @@ function insertBenchmarks() {
     innerHTML += '</tbody>'
 
     const table = document.getElementById(item.id);
-    table.className += ' table table-benchmarks table-striped table-responsive'
+    table.className += ' table table-benchmarks table-responsive'
     table.innerHTML = innerHTML
   });
 }

diff --git a/src/index.html b/src/index.html
@@ -18,18 +18,18 @@
     <meta name="theme-color" content="#080602">
   </head>
 
-  <body data-spy="scroll" data-target="#navbarPrimary" data-offset="60">
+  <body data-bs-spy="scroll" data-bs-target="#navbarPrimary" data-bs-offset="60">
 
     <nav class="navbar navbar-expand-sm navbar-dark fixed-top py-0">
       <a class="navbar-brand" href="#">
         <img src="img/logo.svg" width="32" height="32" alt="Falcon web API framework logo">
       </a>
 
       <button
-        class="navbar-toggler py-3"
+        class="navbar-toggler"
         type="button"
-        data-toggle="collapse"
-        data-target="#navbarPrimary"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarPrimary"
         aria-controls="navbarPrimary"
         aria-expanded="false"
         aria-label="Toggle navigation">
@@ -40,7 +40,7 @@
 
 
       <div class="collapse navbar-collapse" id="navbarPrimary">
-        <ul class="navbar-nav ml-auto mr-2">
+        <ul class="navbar-nav ms-auto me-2">
           <li class="nav-item">
             <a class="nav-link" href="#sectionAbout">About</a>
           </li>
@@ -257,7 +257,7 @@ <h1 class="display-4 section-title">Features</h1>
         <div class="row">
           <div class="col">
 
-            <ul class="pl-4 lead">
+            <ul class="ps-4 lead">
               <li>ASGI, WSGI, and WebSocket support</li>
               <li>Native asyncio support</li>
               <li>No reliance on magic globals for routing and state management</li>
@@ -376,12 +376,12 @@ <h3 class="pt-4">Extended Test</h3>
       <div class="container px-5">
         <h1 class="display-4 section-title">Community</h1>
 
+        <img class="bordered-block float-end ms-3 collapse-on-sm" src="img/pycon-2016-falcon-web-framework-sprint-1.jpg" width="160" height="120" alt="PyCon 2016 Sprints">
+
         <p class="lead">
           Falcon is an <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache-licensed</a> community project, built and supported by stylish volunteers from around the world.
         </p>
 
-        <img class="bordered-block float-right ml-3 collapse-on-sm" src="img/pycon-2016-falcon-web-framework-sprint-1.jpg" width="160" height="120" alt="PyCon 2016 Sprints">
-
         <p>
           Check out the <a href="https://github.com/falconry/falcon/wiki/Articles,-Talks-and-Podcasts" target="_blank">Falcon talks, podcasts, and blog posts wiki page</a> to learn
           more about the project, and to add your own resources.
@@ -420,10 +420,10 @@ <h1 class="display-4 section-title">Become a Patron</h1>
 
         <div class="container recurring-pledges-channels">
           <div class="row">
-            <div class="col-2 ml-0 pl-0 mt-2">
+            <div class="col-2 ms-0 ps-0 mt-2">
               <a href="https://opencollective.com/falcon" target="_blank"><img src="img/open-collective-logo.svg" style="width: 90%" alt="Open Collective Logo"></a>
             </div>
-            <div class="col d-flex align-items-center ml-0 pl-0">
+            <div class="col d-flex align-items-center ms-0 ps-0">
               <div>
                 Has Falcon helped you make an awesome app? Show your support by
                 <a href="https://opencollective.com/falcon" target="_blank">backing us on Open Collective</a>.

diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,9 @@
-import 'bootstrap';
+import 'bootstrap/dist/js/bootstrap.esm';
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import hljs from 'highlight.js/lib/core';
 import python from 'highlight.js/lib/languages/python';
 import bash from 'highlight.js/lib/languages/bash';
-import 'highlight.js/styles/railscasts.css';
+import 'highlight.js/styles/base16/gruvbox-dark-hard.css';
 import './theme/theme.scss';
 import './dynamics.js';
 

diff --git a/src/theme/_index.scss b/src/theme/_index.scss
@@ -0,0 +1,4 @@
+@forward "variables";
+@forward "tweaks";
+@forward "featured_list";
+@forward "fonts";
diff --git a/src/theme/_tweaks.scss b/src/theme/_tweaks.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 body {
   position: relative;
 }
@@ -10,6 +12,30 @@ body {
   color: $body-bg;
 }
 
+.navbar {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.mt-6 {
+  margin-top: 110px !important;
+}
+
+.display-1 {
+  font-size: 6rem;
+  font-weight: 300;
+  line-height: 1.2;
+  margin-bottom: 0.5rem;
+}
+
+.display-4 {
+  margin-bottom: 0.5rem;
+}
+
+.text-muted {
+  color: $gray-500 !important;
+}
+
 #documentFooter {
   margin: 4em 0;
   font-size: smaller;
@@ -18,11 +44,18 @@ body {
 .jumbotron {
   margin: 2em 0;
   padding-top: 5em;
-  color: $body-bg;
+  padding-bottom: 5em;
+  background-color: $gray-100;
+  color: $black;
+
+  .table {
+    background-color: white;
+    color: $black;
+  }
 }
 
 #mainTitle {
-  margin: 110px auto 80px auto;
+  margin: 160px auto 80px auto;
 }
 
 #sponsors {
@@ -39,6 +72,19 @@ body {
   padding: 0;
 }
 
+/* Add spacing after sections before quote blocks (section dividers) */
+.jumbotron {
+  margin-bottom: 6em !important;
+}
+
+/* Add spacing before quote blocks (section dividers) */
+.container > .blockquote {
+  margin-top: 4em !important;
+  max-width: 1000px;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
 .section-title {
   margin-left: -3px;
 }
@@ -51,18 +97,23 @@ nav {
   margin: 0.5em 0;
 }
 
-// .navbar-toggler-icon {
-//   // <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='#f0ad4e' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/></svg>
-//   background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMzIgMzInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggc3Ryb2tlPScjZjBhZDRlJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBkPSdNNCA4aDI0TTQgMTZoMjRNNCAyNGgyNCcvPjwvc3ZnPg==");
-// }
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMzIgMzInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggc3Ryb2tlPScjZjBhZDRlJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBkPSdNNCA4aDI0TTQgMTZoMjRNNCAyNGgyNCcvPjwvc3ZnPg==");
+}
 
-// .navbar-toggler-icon:hover, .navbar-toggler-icon:active {
-//   // <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='#f7e9b7' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/></svg>
-//   background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMzIgMzInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggc3Ryb2tlPScjZjdlOWI3JyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBkPSdNNCA4aDI0TTQgMTZoMjRNNCAyNGgyNCcvPjwvc3ZnPg==");
-// }
+.navbar-toggler-icon:hover, .navbar-toggler-icon:active {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMzIgMzInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggc3Ryb2tlPScjZjdlOWI3JyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBkPSdNNCA4aDI0TTQgMTZoMjRNNCAyNGgyNCcvPjwvc3ZnPg==");
+}
+
+.navbar-toggler {
+  padding: 0;
+  border: none;
+  border-radius: 0;
+}
 
 .navbar-toggler:focus {
   outline: none;
+  box-shadow: none;
 }
 
 #falconVersionLink:before {
@@ -75,6 +126,25 @@ nav {
   box-shadow: 2px 2px 4px 0 #000;
 }
 
+.table-benchmarks,
+.jumbotron .table {
+  background-color: white !important;
+
+  tbody,
+  thead,
+  tr:first-child,
+  tr:first-child th,
+  tr:first-child td {
+    border: none;
+  }
+
+  th,
+  td {
+    background-color: white !important;
+    border-bottom: none;
+  }
+}
+
 .table-benchmarks th:nth-child(n+2) {
   text-align: right;
 }
@@ -84,13 +154,11 @@ nav {
 }
 
 .table-benchmarks tbody tr:first-child {
-  background-color: $primary-light;
-
-}
+  background-color: $primary-light !important;
 
-.table-benchmarks {
-  tbody, thead, tr:first-child, tr:first-child th, tr:first-child td {
-    border: none;
+  th,
+  td {
+    background-color: $primary-light !important;
   }
 }
 
@@ -102,7 +170,7 @@ nav {
 
 .jumbotron {
   a {
-    color: darken($primary, 20%);
+    color: color.scale($primary, $lightness: -20%);
   }
 
   a:hover, a:active {
@@ -128,6 +196,11 @@ pre {
   margin: 1em auto;
   padding: 0 42px;
   max-width: $content-max-width;
+  background-color: #1d2021;
+}
+
+.hljs {
+  background: #1d2021 !important;
 }
 
 // Avoid pushing the right margin and uncentering the body on narrow screens

diff --git a/src/theme/_variables.scss b/src/theme/_variables.scss
@@ -39,18 +39,17 @@ $font-family-sans-serif: Oxygen, -apple-system, BlinkMacSystemFont, "Segoe UI",
 // Jumbotron
 // ------------------------------------------------------
 
-$jumbotron-bg:                   $gray-100;
+$jumbotron-bg:                   #f8f9fa;
 
 
 // ------------------------------------------------------
 // Navbar
 // ------------------------------------------------------
 
 $navbar-dark-color:                $primary;
-$navbar-dark-hover-color:          darken($primary, 15%);
+$navbar-dark-hover-color:          rgba($gray-700, 1);
 $navbar-dark-active-color:         $primary;
-$navbar-dark-disabled-color:       $gray-300;
-$navbar-dark-toggler-border-color: none;
+$navbar-dark-disabled-color:       rgba($gray-300, 1);
 
 // <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='#f0ad4e' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/></svg>
 $navbar-dark-toggler-icon-bg:      url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMzIgMzInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggc3Ryb2tlPScjZjBhZDRlJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBkPSdNNCA4aDI0TTQgMTZoMjRNNCAyNGgyNCcvPjwvc3ZnPg==");