*: update to Bootstrap 5

basewiki/bootstrap.local.css

@@ -1,36 +1,11 @@
 /* Color palette */
 
 :root {
-  /* Purple */
+  --bs-light-rgb: 248, 248, 248;
-  --dark-purple: #3a2354;
+}
-  --medium-purple: #56347c; /* logo */
-  --light-purple: #9f73d2;
-  --background-purple: #f3edf9;
 
-  /* Green */
+a {
-  --darker-green: #014d00;
+  --bs-link-color: #337ab7;
-  --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);
 }
 
 
@@ -93,33 +68,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;
@@ -127,6 +75,10 @@ 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 {
@@ -134,15 +86,10 @@ code {
 }
 
 /* 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;
-}
-
 /* 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
@@ -209,12 +156,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 {
@@ -442,6 +389,7 @@ header h1::before {
 
 
 .language-switcher {
+  font-size: 14px;
   background: #f8f8f8;
   color: #333;
   border-color: #ccc;
@@ -449,15 +397,59 @@ header h1::before {
 
 .language-switcher:hover {
   background: #e6e6e6;
+}
+
+/* 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;
 }
 
-.language-switcher-top {
+.dropdown-menu li a:hover {
-  display: block;
+  background: #e6e6e6;
-  padding-top: 9px;
-  width: 120px; /* Force size to prevent overflowing breadcrumbs */
-  height: 35px;
-  z-index: 5;
 }
 
+/* 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;
+}
+
+

content/footer.html

@@ -0,0 +1,10 @@
+<p class="text-muted">
+<div class="container-fluid">
+	<span class="me-auto copyright">
+		Copyleft © 2024-2024 ayakael [[CC-BY-SA|meta/license]]
+	</span>
+	<span class="ms-auto powered-by">
+		Powered by [[ikiwiki|http://ikiwiki.info/]].
+    </span>
+</div>
+</p>

content/footer.mdwn

@@ -1,9 +0,0 @@
-<p class="text-muted">
-	<span class="copyright">
-		Copyleft © 2024-2024 ayakael [[CC-BY-SA|meta/license]]
-	</span>
-	<span class="pull-right powered-by">
-		Powered by [[ikiwiki|http://ikiwiki.info/]].
-		[[Theme|https://gitlab.com/anarcat/ikiwiki-bootstrap-anarcat]] by [[anarcat|https://anarc.at/blog/2015-09-09-bootstrap]].
-	</span>
-</p>

content/sidebar.mdwn

@@ -1,5 +1,5 @@
 <!-- the anchors force ikiwiki to use a tags instead of spans. hopefully. -->
-<ul class="nav navbar-nav navbar-right">
+<ul class="nav navbar-nav nav-link align-items-center ms-auto">
 <li>[[Home|index]]</li>
 <li>[[Forge|https://ayakael.net/forge/]]</li>
 <li>[[Contact]]</li>

templates/page.tmpl

@@ -30,7 +30,7 @@
 
     <!-- Bootstrap core CSS -->
     <!-- those checksums can be verified with: shasum -b -a 384 $file | xxd -r -p | base64 -->
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 
     <!-- Custom styles for this template -->
     <link href="<TMPL_VAR BASEURL>bootstrap.local.css" rel="stylesheet" />
@@ -62,30 +62,23 @@
   </head>
   <body>
 
-    <nav class="navbar navbar-default navbar-fixed-top">
+   <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light border">
-      <div class="container">
+      <div class="container-fluid">
-        <div class="navbar-header">
+	      <a class="navbar-brand me-auto" href="<TMPL_VAR BASEURL>">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="<TMPL_VAR BASEURL>">
             <img alt="<TMPL_VAR WIKINAME>" src="<TMPL_VAR BASEURL>favicon.png" width="48" height="48" />
           </a>
-        </div>
-
-        <div id="navbar" class="collapse navbar-collapse">
 
           <TMPL_IF OTHERLANGUAGES>
-		  <div class="dropdown language-switcher-top navbar-left">
+		   <div class="dropdown ps-2 pe-2">
-		   <button class="btn language-switcher dropdown-toggle" type="button" id="language-menu-top" data-toggle=
+		   <button class="btn language-switcher dropdown" type="button" id="l
-"dropdown" aria-haspopup="true" aria-expanded="true">
+anguage-menu-top" data-bs-toggle="dropdown" aria-expanded="false">
-            <TMPL_VAR LANG_NAME>
+		   	<div class="collapse navbar-collapse float-end ms-1" id="navb
-			<img src="<TMPL_VAR BASEURL>wikiicons/languages.png">
+ar"> 
-			</button>
+             <TMPL_VAR LANG_NAME>
-			<ul class="dropdown-menu" aria-labelledby="language-menu-top">
+			 </div>
+			 <img src="<TMPL_VAR BASEURL>wikiicons/languages.png">
+		   </button>
+		   <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
               <TMPL_LOOP OTHERLANGUAGES>
               <li>
 			  <a href="<TMPL_VAR URL>"><TMPL_VAR LANGUAGE></a>
@@ -95,6 +88,16 @@
           </div>
           </TMPL_IF>
 
+		   <button class="navbar-toggler collapsed" type="button" data-bs-togg
+le="collapse" data-bs-target="#navbar" aria-controls="navbarScroll" aria-expanded="fa
+lse" aria-label="Toggle navigation">
+		    <span class="navbar-toggler-icon"></span>
+          </button>
+
+
+
+        <div id="navbar" class="collapse navbar-collapse">
+
             <TMPL_IF SIDEBAR>
             <TMPL_VAR SIDEBAR>
             </TMPL_IF>
@@ -220,19 +223,15 @@
             </span>
             </div>
 
-            <TMPL_IF HTML5><nav class="navbar navbar-default">
+            <nav class="navbar navbar-expand-lg navbar-light bg-light border">
-                <TMPL_ELSE>
+            <div class="navbar-brand">
-                  <div class="navbar navbar-default">
+			<img src="<TMPL_VAR BASEURL>wikiicons/languages.png">
-            </TMPL_IF>
+			</div>
-            <div class="navbar-brand"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></div>
             <div class="container-fluid">
 
-            <div class="navbar-header">
+            <div class="navbar navbar-expand-lg navbar-light border">
-              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-footer" aria-expanded="false">
+			  <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-footer" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="sr-only">Toggle navigation</span>
+			  <span class="navbar-toggler-icon"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
               </button>
             </div>
 
@@ -241,7 +240,7 @@
               <TMPL_VAR SEARCHFORM>
             </TMPL_IF>
 
-            <ul class="nav navbar-nav navbar-right">
+            <ul class="nav navbar-nav nav-link">
             <TMPL_IF TAGS>
               <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tags <span class="caret"></span></a>
@@ -327,8 +326,8 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"></script>
+	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
 
 	<!-- TODO: Find other ways to setup analytics
     <script data-goatcounter="https://analytics.anarc.at/count" async src="//analytics.anarc.at/count.js"></script>