*: update to Bootstrap 5

bootstrap.local.css

@@ -1,36 +1,11 @@
 /* Color palette */
 
 :root {
-  /* Purple */
-  --dark-purple: #3a2354;
-  --medium-purple: #56347c; /* logo */
-  --light-purple: #9f73d2;
-  --background-purple: #f3edf9;
+  --bs-light-rgb: 248, 248, 248;
+}
 
-  /* Green */
-  --darker-green: #014d00;
-  --dark-green: #3b833a;
-  --medium-dark-green: #53b351;
-  --medium-light-green: #73d171; /* buttons */
-  --background-green: #a8ffa0;
-
-  /* Gray */
-  --dark-gray: #393a35;
-  --medium-dark-gray: #58595b;
-  --medium-light-gray: #b5b7b9;
-  --light-gray: #dadbdc;
-  --background-gray: #f0f1f2;
-
-  /* Misc */
-  --yellow: #ffd500;
-  --light-yellow: #ffec8c;
-  --background-yellow: #fffff0;
-  --red: #ef1f31;
-
-  /* Shadows */
-  --banner-button-shadow: 1px 1px 1px black, 2px 2px 5px var(--dark-gray), inset 1px 1px 1px var(--background-green);
-  --green-button-shadow:  1px 1px 1px var(--medium-dark-gray), 2px 2px 5px var(--light-gray), inset 1px 1px 1px var(--background-green);
-  --gray-button-shadow:  1px 1px 1px black, 2px 2px 5px var(--dark-gray), inset 1px 1px 1px var(--background-gray);
+a {
+  --bs-link-color: #337ab7;
 }
 
 
@@ -91,33 +66,6 @@ code {
   font-size: 80%;
 }
 
-/* comments fixup */
-.comment {
-    border: none;
-    padding: 1em;
-    margin: 1em;
-    background: #f3f3f3;
-}
-.mastodon-comment {
-    display: flex;
-}
-/* mastodon posts have a span to hide the scheme and post id, use it */
-.mastodon-comment-content span.invisible {
-    display: none;
-}
-.mastodon-comment .avatar img {
-    margin-right: 1rem;
-}
-.mastodon-comment span.disabled {
-    display: none;
-}
-.mastodon-comment .author  {
-    display: flex;
-    justify-content: space-between;
-}
-.mastodon-comment .author time {
-    font-size: small;
-}
 .actions ul {
     margin: inherit;
     padding: inherit;
@@ -125,30 +73,22 @@ code {
     /* list-style-type: none; */
 }
 
+a {
+	text-decoration: none;
+}
+
 /* limit main content to ~90 chars per line */
 /* update: practical typography recommends 2-3 alphabets */
 #content {
   max-width: 35em;              /* this is 2.5 alphabets with Charter */
+  margin-top: 15px
 }
 
 /* limit header as well otherwise logo is out of whack without sidebar */
-.navbar-fixed-top .container {
+.fixed-top .container-fluid {
   max-width: 55em;
 }
 
-.navbar .selflink {
-	display: block;
-	padding: 15px 15px;
-}
-
-.navbar .in {
-	padding-top: 9px;
-}
-
-.navbar .collapsing {
-	padding-top: 9px;
-}
-
 /* some hacking at typefaces to get some fresh zest in here
  * fallbacks from:
  * https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
@@ -215,12 +155,12 @@ blockquote {
 /* enlarge body point size for charter for larger displays */
 @media (min-device-width: 750px) {
     body {
-        font-size: 20px;
+        font-size: 18px;
         line-height: 1.3; /* default in FF is ~1.48, try seems a bit to sparse */
     }
     /* to match the other bootstrap workaround, below */
     blockquote {
-        font-size: 20px;
+        font-size: 18px;
     }
     /* UI elements should be a little less intrusive */
     .navbar, .footer {
@@ -447,35 +387,27 @@ header h1::before {
 /* Language switchers */
 
 .language-switcher {
-  display: block;
+  font-size: 14px;
   background: #f8f8f8;
   color: #333;
   border-color: #ccc;
-  margin-bottom: -4px;
-  margin-left: -3px;
-  margin-top: 9px;
 }
 
 .language-switcher:hover {
   background: #e6e6e6;
-  color: #333;
-  border-color: #ccc;
 }
 
 /* Sign-in buttons */
 
 .sign-in {
+  font-size: 14px;
   background: #f8f8f8;
   color: #333;
   border-color: #ccc;
-  margin-top: 9px;
-  margin-left: 12px;
 }
 
 .sign-in:hover {
   background: #e6e6e6;
-  color: #333;
-  border-color: #ccc;
 }
 
 /* Footer */
@@ -541,3 +473,57 @@ header h1::before {
   border-color: #ccc;
 }
 
+/* NavBar */
+
+/* Navbar variables */
+.navbar {
+  --bs-navbar-padding-y: 0;
+  --bs-navbar-padding-x: 0;
+}
+
+.nav-link {
+  --bs-nav-link-padding-y: 5px;
+  --bs-nav-link-padding-x: 15px;
+}
+
+.dropdown-menu li a {
+  font-size: 14px;
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: 400;
+  line-height: 1.42857143;
+  color: #333;
+  border-color: #ccc;
+  white-space: nowrap;
+}
+
+.dropdown-menu li a:hover {
+  background: #e6e6e6;
+}
+
+/* Usually is set automatically by bootstrap, but do it manually to let ikiwiki handle links */
+.nav-link li a, .nav-link .selflink {
+    display: block;
+	padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
+    font-size: var(--bs-nav-link-font-size);
+    font-weight: var(--bs-nav-link-font-weight);
+    color: var(--bs-nav-link-color);
+    text-decoration: none;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
+}
+
+.nav-link .selflink {
+	color: #393a35;
+}
+
+.nav-link li a:hover, .nav-link .selflink:hover {
+	color: #393a35;
+}
+
+.navbar-brand {
+	height: 50px;
+	padding: 15px 0;
+}
+
+