*: update to Bootstrap 5

templates/*: Drop HTML5 conditions
2024-09-10 21:07:45 -04:00 · 2024-09-10 20:30:00 -04:00
9 changed files with 13307 additions and 145 deletions
--- a/basewiki/bootstrap.local.css
+++ b/basewiki/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;
 }


@ -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 {
-  display: block;
-  padding-top: 9px;
-  width: 120px; /* Force size to prevent overflowing breadcrumbs */
-  height: 35px;
-  z-index: 5;
+.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;
+}
+
+
--- a/basewiki/bootstrap.min.css
+++ b/basewiki/bootstrap.min.css
--- a/basewiki/bootstrap.min.js
+++ b/basewiki/bootstrap.min.js
--- a/basewiki/jquery.min.js
+++ b/basewiki/jquery.min.js
--- a/content/footer.html
+++ b/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>
--- a/content/footer.mdwn
+++ b/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>
--- a/content/sidebar.mdwn
+++ b/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>
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@ -30,17 +30,11 @@

    <!-- 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" />

-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-    <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
-
    <!-- Custom styles for derivatives -->
    <TMPL_IF LOCAL_CSS>
    <link rel="stylesheet" href="<TMPL_VAR BASEURL><TMPL_VAR LOCAL_CSS>" type="text/css" />
@ -68,30 +62,23 @@
  </head>
  <body>

-    <nav class="navbar navbar-default navbar-fixed-top">
-      <div class="container">
-        <div class="navbar-header">
-          <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>">
+   <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light border">
+      <div class="container-fluid">
+	      <a class="navbar-brand me-auto" 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">
-		   <button class="btn language-switcher dropdown-toggle" type="button" id="language-menu-top" data-toggle=
-"dropdown" aria-haspopup="true" aria-expanded="true">
-            <TMPL_VAR LANG_NAME>
-			<img src="<TMPL_VAR BASEURL>wikiicons/languages.png">
-			</button>
-			<ul class="dropdown-menu" aria-labelledby="language-menu-top">
+		   <div class="dropdown ps-2 pe-2">
+		   <button class="btn language-switcher dropdown" type="button" id="l
+anguage-menu-top" data-bs-toggle="dropdown" aria-expanded="false">
+		   	<div class="collapse navbar-collapse float-end ms-1" id="navb
+ar"> 
+             <TMPL_VAR LANG_NAME>
+			 </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>
@ -101,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>
@ -124,9 +121,9 @@
            <TMPL_VAR CONTENT>

            <TMPL_IF ENCLOSURE>
-            <TMPL_IF HTML5><section id="enclosure"><TMPL_ELSE><div id="enclosure"></TMPL_IF>
+            <section id="enclosure">
            <a href="<TMPL_VAR ENCLOSURE>">Download</a>
-            <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
+            </section>
            </TMPL_IF>

            <TMPL_IF TRAILS>
@ -136,7 +133,7 @@
            <TMPL_UNLESS DYNAMIC>
            <!-- legacy Ikiwiki comments.pm section -->
            <TMPL_IF COMMENTS>
-            <TMPL_IF HTML5><section id="comments"><TMPL_ELSE><div id="comments"></TMPL_IF>
+            <section id="comments">
            <TMPL_VAR COMMENTS>
            <TMPL_IF ADDCOMMENTURL>
            <div class="addcomment">
@ -147,7 +144,7 @@
            <div class="addcomment">Comments on this page are closed.</div>
            </TMPL_UNLESS>
            </TMPL_IF>
-            <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
+            </section>
            </TMPL_IF>

            <!-- Mastodon comments -->
@ -226,19 +223,15 @@
            </span>
            </div>

-            <TMPL_IF HTML5><nav class="navbar navbar-default">
-                <TMPL_ELSE>
-                  <div class="navbar navbar-default">
-            </TMPL_IF>
-            <div class="navbar-brand"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></div>
+            <nav class="navbar navbar-expand-lg navbar-light bg-light border">
+            <div class="navbar-brand">
+			<img src="<TMPL_VAR BASEURL>wikiicons/languages.png">
+			</div>
            <div class="container-fluid">

-            <div class="navbar-header">
-              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-footer" aria-expanded="false">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
+            <div class="navbar navbar-expand-lg navbar-light border">
+			  <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="navbar-toggler-icon"></span>
              </button>
            </div>

@ -247,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>
@ -319,7 +312,7 @@
            </TMPL_UNLESS>
    </div> <!-- /container -->

-    <TMPL_IF HTML5><footer<TMPL_ELSE><div</TMPL_IF> class="footer" role="contentinfo">
+    <footer class="footer" role="contentinfo">
 	<div class="container">

    <TMPL_IF FOOTER>
@ -327,14 +320,14 @@
    </TMPL_IF>

 	</div>
-    <TMPL_IF HTML5></footer><TMPL_ELSE></div></TMPL_IF>
+    </footer>


    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></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://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>
--- a/templates/searchform.tmpl
+++ b/templates/searchform.tmpl
@ -1,4 +1,4 @@
 <form method="get" action="<TMPL_VAR SEARCHACTION>" class="navbar-form navbar-left" role="search">
 <input type="text" class="form-control" name="P" value="" size="16"
-<TMPL_IF HTML5>placeholder="search"</TMPL_IF> />
+placeholder="search" />
 </form>
Author	SHA1	Message	Date
IkiWiki	08834e87d8	*: update to Bootstrap 5 All checks were successful / preview (pull_request) Successful in 37s Details	2024-09-10 21:07:45 -04:00
IkiWiki	6f3374233e	templates/*: Drop HTML5 conditions	2024-09-10 20:30:00 -04:00