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);
 }
 
 
@@ -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;
+}
+
+

content/sidebar.fr.po

@@ -7,8 +7,8 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: ilot.io\n"
-"POT-Creation-Date: 2024-09-08 12:28-0400\n"
+"POT-Creation-Date: 2024-09-10 18:05-0400\n"
-"PO-Revision-Date: 2024-09-08 12:32-0400\n"
+"PO-Revision-Date: 2024-09-10 20:18-0400\n"
 "Last-Translator: \n"
 "Language-Team: dev@ayakael.net\n"
 "Language: fr\n"

content/sidebar.html

@@ -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="navbar-nav nav-link align-items-center ms-auto">
 <li>[[Home|index]]</li>
 <li>[[Platforms]]</li>
 <li>[[Join]]</li>

content/sidebar.pot

@@ -7,7 +7,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
-"POT-Creation-Date: 2024-09-08 12:30-0400\n"
+"POT-Creation-Date: 2024-09-10 20:14-0400\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"

templates/page.tmpl

@@ -25,7 +25,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" />
@@ -40,30 +40,21 @@
   </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 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="language-menu-top" data-bs-toggle="dropdown" aria-expanded="false">
-"dropdown" aria-haspopup="true" aria-expanded="true">
+		   	<div class="collapse navbar-collapse float-end ms-1" id="navbar"> 
-            <TMPL_VAR LANG_NAME>
+             <TMPL_VAR LANG_NAME>
-			<img src="<TMPL_VAR BASEURL>wikiicons/languages.png">
+			 </div>
-			</button>
+			 <img src="<TMPL_VAR BASEURL>wikiicons/languages.png">
-			<ul class="dropdown-menu" aria-labelledby="language-menu-top">
+		   </button>
+		   <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start" aria-labelledby="language-menu-top">
               <TMPL_LOOP OTHERLANGUAGES>
               <li>
 			  <a href="<TMPL_VAR URL>"><TMPL_VAR LANGUAGE></a>
@@ -78,6 +69,13 @@
           </div>
           </TMPL_IF>
 
+		  <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbarScroll" aria-expanded="false" 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>
@@ -126,8 +124,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>