[WIP] Upgrade bootstrap to v5

Author: Fryguy

Gemfile

@@ -3,7 +3,7 @@ source 'https://rubygems.org'
 ruby "~> 3.3.6"
 
 gem "activesupport", ">= 5.2.7", :require => false
-gem "bootstrap-sass", "~> 3.x"
+gem "bootstrap", "~> 5.3"
 gem "font-awesome-sass", "~> 6.5"
 gem "jekyll", "~> 4.3"
 gem "jekyll-paginate"

site/_plugins/sass_loader.rb

@@ -1,5 +1,5 @@
 require "jekyll/converters/scss"
-require "bootstrap-sass"
+require "bootstrap"
 require "font-awesome-sass"
 
 # sass/load_paths configuration in _config.yml only supports hardcoded paths,

site/_sass/_banner.scss

@@ -46,7 +46,7 @@ $banner_height_lg: 440px;
 .banner-content {
   // width: 60em;
   max-width: 100%;
-  @include container-fixed(0);
+  @extend .container-fluid !optional;
 
   z-index: 5;
 }

site/_sass/_colors.scss

@@ -28,7 +28,7 @@ $menu-link-color: lighten($grey-dark, 55%);
 
 @mixin banner_grad {
   // from Bootstrap
-  @include gradient-horizontal($banner-grad-dark, $banner-grad-lite, 0, 100%);
+  @include gradient-x($banner-grad-dark, $banner-grad-lite, 0, 100%);
 }
 
 // FIXME: Can ditch bootstrap mixin and simplify,

site/_sass/_page.scss

@@ -13,7 +13,7 @@ main {
 
 .home_container {
   max-width: 867px;
-  @include container-fixed(0);
+  @extend .container-fluid !optional;
 }
 
 .flex_container {

site/_sass/_solutions.scss

@@ -3,7 +3,7 @@ $solution_pad: 4em;
 .solutions {}
 
 .solution-container {
-  @include container-fixed(0);
+  @extend .container-fluid !optional;
   display: flex;
   max-width: 100%;
   justify-content: space-between;

site/_sass/_triad.scss

@@ -1,7 +1,7 @@
 
 .triad {
   max-width: 90%;
-  @include container-fixed(0);
+  @extend .container-fluid !optional;
 }
 
 .triad-heading {
@@ -64,7 +64,7 @@
   }
 
   .triad-col {
-    @include make-md-column(4, $triad-gutter);
+    @include make-col(4, $triad-gutter);
 
     border-right: 1px solid var(--color-border-primary);
 

site/_sass/_twbs_custom.scss

@@ -1,12 +1,13 @@
-
+@import "bootstrap/functions";
 @import "bootstrap/variables";
+@import "bootstrap/maps";
 @import "bootstrap/mixins";
-@import "bootstrap/normalize";
-@import "bootstrap/print";
+// @import "bootstrap/normalize";
+// @import "bootstrap/print";
 // @import "bootstrap/glyphicons";
-@import "bootstrap/scaffolding";
-@import "bootstrap/type";
-@import "bootstrap/code";
+// @import "bootstrap/scaffolding";
+// @import "bootstrap/type";
+// @import "bootstrap/code";
 @import "bootstrap/grid";
 @import "bootstrap/tables";
 // @import "bootstrap/forms";
@@ -17,9 +18,9 @@
 // @import "bootstrap/input-groups";
 // @import "bootstrap/navs";
 // @import "bootstrap/navbar";
-@import "bootstrap/breadcrumbs";
+// @import "bootstrap/breadcrumbs";
 @import "bootstrap/pagination";
-@import "bootstrap/pager";
+// @import "bootstrap/pager";
 // @import "bootstrap/labels";
 // @import "bootstrap/badges";
 // @import "bootstrap/jumbotron";
@@ -29,12 +30,12 @@
 // @import "bootstrap/media";
 // @import "bootstrap/list-group";
 // @import "bootstrap/panels";
-@import "bootstrap/responsive-embed";
+// @import "bootstrap/responsive-embed";
 // @import "bootstrap/wells";
 // @import "bootstrap/close";
 // @import "bootstrap/modals";
 // @import "bootstrap/tooltip";
 // @import "bootstrap/popovers";
 // @import "bootstrap/carousel";
 @import "bootstrap/utilities";
-@import "bootstrap/responsive-utilities";
+// @import "bootstrap/responsive-utilities";

site/assets/css/main.scss

@@ -3,27 +3,12 @@
 
 @charset "utf-8";
 
-$font-size-base: 16px;
 $fa-font-path: "../fonts/font-awesome";
 
 @import "font-awesome";
 @import "twbs_custom";
 @import "twbs_overrides";
 
-// Undo Bootstrap pixel font-size
-// http://fvsch.com/code/css-locks/#toc-2d
-
-/*
- * Redefine the rem value while keeping it proportional.
- * Useful values, with default font-size of 16px:
- * • 62.5% -> 1rem = 10px, .1rem  = 1px
- * • 125%  -> 1rem = 20px, .05rem = 1px
- */
-html {
-  font-size: 62.5%;
-  overflow-x: hidden; // deals with off-canvas issue
-}
-
 // Breakpoints, mobile first
 
 $bp-desk0: 768px;