⬆️ Upgrade CSS and classes to support Bootstrap 5

_assets/css/responsive_sizes.scss

@@ -1,14 +1,18 @@
+@use "sass:map";
+
 @each $prop, $abbrev in (width: w, height: h) {
   @each $bpname,$bpsize in $grid-breakpoints {
-    @media (min-width: $bpsize) {
-      @each $size, $length in $sizes {
-        .#{$abbrev}-#{$bpname}-#{$size} {
-          #{$prop}: $length;
-        }
-        .m#{$abbrev}-#{$bpname}-#{$size} {
-            max-#{$prop}: $length;
-        }
+      @media (min-width: $bpsize) {
+          $props: map-get($utilities, $prop);
+          $propValues: map-get($props, 'values');
+          @each $size, $length in $propValues {
+              .#{$abbrev}-#{$bpname}-#{$size} {
+                  #{$prop}: $length;
+              }
+              .m#{$abbrev}-#{$bpname}-#{$size} {
+                  max-#{$prop}: $length;
+              }
+          }
       }
-    }
   }
 }

_assets/css/style.scss

@@ -1,3 +1,5 @@
+$navbar-padding-x: 1rem;
+
 @import 'bootstrap';
 @import 'font-awesome-sprockets';
 @import 'font-awesome';
@@ -17,7 +19,7 @@
 
 .bd-sideboard {
   aside {
-    padding: $table-cell-padding-sm;
+    padding: $table-cell-padding-x-sm;
   }
 
   header {

_layouts/default.html

@@ -59,7 +59,7 @@
 		  {% endif %}
 		</div>
 
-		<main class="bg-white rounded-large order-1 order-md-2 col-12 col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content" role="main">
+		<main class="bg-white rounded-large order-1 order-md-2 col-12 col-md-9 col-xl-10 py-md-3 ps-md-5 bd-content" role="main">
 		  <section class="entry-content container-fluid">
 			{% if page.title %}
 			<header class="entry-header">

index.html

@@ -8,7 +8,7 @@ title: Introduction
 <section id="webdeveloper">
 <h2>Dan Jones, the Web Developer</h2>
 
-<figure class="figure float-md-right mw-xs-100 mw-md-50">
+<figure class="figure float-md-end mw-xs-100 mw-md-50">
   <img src="https://res.cloudinary.com/danjones000/image/upload/v1518462377/danielrayjones/C64c_system.jpg"
 	   class="figure-im img-fluid" alt="Commodore 64" />
   <figcaption class="figure-caption">