diff --git a/404.html b/404.html
index 69321310ce..9fa0e4650a 100644
--- a/404.html
+++ b/404.html
@@ -9,20 +9,20 @@
     <meta name="author" content="Sören Weber">
     <title>404 Page not found :: Hugo Relearn Theme</title>
     <base href="https://McShelby.github.io/hugo-theme-relearn/">
-    <link href="./images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="./css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="./css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1694470592" rel="stylesheet">
-    <link href="./css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="./css/variant.css?1694470592" rel="stylesheet">
-    <link href="./css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="./css/ie.css?1694470592" rel="stylesheet">
-    <script src="./js/url.js?1694470592"></script>
-    <script src="./js/variant.js?1694470592"></script>
+    <link href="./css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="./css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="./css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1694553014" rel="stylesheet">
+    <link href="./css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="./css/variant.css?1694553014" rel="stylesheet">
+    <link href="./css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="./css/ie.css?1694553014" rel="stylesheet">
+    <script src="./js/url.js?1694553014"></script>
+    <script src="./js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
diff --git a/basics/changelog/index.html b/basics/changelog/index.html
index 0e765938ec..ef9aa0141b 100644
--- a/basics/changelog/index.html
+++ b/basics/changelog/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title></title>
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -50,39 +50,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../cont/index.html" title="Content (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../basics/history/index.html" title="History (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../basics/changelog/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/CHANGELOG.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../cont/index.html" title="Content (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../basics/history/index.html" title="History (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../basics/changelog/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/CHANGELOG.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Hugo Relearn Theme</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -2069,12 +2077,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -2228,13 +2236,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/basics/changelog/index.print.html b/basics/changelog/index.print.html
index daa6102854..e3030610ff 100644
--- a/basics/changelog/index.print.html
+++ b/basics/changelog/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title></title>
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -51,18 +51,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Hugo Relearn Theme</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -1296,8 +1300,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/basics/configuration/index.html b/basics/configuration/index.html
index 20435d1ade..132b417e8b 100644
--- a/basics/configuration/index.html
+++ b/basics/configuration/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configuration :: Hugo Relearn Theme">
     <link href="../../basics/configuration/index.print.html" rel="alternate" type="text/html" title="Configuration :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../basics/customization/index.html" title="Customization (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../basics/installation/index.html" title="Installation (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../basics/configuration/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/configuration/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../basics/customization/index.html" title="Customization (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../basics/installation/index.html" title="Installation (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../basics/configuration/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/configuration/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Configuration</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -239,8 +247,8 @@
 <p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
-<p><a href="#image-fd75945eebdedad3c0b03990ffe75e76" class="lightbox-link"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fd75945eebdedad3c0b03990ffe75e76"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-db9c03b607d2000408dbf1c3b544e461" class="lightbox-link"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-db9c03b607d2000408dbf1c3b544e461"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="activate-print-support">Activate print support</h2>
 <p>You can activate print support to add the capability to print whole chapters or even the complete site. Just add the <code>PRINT</code> output format to your home, section and page in your <code>config.toml</code> as seen below:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
@@ -285,8 +293,8 @@ appearance, you will have to configure two parameters for the defined languages:
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If those params are not configured for a specific language, they will get their
 default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>The home button is going to look like this:</p>
-<p><a href="#image-2489fb31edb5eeaa773b851b1d005396" class="lightbox-link"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-2489fb31edb5eeaa773b851b1d005396"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-6f92400cab765b7878877f271a88e9c1" class="lightbox-link"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6f92400cab765b7878877f271a88e9c1"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 
@@ -374,12 +382,12 @@ default values:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -533,13 +541,13 @@ default values:</p>
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/basics/configuration/index.print.html b/basics/configuration/index.print.html
index 6f121e078f..ad0f7c529a 100644
--- a/basics/configuration/index.print.html
+++ b/basics/configuration/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/configuration/index.html" rel="canonical" type="text/html" title="Configuration :: Hugo Relearn Theme">
     <link href="../../basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configuration :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Configuration</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -191,8 +195,8 @@
 <p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
-<p><a href="#image-fd75945eebdedad3c0b03990ffe75e76" class="lightbox-link"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fd75945eebdedad3c0b03990ffe75e76"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-db9c03b607d2000408dbf1c3b544e461" class="lightbox-link"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-db9c03b607d2000408dbf1c3b544e461"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="activate-print-support">Activate print support</h2>
 <p>You can activate print support to add the capability to print whole chapters or even the complete site. Just add the <code>PRINT</code> output format to your home, section and page in your <code>config.toml</code> as seen below:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
@@ -237,8 +241,8 @@ appearance, you will have to configure two parameters for the defined languages:
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If those params are not configured for a specific language, they will get their
 default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>The home button is going to look like this:</p>
-<p><a href="#image-2489fb31edb5eeaa773b851b1d005396" class="lightbox-link"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-2489fb31edb5eeaa773b851b1d005396"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-6f92400cab765b7878877f271a88e9c1" class="lightbox-link"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6f92400cab765b7878877f271a88e9c1"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 
@@ -248,8 +252,8 @@ default values:</p>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/basics/customization/index.html b/basics/customization/index.html
index a6bf42ace2..ce1f7fe4b2 100644
--- a/basics/customization/index.html
+++ b/basics/customization/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customization :: Hugo Relearn Theme">
     <link href="../../basics/customization/index.print.html" rel="alternate" type="text/html" title="Customization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../basics/generator/index.html" title="Stylesheet generator (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../basics/configuration/index.html" title="Configuration (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../basics/customization/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/customization/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../basics/generator/index.html" title="Stylesheet generator (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../basics/configuration/index.html" title="Configuration (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../basics/customization/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/customization/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Customization</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -298,12 +306,12 @@ If you have requirements to support IE and/or older browser versions, use one of
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -457,13 +465,13 @@ If you have requirements to support IE and/or older browser versions, use one of
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/basics/customization/index.print.html b/basics/customization/index.print.html
index f7cf797d9d..41af05db60 100644
--- a/basics/customization/index.print.html
+++ b/basics/customization/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/customization/index.html" rel="canonical" type="text/html" title="Customization :: Hugo Relearn Theme">
     <link href="../../basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Customization</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -180,8 +184,8 @@ If you have requirements to support IE and/or older browser versions, use one of
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/basics/generator/index.html b/basics/generator/index.html
index cd13f56da7..83f0e05061 100644
--- a/basics/generator/index.html
+++ b/basics/generator/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generator :: Hugo Relearn Theme">
     <link href="../../basics/generator/index.print.html" rel="alternate" type="text/html" title="Stylesheet generator :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,38 +54,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../basics/history/index.html" title="History (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../basics/customization/index.html" title="Customization (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../basics/generator/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/generator/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../basics/history/index.html" title="History (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../basics/customization/index.html" title="Customization (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../basics/generator/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/generator/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Stylesheet generator</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -98,13 +102,13 @@
 <p>This interactive tool may help you to generate your own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-4d1a6b0809e42edc9497d9cd4f1c24b2" aria-controls="expandcontent-4d1a6b0809e42edc9497d9cd4f1c24b2" >
-    <label class="expand-label" for="expand-4d1a6b0809e42edc9497d9cd4f1c24b2" >
+    <input type="checkbox" id="expand-76a501384b1df0897ccf15798da60240" aria-controls="expandcontent-76a501384b1df0897ccf15798da60240" >
+    <label class="expand-label" for="expand-76a501384b1df0897ccf15798da60240" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="expandcontent-4d1a6b0809e42edc9497d9cd4f1c24b2" class="expand-content">
+    <div id="expandcontent-76a501384b1df0897ccf15798da60240" class="expand-content">
 
 <p>To get started, first select a color variant from the variant switch in the lower left sidebar that fits you best as a starting point.</p>
 <p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
@@ -236,12 +240,12 @@ window.variants && variants.generator( '#vargenerator' );
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -395,27 +399,27 @@ window.variants && variants.generator( '#vargenerator' );
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694470592" defer></script>
-    <script src="../../js/js-yaml.min.js?1694470592" defer></script>
-    <script src="../../js/mermaid.min.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694553014" defer></script>
+    <script src="../../js/js-yaml.min.js?1694553014" defer></script>
+    <script src="../../js/mermaid.min.js?1694553014" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/basics/generator/index.print.html b/basics/generator/index.print.html
index 7430f0b04a..6215bb4f82 100644
--- a/basics/generator/index.print.html
+++ b/basics/generator/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/generator/index.html" rel="canonical" type="text/html" title="Stylesheet generator :: Hugo Relearn Theme">
     <link href="../../basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generator :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Stylesheet generator</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -79,13 +83,13 @@
 <p>This interactive tool may help you to generate your own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-4d1a6b0809e42edc9497d9cd4f1c24b2" aria-controls="expandcontent-4d1a6b0809e42edc9497d9cd4f1c24b2" >
-    <label class="expand-label" for="expand-4d1a6b0809e42edc9497d9cd4f1c24b2" >
+    <input type="checkbox" id="expand-76a501384b1df0897ccf15798da60240" aria-controls="expandcontent-76a501384b1df0897ccf15798da60240" >
+    <label class="expand-label" for="expand-76a501384b1df0897ccf15798da60240" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="expandcontent-4d1a6b0809e42edc9497d9cd4f1c24b2" class="expand-content">
+    <div id="expandcontent-76a501384b1df0897ccf15798da60240" class="expand-content">
 
 <p>To get started, first select a color variant from the variant switch in the lower left sidebar that fits you best as a starting point.</p>
 <p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
@@ -139,22 +143,22 @@ window.variants && variants.generator( '#vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694470593" defer></script>
-    <script src="../../js/js-yaml.min.js?1694470593" defer></script>
-    <script src="../../js/mermaid.min.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694553015" defer></script>
+    <script src="../../js/js-yaml.min.js?1694553015" defer></script>
+    <script src="../../js/mermaid.min.js?1694553015" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/basics/history/index.html b/basics/history/index.html
index 34334db89c..d8caac06a8 100644
--- a/basics/history/index.html
+++ b/basics/history/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/history/index.xml" rel="alternate" type="application/rss+xml" title="History :: Hugo Relearn Theme">
     <link href="../../basics/history/index.print.html" rel="alternate" type="text/html" title="History :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../cont/index.html" title="Content (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../basics/generator/index.html" title="Stylesheet generator (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../basics/history/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/history/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../cont/index.html" title="Content (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../basics/generator/index.html" title="Stylesheet generator (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../basics/history/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/history/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">History</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -2075,12 +2083,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -2234,13 +2242,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/basics/history/index.print.html b/basics/history/index.print.html
index 7509634373..dcad036435 100644
--- a/basics/history/index.print.html
+++ b/basics/history/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/history/index.html" rel="canonical" type="text/html" title="History :: Hugo Relearn Theme">
     <link href="../../basics/history/index.xml" rel="alternate" type="application/rss+xml" title="History :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">History</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -1302,8 +1306,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/basics/index.html b/basics/index.html
index 52cd54af33..ea7c4442a4 100644
--- a/basics/index.html
+++ b/basics/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="../basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Hugo Relearn Theme">
     <link href="../basics/index.print.html" rel="alternate" type="text/html" title="Basics :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../js/url.js?1694470592"></script>
-    <script src="../js/variant.js?1694470592"></script>
+    <link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../js/url.js?1694553014"></script>
+    <script src="../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,37 +54,41 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../basics/migration/index.html" title="What&#39;s New (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../basics/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../basics/migration/index.html" title="What&#39;s New (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../basics/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Basics</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -183,12 +187,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../js/search.js?1694470592" defer></script>
+        <script src="../js/auto-complete.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -342,13 +346,13 @@
               }
             });
           </script>
-          <script async src="../js/github-buttons.js?1694470592"></script>
+          <script async src="../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../js/theme.js?1694470592" defer></script>
+    <script src="../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/basics/index.print.html b/basics/index.print.html
index d269551340..7c463ce577 100644
--- a/basics/index.print.html
+++ b/basics/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/index.html" rel="canonical" type="text/html" title="Basics :: Hugo Relearn Theme">
     <link href="../basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../js/url.js?1694470593"></script>
-    <script src="../js/variant.js?1694470593"></script>
+    <link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../js/url.js?1694553015"></script>
+    <script src="../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,17 +55,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Basics</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -834,8 +838,8 @@
 
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
-<p><a href="#image-f5a1b5155d97cdf5bde1df4006cf0e43" class="lightbox-link"><img src="../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f5a1b5155d97cdf5bde1df4006cf0e43"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-a3294e1c75be4125d12de7e6556a24fe" class="lightbox-link"><img src="../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a3294e1c75be4125d12de7e6556a24fe"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
               <i class='fas fa-list'></i>
@@ -878,8 +882,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#image-20fc0e4d2e62a391e107b447fb159e78" class="lightbox-link"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-20fc0e4d2e62a391e107b447fb159e78"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8011f8b6c738ac4a1d5df55154bf2dd1" class="lightbox-link"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8011f8b6c738ac4a1d5df55154bf2dd1"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
 <p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
@@ -1033,8 +1037,8 @@
 <p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
-<p><a href="#image-fd75945eebdedad3c0b03990ffe75e76" class="lightbox-link"><img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fd75945eebdedad3c0b03990ffe75e76"><img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-db9c03b607d2000408dbf1c3b544e461" class="lightbox-link"><img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-db9c03b607d2000408dbf1c3b544e461"><img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="activate-print-support">Activate print support</h2>
 <p>You can activate print support to add the capability to print whole chapters or even the complete site. Just add the <code>PRINT</code> output format to your home, section and page in your <code>config.toml</code> as seen below:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
@@ -1079,8 +1083,8 @@ appearance, you will have to configure two parameters for the defined languages:
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If those params are not configured for a specific language, they will get their
 default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>The home button is going to look like this:</p>
-<p><a href="#image-2489fb31edb5eeaa773b851b1d005396" class="lightbox-link"><img src="../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-2489fb31edb5eeaa773b851b1d005396"><img src="../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-6f92400cab765b7878877f271a88e9c1" class="lightbox-link"><img src="../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6f92400cab765b7878877f271a88e9c1"><img src="../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 
@@ -1201,13 +1205,13 @@ If you have requirements to support IE and/or older browser versions, use one of
 <p>This interactive tool may help you to generate your own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-4d1a6b0809e42edc9497d9cd4f1c24b2" aria-controls="expandcontent-4d1a6b0809e42edc9497d9cd4f1c24b2" >
-    <label class="expand-label" for="expand-4d1a6b0809e42edc9497d9cd4f1c24b2" >
+    <input type="checkbox" id="expand-76a501384b1df0897ccf15798da60240" aria-controls="expandcontent-76a501384b1df0897ccf15798da60240" >
+    <label class="expand-label" for="expand-76a501384b1df0897ccf15798da60240" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="expandcontent-4d1a6b0809e42edc9497d9cd4f1c24b2" class="expand-content">
+    <div id="expandcontent-76a501384b1df0897ccf15798da60240" class="expand-content">
 
 <p>To get started, first select a color variant from the variant switch in the lower left sidebar that fits you best as a starting point.</p>
 <p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
@@ -2490,22 +2494,22 @@ window.variants && variants.generator( '#vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-color.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1694470593" defer></script>
-    <script src="../js/js-yaml.min.js?1694470593" defer></script>
-    <script src="../js/mermaid.min.js?1694470593" defer></script>
+    <script src="../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-color.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1694553015" defer></script>
+    <script src="../js/js-yaml.min.js?1694553015" defer></script>
+    <script src="../js/mermaid.min.js?1694553015" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../js/theme.js?1694470593" defer></script>
+    <script src="../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/basics/installation/index.html b/basics/installation/index.html
index c4b57f47f6..1c600e3e90 100644
--- a/basics/installation/index.html
+++ b/basics/installation/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installation :: Hugo Relearn Theme">
     <link href="../../basics/installation/index.print.html" rel="alternate" type="text/html" title="Installation :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../basics/configuration/index.html" title="Configuration (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../basics/requirements/index.html" title="Requirements (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../basics/installation/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/installation/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../basics/configuration/index.html" title="Configuration (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../basics/requirements/index.html" title="Requirements (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../basics/installation/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/installation/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Installation</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -144,8 +152,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#image-20fc0e4d2e62a391e107b447fb159e78" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-20fc0e4d2e62a391e107b447fb159e78"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8011f8b6c738ac4a1d5df55154bf2dd1" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8011f8b6c738ac4a1d5df55154bf2dd1"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
 <p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
@@ -260,12 +268,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -419,13 +427,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/basics/installation/index.print.html b/basics/installation/index.print.html
index 4ce4e01974..0a931442fe 100644
--- a/basics/installation/index.print.html
+++ b/basics/installation/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/installation/index.html" rel="canonical" type="text/html" title="Installation :: Hugo Relearn Theme">
     <link href="../../basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installation :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Installation</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -105,8 +109,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#image-20fc0e4d2e62a391e107b447fb159e78" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-20fc0e4d2e62a391e107b447fb159e78"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8011f8b6c738ac4a1d5df55154bf2dd1" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8011f8b6c738ac4a1d5df55154bf2dd1"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
 <p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
@@ -143,8 +147,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/basics/migration/index.html b/basics/migration/index.html
index 79dd415bf9..41ac039785 100644
--- a/basics/migration/index.html
+++ b/basics/migration/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Hugo Relearn Theme">
     <link href="../../basics/migration/index.print.html" rel="alternate" type="text/html" title="What&#39;s New :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../basics/requirements/index.html" title="Requirements (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../basics/index.html" title="Basics (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../basics/migration/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/migration/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../basics/requirements/index.html" title="Requirements (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../basics/index.html" title="Basics (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../basics/migration/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/migration/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">What&#39;s New</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -965,12 +973,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1124,13 +1132,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/basics/migration/index.print.html b/basics/migration/index.print.html
index 0f42e793a6..b152af4812 100644
--- a/basics/migration/index.print.html
+++ b/basics/migration/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/migration/index.html" rel="canonical" type="text/html" title="What&#39;s New :: Hugo Relearn Theme">
     <link href="../../basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">What&#39;s New</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -816,8 +820,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/basics/requirements/index.html b/basics/requirements/index.html
index 7955442007..0bbc396d2d 100644
--- a/basics/requirements/index.html
+++ b/basics/requirements/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirements :: Hugo Relearn Theme">
     <link href="../../basics/requirements/index.print.html" rel="alternate" type="text/html" title="Requirements :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,38 +54,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../basics/installation/index.html" title="Installation (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../basics/migration/index.html" title="What&#39;s New (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../basics/requirements/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/requirements/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../basics/installation/index.html" title="Installation (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../basics/migration/index.html" title="What&#39;s New (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../basics/requirements/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/requirements/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Requirements</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -97,8 +101,8 @@
 
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
-<p><a href="#image-f5a1b5155d97cdf5bde1df4006cf0e43" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f5a1b5155d97cdf5bde1df4006cf0e43"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-a3294e1c75be4125d12de7e6556a24fe" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a3294e1c75be4125d12de7e6556a24fe"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
               <i class='fas fa-list'></i>
@@ -188,12 +192,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -347,13 +351,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/basics/requirements/index.print.html b/basics/requirements/index.print.html
index a8420c75eb..2b510741c7 100644
--- a/basics/requirements/index.print.html
+++ b/basics/requirements/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/requirements/index.html" rel="canonical" type="text/html" title="Requirements :: Hugo Relearn Theme">
     <link href="../../basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirements :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Requirements</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -78,8 +82,8 @@
 
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
-<p><a href="#image-f5a1b5155d97cdf5bde1df4006cf0e43" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f5a1b5155d97cdf5bde1df4006cf0e43"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-a3294e1c75be4125d12de7e6556a24fe" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a3294e1c75be4125d12de7e6556a24fe"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
               <i class='fas fa-list'></i>
@@ -91,8 +95,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/categories/basic/index.html b/categories/basic/index.html
index 625e2fd766..f35d2c896c 100644
--- a/categories/basic/index.html
+++ b/categories/basic/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/basic/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/basic/index.html" rel="alternate" hreflang="pir">
     <link href="../../categories/basic/index.xml" rel="alternate" type="application/rss+xml" title="basic :: Category :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../categories/index.html"><span itemprop="name">Categories</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Category :: basic</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/categories/content/index.html b/categories/content/index.html
index 61e7e23380..a652f632f8 100644
--- a/categories/content/index.html
+++ b/categories/content/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/content/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/content/index.html" rel="alternate" hreflang="pir">
     <link href="../../categories/content/index.xml" rel="alternate" type="application/rss+xml" title="content :: Category :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../categories/index.html"><span itemprop="name">Categories</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Category :: content</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/categories/custom/index.html b/categories/custom/index.html
index 3585fff578..043cdcec8e 100644
--- a/categories/custom/index.html
+++ b/categories/custom/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/custom/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/custom/index.html" rel="alternate" hreflang="pir">
     <link href="../../categories/custom/index.xml" rel="alternate" type="application/rss+xml" title="custom :: Category :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../categories/index.html"><span itemprop="name">Categories</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Category :: custom</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/categories/index.html b/categories/index.html
index b949e5d5cc..c9a2d4dbe1 100644
--- a/categories/index.html
+++ b/categories/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/index.html" rel="alternate" hreflang="pir">
     <link href="../categories/index.xml" rel="alternate" type="application/rss+xml" title="Categories :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../js/url.js?1694470592"></script>
-    <script src="../js/variant.js?1694470592"></script>
+    <link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../js/url.js?1694553014"></script>
+    <script src="../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,36 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Categories</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -193,12 +201,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../js/search.js?1694470593" defer></script>
+        <script src="../js/auto-complete.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -352,13 +360,13 @@
               }
             });
           </script>
-          <script async src="../js/github-buttons.js?1694470593"></script>
+          <script async src="../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../js/theme.js?1694470593" defer></script>
+    <script src="../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/categories/taxonomy/index.html b/categories/taxonomy/index.html
index 6d15cd9f1f..158ce67ce5 100644
--- a/categories/taxonomy/index.html
+++ b/categories/taxonomy/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/taxonomy/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="../../categories/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="taxonomy :: Category :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../categories/index.html"><span itemprop="name">Categories</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Category :: taxonomy</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/categories/theming/index.html b/categories/theming/index.html
index ef5715c71c..a75a5a7231 100644
--- a/categories/theming/index.html
+++ b/categories/theming/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/theming/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/theming/index.html" rel="alternate" hreflang="pir">
     <link href="../../categories/theming/index.xml" rel="alternate" type="application/rss+xml" title="theming :: Category :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../categories/index.html"><span itemprop="name">Categories</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Category :: theming</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -172,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -331,13 +335,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/cont/archetypes/index.html b/cont/archetypes/index.html
index ea38330752..592ffcce8c 100644
--- a/cont/archetypes/index.html
+++ b/cont/archetypes/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Archetypes :: Hugo Relearn Theme">
     <link href="../../cont/archetypes/index.print.html" rel="alternate" type="text/html" title="Archetypes :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../cont/markdown/index.html" title="Markdown syntax (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../cont/pages/index.html" title="Pages organization (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../cont/archetypes/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/archetypes/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../cont/markdown/index.html" title="Markdown syntax (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../cont/pages/index.html" title="Pages organization (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../cont/archetypes/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/archetypes/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Archetypes</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -122,8 +130,8 @@
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
-<p><a href="#image-990a14d7f3a272dd46c08c5f53ec1c2f" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-990a14d7f3a272dd46c08c5f53ec1c2f"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-d2ae732c685c4c51749c92b0bd3d5058" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d2ae732c685c4c51749c92b0bd3d5058"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a home page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -133,8 +141,8 @@
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
-<p><a href="#image-918c2eb86af38d835f842f04ae9f7b55" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-918c2eb86af38d835f842f04ae9f7b55"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-5148cbbdbc1082272f067bfe80fd0467" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5148cbbdbc1082272f067bfe80fd0467"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a chapter page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -146,8 +154,8 @@
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace the <code>X</code> with a number. Because this number will be used to generate the subtitle of the chapter page, set the number to a consecutive value starting at 1 for each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
-<p><a href="#image-d5e6ff631d22b90dc3cc363ed82effed" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d5e6ff631d22b90dc3cc363ed82effed"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-d8721a273456bc3b61cde523d2f00d79" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d8721a273456bc3b61cde523d2f00d79"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a default page, run either one of the following commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
@@ -277,12 +285,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -436,13 +444,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/cont/archetypes/index.print.html b/cont/archetypes/index.print.html
index 5e742de4a5..07d0543000 100644
--- a/cont/archetypes/index.print.html
+++ b/cont/archetypes/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/archetypes/index.html" rel="canonical" type="text/html" title="Archetypes :: Hugo Relearn Theme">
     <link href="../../cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Archetypes :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Archetypes</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -81,8 +85,8 @@
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
-<p><a href="#image-990a14d7f3a272dd46c08c5f53ec1c2f" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-990a14d7f3a272dd46c08c5f53ec1c2f"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-d2ae732c685c4c51749c92b0bd3d5058" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d2ae732c685c4c51749c92b0bd3d5058"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a home page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -92,8 +96,8 @@
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
-<p><a href="#image-918c2eb86af38d835f842f04ae9f7b55" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-918c2eb86af38d835f842f04ae9f7b55"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-5148cbbdbc1082272f067bfe80fd0467" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5148cbbdbc1082272f067bfe80fd0467"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a chapter page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -105,8 +109,8 @@
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace the <code>X</code> with a number. Because this number will be used to generate the subtitle of the chapter page, set the number to a consecutive value starting at 1 for each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
-<p><a href="#image-d5e6ff631d22b90dc3cc363ed82effed" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d5e6ff631d22b90dc3cc363ed82effed"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-d8721a273456bc3b61cde523d2f00d79" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d8721a273456bc3b61cde523d2f00d79"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a default page, run either one of the following commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
@@ -158,8 +162,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/cont/i18n/index.html b/cont/i18n/index.html
index dac42c34c0..c53c74f411 100644
--- a/cont/i18n/index.html
+++ b/cont/i18n/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual and i18n :: Hugo Relearn Theme">
     <link href="../../cont/i18n/index.print.html" rel="alternate" type="text/html" title="Multilingual and i18n :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../cont/taxonomy/index.html" title="Taxonomy (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../cont/menushortcuts/index.html" title="Menu extra shortcuts (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../cont/i18n/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/i18n/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../cont/taxonomy/index.html" title="Taxonomy (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../cont/menushortcuts/index.html" title="Menu extra shortcuts (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../cont/i18n/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/i18n/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Multilingual and i18n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -119,8 +127,8 @@
 <li>Automatic menu generation from multilingual content</li>
 <li>In-browser language switching</li>
 </ul>
-<p><a href="#image-f53abeac1c732386e6f242f352ee5ca2" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f53abeac1c732386e6f242f352ee5ca2"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c96a4da35b8879cd5616fa9e7f6e5d20" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c96a4da35b8879cd5616fa9e7f6e5d20"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
 <p>After learning <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Hugo handle multilingual websites</a>, define your languages in your <code>config.toml</code> file.</p>
 <p>For example with current English and Piratized English website.</p>
@@ -298,12 +306,12 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -457,13 +465,13 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/cont/i18n/index.print.html b/cont/i18n/index.print.html
index e2145989ab..021e93c544 100644
--- a/cont/i18n/index.print.html
+++ b/cont/i18n/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/i18n/index.html" rel="canonical" type="text/html" title="Multilingual and i18n :: Hugo Relearn Theme">
     <link href="../../cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual and i18n :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Multilingual and i18n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -83,8 +87,8 @@
 <li>Automatic menu generation from multilingual content</li>
 <li>In-browser language switching</li>
 </ul>
-<p><a href="#image-f53abeac1c732386e6f242f352ee5ca2" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f53abeac1c732386e6f242f352ee5ca2"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c96a4da35b8879cd5616fa9e7f6e5d20" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c96a4da35b8879cd5616fa9e7f6e5d20"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
 <p>After learning <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Hugo handle multilingual websites</a>, define your languages in your <code>config.toml</code> file.</p>
 <p>For example with current English and Piratized English website.</p>
@@ -184,8 +188,8 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/cont/imageeffects/index.html b/cont/imageeffects/index.html
index e1435c25da..94bf5e4790 100644
--- a/cont/imageeffects/index.html
+++ b/cont/imageeffects/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Hugo Relearn Theme">
     <link href="../../cont/imageeffects/index.print.html" rel="alternate" type="text/html" title="Image Effects :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../cont/menushortcuts/index.html" title="Menu extra shortcuts (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../cont/markdown/index.html" title="Markdown syntax (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../cont/imageeffects/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/imageeffects.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../cont/menushortcuts/index.html" title="Menu extra shortcuts (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../cont/markdown/index.html" title="Markdown syntax (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../cont/imageeffects/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/imageeffects.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Image Effects</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -112,13 +120,13 @@
 <p>Without any settings in your <code>config.toml</code> this defaults to</p>
 
   
-<div class="tab-panel" data-tab-group="781a17795e0250505cec4a833883d094">
+<div class="tab-panel" data-tab-group="77be7fa2f6e4eb27046b21de720b6201">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('781a17795e0250505cec4a833883d094','configtoml')"
+      onclick="switchTab('77be7fa2f6e4eb27046b21de720b6201','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -142,13 +150,13 @@
 </div><p>This can be overridden in a pages frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="095eb24d60a5de423de3d3725ad645e0">
+<div class="tab-panel" data-tab-group="c0f283707930f36b50dbb658dab17b69">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('095eb24d60a5de423de3d3725ad645e0','frontmatter')"
+      onclick="switchTab('c0f283707930f36b50dbb658dab17b69','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -171,13 +179,13 @@
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="552c3879071dac6226d38180e8d010c3">
+<div class="tab-panel" data-tab-group="5c51d1681feee80c41d76970f53304a9">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('552c3879071dac6226d38180e8d010c3','url')"
+      onclick="switchTab('5c51d1681feee80c41d76970f53304a9','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -197,13 +205,13 @@
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="51e2661fc1b0af4d2847187e5478b313">
+<div class="tab-panel" data-tab-group="36d09abe1db2a90f3058ab6b625fe09d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('51e2661fc1b0af4d2847187e5478b313','result')"
+      onclick="switchTab('36d09abe1db2a90f3058ab6b625fe09d','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -226,13 +234,13 @@
 </div><p>This ends up in the following HTML where the parameter are converted to CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="49df380363453799a529d13a1bc27b4d">
+<div class="tab-panel" data-tab-group="5dbc3bed8b73a74551adf4765ac68b55">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('49df380363453799a529d13a1bc27b4d','html')"
+      onclick="switchTab('5dbc3bed8b73a74551adf4765ac68b55','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -346,12 +354,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -505,13 +513,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/cont/imageeffects/index.print.html b/cont/imageeffects/index.print.html
index 42ce6ec933..d773fb961b 100644
--- a/cont/imageeffects/index.print.html
+++ b/cont/imageeffects/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/imageeffects/index.html" rel="canonical" type="text/html" title="Image Effects :: Hugo Relearn Theme">
     <link href="../../cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Image Effects</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -83,13 +87,13 @@
 <p>Without any settings in your <code>config.toml</code> this defaults to</p>
 
   
-<div class="tab-panel" data-tab-group="781a17795e0250505cec4a833883d094">
+<div class="tab-panel" data-tab-group="77be7fa2f6e4eb27046b21de720b6201">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('781a17795e0250505cec4a833883d094','configtoml')"
+      onclick="switchTab('77be7fa2f6e4eb27046b21de720b6201','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -113,13 +117,13 @@
 </div><p>This can be overridden in a pages frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="095eb24d60a5de423de3d3725ad645e0">
+<div class="tab-panel" data-tab-group="c0f283707930f36b50dbb658dab17b69">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('095eb24d60a5de423de3d3725ad645e0','frontmatter')"
+      onclick="switchTab('c0f283707930f36b50dbb658dab17b69','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -142,13 +146,13 @@
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="552c3879071dac6226d38180e8d010c3">
+<div class="tab-panel" data-tab-group="5c51d1681feee80c41d76970f53304a9">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('552c3879071dac6226d38180e8d010c3','url')"
+      onclick="switchTab('5c51d1681feee80c41d76970f53304a9','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -168,13 +172,13 @@
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="51e2661fc1b0af4d2847187e5478b313">
+<div class="tab-panel" data-tab-group="36d09abe1db2a90f3058ab6b625fe09d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('51e2661fc1b0af4d2847187e5478b313','result')"
+      onclick="switchTab('36d09abe1db2a90f3058ab6b625fe09d','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -197,13 +201,13 @@
 </div><p>This ends up in the following HTML where the parameter are converted to CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="49df380363453799a529d13a1bc27b4d">
+<div class="tab-panel" data-tab-group="5dbc3bed8b73a74551adf4765ac68b55">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('49df380363453799a529d13a1bc27b4d','html')"
+      onclick="switchTab('5dbc3bed8b73a74551adf4765ac68b55','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -239,8 +243,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/cont/index.html b/cont/index.html
index 3dfb959911..2fdb732a6b 100644
--- a/cont/index.html
+++ b/cont/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="../cont/index.xml" rel="alternate" type="application/rss+xml" title="Content :: Hugo Relearn Theme">
     <link href="../cont/index.print.html" rel="alternate" type="text/html" title="Content :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../js/url.js?1694470592"></script>
-    <script src="../js/variant.js?1694470592"></script>
+    <link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../js/url.js?1694553014"></script>
+    <script src="../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,37 +54,41 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../cont/pages/index.html" title="Pages organization (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../basics/history/index.html" title="History (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../cont/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../cont/pages/index.html" title="Pages organization (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../basics/history/index.html" title="History (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../cont/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Content</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -183,12 +187,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../js/search.js?1694470592" defer></script>
+        <script src="../js/auto-complete.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -342,13 +346,13 @@
               }
             });
           </script>
-          <script async src="../js/github-buttons.js?1694470592"></script>
+          <script async src="../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../js/theme.js?1694470592" defer></script>
+    <script src="../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/cont/index.print.html b/cont/index.print.html
index b43c9ea3c0..1f4c659a45 100644
--- a/cont/index.print.html
+++ b/cont/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/index.html" rel="canonical" type="text/html" title="Content :: Hugo Relearn Theme">
     <link href="../cont/index.xml" rel="alternate" type="application/rss+xml" title="Content :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../js/url.js?1694470593"></script>
-    <script src="../js/variant.js?1694470593"></script>
+    <link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../js/url.js?1694553015"></script>
+    <script src="../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,17 +55,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Content</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -164,8 +168,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-69b26cd28033f7b8552fc54c85e22933" class="lightbox-link"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-69b26cd28033f7b8552fc54c85e22933"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-5196ecb60fb0f653f73ccf3af78288b8" class="lightbox-link"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5196ecb60fb0f653f73ccf3af78288b8"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
 <p>Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flexible way</a> to handle order for your pages.</p>
 <p>The simplest way is to set <code>weight</code> parameter to a number.</p>
@@ -208,8 +212,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
-<p><a href="#image-990a14d7f3a272dd46c08c5f53ec1c2f" class="lightbox-link"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-990a14d7f3a272dd46c08c5f53ec1c2f"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-d2ae732c685c4c51749c92b0bd3d5058" class="lightbox-link"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d2ae732c685c4c51749c92b0bd3d5058"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a home page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -219,8 +223,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
-<p><a href="#image-918c2eb86af38d835f842f04ae9f7b55" class="lightbox-link"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-918c2eb86af38d835f842f04ae9f7b55"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-5148cbbdbc1082272f067bfe80fd0467" class="lightbox-link"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5148cbbdbc1082272f067bfe80fd0467"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a chapter page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -232,8 +236,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace the <code>X</code> with a number. Because this number will be used to generate the subtitle of the chapter page, set the number to a consecutive value starting at 1 for each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
-<p><a href="#image-d5e6ff631d22b90dc3cc363ed82effed" class="lightbox-link"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d5e6ff631d22b90dc3cc363ed82effed"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-d8721a273456bc3b61cde523d2f00d79" class="lightbox-link"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d8721a273456bc3b61cde523d2f00d79"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a default page, run either one of the following commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
@@ -804,8 +808,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-43c9c8c732259db20c76ae1cef41a99d" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-43c9c8c732259db20c76ae1cef41a99d"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-ac966b9c6cba558834e78c3e7280d018" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-ac966b9c6cba558834e78c3e7280d018"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image with Tooltip</h3>
@@ -815,8 +819,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-d491320552f18319ba5dee316666753d" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d491320552f18319ba5dee316666753d"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e0c1f7b1dae29ba1438fef734d752100" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e0c1f7b1dae29ba1438fef734d752100"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -828,8 +832,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-f18167e5ea9301f5be1015980bc08521" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f18167e5ea9301f5be1015980bc08521"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-39bb479a71b9ef45e22cfb36c40f5754" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-39bb479a71b9ef45e22cfb36c40f5754"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -841,8 +845,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-0ecfd20ad24a98cbdc3979dfb5e538dd" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-0ecfd20ad24a98cbdc3979dfb5e538dd"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0e2bfb1335f131be0d0ceb6d91ca705e" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0e2bfb1335f131be0d0ceb6d91ca705e"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -850,8 +854,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-df6c82bdd7afec7d684e5f7598fba7f9" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-df6c82bdd7afec7d684e5f7598fba7f9"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-16961e17586dd04e0ae3337350b2bd81" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-16961e17586dd04e0ae3337350b2bd81"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -859,8 +863,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-dffb14912833a36b46733b1543233581" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-dffb14912833a36b46733b1543233581"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-98a334d01d9d5cc014b8c4a69ba8e5a0" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-98a334d01d9d5cc014b8c4a69ba8e5a0"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -871,8 +875,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-63928e886afde3098e2aceb2138b6472" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-63928e886afde3098e2aceb2138b6472"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#image-329c3fe46a98ac4cc75b653b6da3cf19" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-329c3fe46a98ac4cc75b653b6da3cf19"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -881,8 +885,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-aced5629fd95dda8c589a3433dadc8c5" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-aced5629fd95dda8c589a3433dadc8c5"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#image-92df8b7ebd9363797adbe15bf2ad9648" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-92df8b7ebd9363797adbe15bf2ad9648"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -891,8 +895,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-fd67d9d7c59e013796c5c115b32f0dd5" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fd67d9d7c59e013796c5c115b32f0dd5"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0c009d56a037494e0f5f2c288280008c" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0c009d56a037494e0f5f2c288280008c"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -901,8 +905,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-abf215818b1ae52b5abbca8ac0b17989" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-abf215818b1ae52b5abbca8ac0b17989"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#image-88b1c0ce447d85c8d5fc6256459b62b3" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-88b1c0ce447d85c8d5fc6256459b62b3"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -914,14 +918,14 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-a1fbee0d4a233ab4d13211c2b8cc06bd" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-a1fbee0d4a233ab4d13211c2b8cc06bd"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-c3513aadbd996a57ebf913aaa7841249" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-c3513aadbd996a57ebf913aaa7841249"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-032eeaf972011f5bb778199c88a913ff" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-032eeaf972011f5bb778199c88a913ff"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-1fcdc428c16b7d7c6bac5dd376e813f8" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-1fcdc428c16b7d7c6bac5dd376e813f8"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c7987cad543cf57f37b19318c73c6dd7" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c7987cad543cf57f37b19318c73c6dd7"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-a784b2b60ffb2024250b5886cfee6bf9" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a784b2b60ffb2024250b5886cfee6bf9"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-b681e4a726d990058dffb39f0bb7a547" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-b681e4a726d990058dffb39f0bb7a547"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-0893bd356759446ed0853211434a177b" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0893bd356759446ed0853211434a177b"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combination</h5>
@@ -930,8 +934,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-46386e7fea683911b7760db127106c09" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-46386e7fea683911b7760db127106c09"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#image-10d1c152207cf037f4d6561f09c16a97" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-10d1c152207cf037f4d6561f09c16a97"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -971,13 +975,13 @@ line 3 of code
 <p>Without any settings in your <code>config.toml</code> this defaults to</p>
 
   
-<div class="tab-panel" data-tab-group="781a17795e0250505cec4a833883d094">
+<div class="tab-panel" data-tab-group="77be7fa2f6e4eb27046b21de720b6201">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('781a17795e0250505cec4a833883d094','configtoml')"
+      onclick="switchTab('77be7fa2f6e4eb27046b21de720b6201','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -1001,13 +1005,13 @@ line 3 of code
 </div><p>This can be overridden in a pages frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="095eb24d60a5de423de3d3725ad645e0">
+<div class="tab-panel" data-tab-group="c0f283707930f36b50dbb658dab17b69">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('095eb24d60a5de423de3d3725ad645e0','frontmatter')"
+      onclick="switchTab('c0f283707930f36b50dbb658dab17b69','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -1030,13 +1034,13 @@ line 3 of code
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="552c3879071dac6226d38180e8d010c3">
+<div class="tab-panel" data-tab-group="5c51d1681feee80c41d76970f53304a9">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('552c3879071dac6226d38180e8d010c3','url')"
+      onclick="switchTab('5c51d1681feee80c41d76970f53304a9','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -1056,13 +1060,13 @@ line 3 of code
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="51e2661fc1b0af4d2847187e5478b313">
+<div class="tab-panel" data-tab-group="36d09abe1db2a90f3058ab6b625fe09d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('51e2661fc1b0af4d2847187e5478b313','result')"
+      onclick="switchTab('36d09abe1db2a90f3058ab6b625fe09d','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -1085,13 +1089,13 @@ line 3 of code
 </div><p>This ends up in the following HTML where the parameter are converted to CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="49df380363453799a529d13a1bc27b4d">
+<div class="tab-panel" data-tab-group="5dbc3bed8b73a74551adf4765ac68b55">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('49df380363453799a529d13a1bc27b4d','html')"
+      onclick="switchTab('5dbc3bed8b73a74551adf4765ac68b55','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -1268,8 +1272,8 @@ However, if you want to keep the title but change its value, it can be overridde
 <li>Automatic menu generation from multilingual content</li>
 <li>In-browser language switching</li>
 </ul>
-<p><a href="#image-f53abeac1c732386e6f242f352ee5ca2" class="lightbox-link"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f53abeac1c732386e6f242f352ee5ca2"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c96a4da35b8879cd5616fa9e7f6e5d20" class="lightbox-link"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c96a4da35b8879cd5616fa9e7f6e5d20"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
 <p>After learning <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Hugo handle multilingual websites</a>, define your languages in your <code>config.toml</code> file.</p>
 <p>For example with current English and Piratized English website.</p>
@@ -1406,8 +1410,8 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../js/theme.js?1694470593" defer></script>
+    <script src="../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/cont/markdown/index.html b/cont/markdown/index.html
index 3119ebfae2..219c84fe36 100644
--- a/cont/markdown/index.html
+++ b/cont/markdown/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Markdown syntax :: Hugo Relearn Theme">
     <link href="../../cont/markdown/index.print.html" rel="alternate" type="text/html" title="Markdown syntax :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../cont/imageeffects/index.html" title="Image Effects (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../cont/archetypes/index.html" title="Archetypes (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../cont/markdown/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/markdown.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../cont/imageeffects/index.html" title="Image Effects (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../cont/archetypes/index.html" title="Archetypes (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../cont/markdown/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/markdown.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Markdown syntax</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -670,8 +678,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-43c9c8c732259db20c76ae1cef41a99d" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-43c9c8c732259db20c76ae1cef41a99d"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-ac966b9c6cba558834e78c3e7280d018" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-ac966b9c6cba558834e78c3e7280d018"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image with Tooltip</h3>
@@ -681,8 +689,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-d491320552f18319ba5dee316666753d" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d491320552f18319ba5dee316666753d"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e0c1f7b1dae29ba1438fef734d752100" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e0c1f7b1dae29ba1438fef734d752100"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -694,8 +702,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-f18167e5ea9301f5be1015980bc08521" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f18167e5ea9301f5be1015980bc08521"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-39bb479a71b9ef45e22cfb36c40f5754" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-39bb479a71b9ef45e22cfb36c40f5754"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -707,8 +715,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-0ecfd20ad24a98cbdc3979dfb5e538dd" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-0ecfd20ad24a98cbdc3979dfb5e538dd"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0e2bfb1335f131be0d0ceb6d91ca705e" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0e2bfb1335f131be0d0ceb6d91ca705e"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -716,8 +724,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-df6c82bdd7afec7d684e5f7598fba7f9" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-df6c82bdd7afec7d684e5f7598fba7f9"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-16961e17586dd04e0ae3337350b2bd81" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-16961e17586dd04e0ae3337350b2bd81"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -725,8 +733,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-dffb14912833a36b46733b1543233581" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-dffb14912833a36b46733b1543233581"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-98a334d01d9d5cc014b8c4a69ba8e5a0" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-98a334d01d9d5cc014b8c4a69ba8e5a0"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -737,8 +745,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-63928e886afde3098e2aceb2138b6472" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-63928e886afde3098e2aceb2138b6472"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#image-329c3fe46a98ac4cc75b653b6da3cf19" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-329c3fe46a98ac4cc75b653b6da3cf19"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -747,8 +755,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-aced5629fd95dda8c589a3433dadc8c5" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-aced5629fd95dda8c589a3433dadc8c5"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#image-92df8b7ebd9363797adbe15bf2ad9648" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-92df8b7ebd9363797adbe15bf2ad9648"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -757,8 +765,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-fd67d9d7c59e013796c5c115b32f0dd5" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fd67d9d7c59e013796c5c115b32f0dd5"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0c009d56a037494e0f5f2c288280008c" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0c009d56a037494e0f5f2c288280008c"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -767,8 +775,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-abf215818b1ae52b5abbca8ac0b17989" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-abf215818b1ae52b5abbca8ac0b17989"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#image-88b1c0ce447d85c8d5fc6256459b62b3" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-88b1c0ce447d85c8d5fc6256459b62b3"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -780,14 +788,14 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-a1fbee0d4a233ab4d13211c2b8cc06bd" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-a1fbee0d4a233ab4d13211c2b8cc06bd"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-c3513aadbd996a57ebf913aaa7841249" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-c3513aadbd996a57ebf913aaa7841249"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-032eeaf972011f5bb778199c88a913ff" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-032eeaf972011f5bb778199c88a913ff"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-1fcdc428c16b7d7c6bac5dd376e813f8" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-1fcdc428c16b7d7c6bac5dd376e813f8"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c7987cad543cf57f37b19318c73c6dd7" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c7987cad543cf57f37b19318c73c6dd7"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-a784b2b60ffb2024250b5886cfee6bf9" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a784b2b60ffb2024250b5886cfee6bf9"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-b681e4a726d990058dffb39f0bb7a547" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-b681e4a726d990058dffb39f0bb7a547"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-0893bd356759446ed0853211434a177b" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0893bd356759446ed0853211434a177b"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combination</h5>
@@ -796,8 +804,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-46386e7fea683911b7760db127106c09" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-46386e7fea683911b7760db127106c09"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#image-10d1c152207cf037f4d6561f09c16a97" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-10d1c152207cf037f4d6561f09c16a97"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -906,12 +914,12 @@ line 3 of code
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1065,13 +1073,13 @@ line 3 of code
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/cont/markdown/index.print.html b/cont/markdown/index.print.html
index 55d8a97de7..00dfbd55d3 100644
--- a/cont/markdown/index.print.html
+++ b/cont/markdown/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/markdown/index.html" rel="canonical" type="text/html" title="Markdown syntax :: Hugo Relearn Theme">
     <link href="../../cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Markdown syntax :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Markdown syntax</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -593,8 +597,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-43c9c8c732259db20c76ae1cef41a99d" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-43c9c8c732259db20c76ae1cef41a99d"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-ac966b9c6cba558834e78c3e7280d018" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-ac966b9c6cba558834e78c3e7280d018"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image with Tooltip</h3>
@@ -604,8 +608,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-d491320552f18319ba5dee316666753d" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d491320552f18319ba5dee316666753d"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e0c1f7b1dae29ba1438fef734d752100" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e0c1f7b1dae29ba1438fef734d752100"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -617,8 +621,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-f18167e5ea9301f5be1015980bc08521" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f18167e5ea9301f5be1015980bc08521"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-39bb479a71b9ef45e22cfb36c40f5754" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-39bb479a71b9ef45e22cfb36c40f5754"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -630,8 +634,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-0ecfd20ad24a98cbdc3979dfb5e538dd" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-0ecfd20ad24a98cbdc3979dfb5e538dd"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0e2bfb1335f131be0d0ceb6d91ca705e" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0e2bfb1335f131be0d0ceb6d91ca705e"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -639,8 +643,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-df6c82bdd7afec7d684e5f7598fba7f9" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-df6c82bdd7afec7d684e5f7598fba7f9"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-16961e17586dd04e0ae3337350b2bd81" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-16961e17586dd04e0ae3337350b2bd81"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -648,8 +652,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-dffb14912833a36b46733b1543233581" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-dffb14912833a36b46733b1543233581"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-98a334d01d9d5cc014b8c4a69ba8e5a0" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-98a334d01d9d5cc014b8c4a69ba8e5a0"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -660,8 +664,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-63928e886afde3098e2aceb2138b6472" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-63928e886afde3098e2aceb2138b6472"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#image-329c3fe46a98ac4cc75b653b6da3cf19" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-329c3fe46a98ac4cc75b653b6da3cf19"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -670,8 +674,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-aced5629fd95dda8c589a3433dadc8c5" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-aced5629fd95dda8c589a3433dadc8c5"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#image-92df8b7ebd9363797adbe15bf2ad9648" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-92df8b7ebd9363797adbe15bf2ad9648"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -680,8 +684,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-fd67d9d7c59e013796c5c115b32f0dd5" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fd67d9d7c59e013796c5c115b32f0dd5"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0c009d56a037494e0f5f2c288280008c" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0c009d56a037494e0f5f2c288280008c"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -690,8 +694,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-abf215818b1ae52b5abbca8ac0b17989" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-abf215818b1ae52b5abbca8ac0b17989"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#image-88b1c0ce447d85c8d5fc6256459b62b3" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-88b1c0ce447d85c8d5fc6256459b62b3"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -703,14 +707,14 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-a1fbee0d4a233ab4d13211c2b8cc06bd" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-a1fbee0d4a233ab4d13211c2b8cc06bd"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-c3513aadbd996a57ebf913aaa7841249" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-c3513aadbd996a57ebf913aaa7841249"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-032eeaf972011f5bb778199c88a913ff" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-032eeaf972011f5bb778199c88a913ff"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-1fcdc428c16b7d7c6bac5dd376e813f8" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-1fcdc428c16b7d7c6bac5dd376e813f8"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c7987cad543cf57f37b19318c73c6dd7" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c7987cad543cf57f37b19318c73c6dd7"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-a784b2b60ffb2024250b5886cfee6bf9" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a784b2b60ffb2024250b5886cfee6bf9"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-b681e4a726d990058dffb39f0bb7a547" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-b681e4a726d990058dffb39f0bb7a547"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-0893bd356759446ed0853211434a177b" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0893bd356759446ed0853211434a177b"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combination</h5>
@@ -719,8 +723,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-46386e7fea683911b7760db127106c09" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-46386e7fea683911b7760db127106c09"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#image-10d1c152207cf037f4d6561f09c16a97" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-10d1c152207cf037f4d6561f09c16a97"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -751,8 +755,8 @@ line 3 of code
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.html b/cont/menushortcuts/index.html
index eac7e04b4b..d64a524d74 100644
--- a/cont/menushortcuts/index.html
+++ b/cont/menushortcuts/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extra shortcuts :: Hugo Relearn Theme">
     <link href="../../cont/menushortcuts/index.print.html" rel="alternate" type="text/html" title="Menu extra shortcuts :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../cont/i18n/index.html" title="Multilingual and i18n (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../cont/imageeffects/index.html" title="Image Effects (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../cont/menushortcuts/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/menushortcuts.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../cont/i18n/index.html" title="Multilingual and i18n (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../cont/imageeffects/index.html" title="Image Effects (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../cont/menushortcuts/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/menushortcuts.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Menu extra shortcuts</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -315,12 +323,12 @@ However, if you want to keep the title but change its value, it can be overridde
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -474,13 +482,13 @@ However, if you want to keep the title but change its value, it can be overridde
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.print.html b/cont/menushortcuts/index.print.html
index 4e91c3ecac..b74e3772e8 100644
--- a/cont/menushortcuts/index.print.html
+++ b/cont/menushortcuts/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/menushortcuts/index.html" rel="canonical" type="text/html" title="Menu extra shortcuts :: Hugo Relearn Theme">
     <link href="../../cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extra shortcuts :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Menu extra shortcuts</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -206,8 +210,8 @@ However, if you want to keep the title but change its value, it can be overridde
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/cont/pages/index.html b/cont/pages/index.html
index 2a5651ffd6..12058f1855 100644
--- a/cont/pages/index.html
+++ b/cont/pages/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="Pages organization :: Hugo Relearn Theme">
     <link href="../../cont/pages/index.print.html" rel="alternate" type="text/html" title="Pages organization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../cont/archetypes/index.html" title="Archetypes (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../cont/index.html" title="Content (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../cont/pages/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/pages/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../cont/archetypes/index.html" title="Archetypes (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../cont/index.html" title="Content (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../cont/pages/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/pages/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Pages organization</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -188,8 +196,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-69b26cd28033f7b8552fc54c85e22933" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-69b26cd28033f7b8552fc54c85e22933"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-5196ecb60fb0f653f73ccf3af78288b8" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5196ecb60fb0f653f73ccf3af78288b8"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
 <p>Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flexible way</a> to handle order for your pages.</p>
 <p>The simplest way is to set <code>weight</code> parameter to a number.</p>
@@ -303,12 +311,12 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -462,13 +470,13 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/cont/pages/index.print.html b/cont/pages/index.print.html
index ac517dcf09..9fb9b0627a 100644
--- a/cont/pages/index.print.html
+++ b/cont/pages/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/pages/index.html" rel="canonical" type="text/html" title="Pages organization :: Hugo Relearn Theme">
     <link href="../../cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="Pages organization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Pages organization</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -150,8 +154,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-69b26cd28033f7b8552fc54c85e22933" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-69b26cd28033f7b8552fc54c85e22933"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-5196ecb60fb0f653f73ccf3af78288b8" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5196ecb60fb0f653f73ccf3af78288b8"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
 <p>Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flexible way</a> to handle order for your pages.</p>
 <p>The simplest way is to set <code>weight</code> parameter to a number.</p>
@@ -187,8 +191,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/cont/taxonomy/index.html b/cont/taxonomy/index.html
index 96dfa27650..7c4f50a4e5 100644
--- a/cont/taxonomy/index.html
+++ b/cont/taxonomy/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="Taxonomy :: Hugo Relearn Theme">
     <link href="../../cont/taxonomy/index.print.html" rel="alternate" type="text/html" title="Taxonomy :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/index.html" title="Shortcodes (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../cont/i18n/index.html" title="Multilingual and i18n (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../cont/taxonomy/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/taxonomy.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/index.html" title="Shortcodes (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../cont/i18n/index.html" title="Multilingual and i18n (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../cont/taxonomy/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/taxonomy.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Taxonomy</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -219,12 +227,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -378,13 +386,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/cont/taxonomy/index.print.html b/cont/taxonomy/index.print.html
index f74f0f013f..431d68dab5 100644
--- a/cont/taxonomy/index.print.html
+++ b/cont/taxonomy/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/taxonomy/index.html" rel="canonical" type="text/html" title="Taxonomy :: Hugo Relearn Theme">
     <link href="../../cont/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="Taxonomy :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Taxonomy</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -110,8 +114,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/css/format-print.css b/css/format-print.css
index 88fd3f4068..ffa880ed7f 100644
--- a/css/format-print.css
+++ b/css/format-print.css
@@ -39,10 +39,10 @@ pre {
     /* we don't need this while printing */
     display: none;
 }
-#body #breadcrumbs {
+#body .topbar-left {
     width: 100%;
 }
-#body #breadcrumbs .links {
+#body .topbar-left .breadcrumbs {
     overflow-x: hidden;
     visibility: visible;
 }
@@ -120,17 +120,6 @@ body,
     put as HTML into markdown */
     text-decoration-line: underline;
 }
-#toc-menu {
-    /* we don't need this while printing */
-    display: none;
-}
-#body #sidebar-toggle-span {
-    /* we don't need this while printing */
-    display: none;
-}
-#breadcrumbs .links {
-    display: inline;
-}
 #topbar{
     /* the header is sticky which is not suitable for print; */
     position: inherit; /* IE11 doesn't know "initial" here */
@@ -138,6 +127,12 @@ body,
 #topbar > div {
     background-color: rgba( 255, 255, 255, 1 ); /* IE11 doesn't know "initial" here */
 }
+#body .topbar-left {
+    border-width: 0;
+}
+.topbar-left .breadcrumbs {
+    display: inline;
+}
 .tags {
     display: none;
 }
diff --git a/css/ie.css b/css/ie.css
index c1a4bab005..d4abd1246a 100644
--- a/css/ie.css
+++ b/css/ie.css
@@ -70,27 +70,29 @@
 		border-top-right-radius: 0;
 		border-right-width: 0;
 	}
-	html[dir="rtl"] .topbar-button {
+	html[dir="rtl"] .topbar-right .topbar-button {
 		float: right;
 	}
-	.topbar-button > * {
+	html[dir="rtl"] .topbar-left .topbar-button {
+		float: left;
+	}
+	.topbar-right .topbar-button > * {
 		border-left: thin solid rgba( 134, 134, 134, .333 );
 	}
+	.topbar-left .topbar-button > * {
+		border-right: thin solid rgba( 134, 134, 134, .333 );
+	}
+	#body .topbar-left {
+		border-left-style: solid;
+		border-left-width: 1px;
+	}
+	html[dir="rtl"] #body .topbar-left {
+		float: left;
+	}
 	html[dir="rtl"] .topbar-prev i,
 	html[dir="rtl"] .topbar-next i {
 		transform: scaleX(1);
 	}
-	#toc-menu,
-	#sidebar-toggle-span {
-		border-right: thin solid rgba( 134, 134, 134, .333 );
-	}
-	#body #breadcrumbs {
-		border-left-style: solid;
-		border-left-width: 1px;
-	}
-	html[dir="rtl"] #body #breadcrumbs {
-		float: left;
-	}
 	.progress {
 		left: 1rem;
 	}
@@ -228,23 +230,23 @@
 
 	a,
 	.anchor,
-	#toc-menu,
+	.topbar-button button,
 	#searchresults .autocomplete-suggestion {
 		color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */
 	}
 
-	#body #breadcrumbs {
+	#body .topbar-left {
 		border-left-color: transparent; /* var(--MENU-TOPBAR-SEPARATOR-color) */
 	}
 	@media screen and (max-width: 48rem) {
-		#body #breadcrumbs {
+		#body .topbar-left {
 			border-left-color: transparent;
 		}
 	}
 
 	a:hover,
 	.anchor:hover,
-	#toc-menu:hover {
+	.topbar-button button:hover {
 		color: rgba( 32, 40, 145, 1 ); /* var(--MAIN-LINK-HOVER-color) */
 	}
 
@@ -526,7 +528,7 @@
 		background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
 	}
 
-	#body #breadcrumbs {
+	#body .topbar-left {
 		border-left-color: rgba( 125, 201, 3, 1 ); /* var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color) */
 	}
 
diff --git a/css/theme.css b/css/theme.css
index 834a658966..97b5d08ddb 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -395,12 +395,12 @@ dd {
     }
 }
 
-.links a:hover,
-.links a:active,
-.links a:focus,
-.links a:hover *,
-.links a:active *,
-.links a:focus *,
+.breadcrumbs a:hover,
+.breadcrumbs a:active,
+.breadcrumbs a:focus,
+.breadcrumbs a:hover *,
+.breadcrumbs a:active *,
+.breadcrumbs a:focus *,
 .toc-wrapper a:hover,
 .toc-wrapper a:active,
 .toc-wrapper a:focus,
@@ -982,44 +982,49 @@ td {
 
 .topbar-button {
     display: block;
-    float: right;
     position: relative;
+}
+.topbar-right .topbar-button {
+    float: right;
     top: 50%;
     transform: translateY(-50%);
 }
-html[dir="rtl"] .topbar-button {
+html[dir="rtl"] .topbar-right .topbar-button {
     float: left;
 }
+.topbar-left .topbar-button {
+    float: left;
+}
+html[dir="rtl"] .topbar-left .topbar-button {
+    float: right;
+}
 
 .topbar-button > * {
-    border-inline-start: thin solid rgba( 134, 134, 134, .333 );
+    display: inline-block;
     padding-left: 1rem;
     padding-right: 1rem;
 }
-html[dir="rtl"] .topbar-prev i,
-html[dir="rtl"] .topbar-next i {
-    transform: scaleX(-1);
+.topbar-right .topbar-button > * {
+    border-inline-start: thin solid rgba( 134, 134, 134, .333 );
 }
+.topbar-left .topbar-button > * {
+    border-inline-end: thin solid rgba( 134, 134, 134, .333 );
+}
+
 .topbar-button span i{
     color: rgba( 134, 134, 134, .333 );
 }
-
-#toc-menu{
-    cursor: pointer;
-}
-#toc-menu,
-#sidebar-toggle-span {
-    border-inline-end: thin solid rgba( 134, 134, 134, .333 );
-    padding-left: 1rem;
-    padding-right: 1rem;
+.topbar-button button{
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
 }
 
-#body #breadcrumbs {
+#body .topbar-left {
     border-inline-start-style: solid;
     border-inline-start-width: 1px;
     float: left;
     height: auto;
-    line-height: 1.2;
     margin-bottom: 0;
     overflow: hidden;
     position: relative;
@@ -1029,55 +1034,61 @@ html[dir="rtl"] .topbar-next i {
     white-space: nowrap;
     width: calc(100% - 5*3.25rem);
 }
-html[dir="rtl"] #body #breadcrumbs {
+html[dir="rtl"] #body .topbar-left {
     float: right;
 }
 @media screen and (max-width: 48rem) {
-    #body #breadcrumbs {
+    #body .topbar-left {
         border-inline-start-color: transparent;
         text-overflow: unset;
     }
 }
 
-#sidebar-toggle-span {
+html[dir="rtl"] .topbar-prev i,
+html[dir="rtl"] .topbar-next i {
+    transform: scaleX(-1);
+}
+.topbar-sidebar {
     display: none;
 }
+
 .progress {
     inset-inline-start: 1rem;
     top: 1rem;
 }
 @media screen and (max-width: 48rem) {
-    .mobile-support #sidebar-toggle-span {
-        display: inline;
+    .mobile-support .topbar-sidebar {
+        display: block;
     }
     .progress {
         inset-inline-start: 4.25rem;
     }
 }
 
-#body #breadcrumbs .links {
+#body .topbar-left .breadcrumbs {
     display: inline;
-    padding: 0 .75rem;
+    line-height: 1.2;
+    padding: 0 1rem;
 }
 @media screen and (max-width: 48rem) {
-    #body #breadcrumbs .links {
+    #body .topbar-left .breadcrumbs {
         /* we just hide the breadcrumbs instead of display: none;
         this makes sure that the breadcrumbs are still usable for
         accessability */
-        visibility: hidden;
+        margin-left: -1000px;
     }
 }
 
-#body #breadcrumbs .links * {
+#body .topbar-left .breadcrumbs * {
     display: inline-block;
     padding: 0;
 }
 
-#body #breadcrumbs .links meta {
+#body .topbar-left .breadcrumbs meta {
     display: none;
 }
 
-#body #breadcrumbs .links li:last-of-type {
+#body .topbar-left .breadcrumbs li:last-of-type {
     cursor: text;
 }
 
@@ -1583,7 +1594,7 @@ html[dir="rtl"] .menu-control span {
 }
 
 @media screen and (max-width: 48rem) {
-    #breadcrumbs .links {
+    .topbar-left .breadcrumbs {
         display: none;
     }
 }
diff --git a/css/variant.css b/css/variant.css
index 26387dc064..4f3669fb76 100644
--- a/css/variant.css
+++ b/css/variant.css
@@ -12,14 +12,14 @@ body {
 
 a,
 .anchor,
-#toc-menu,
+.topbar-button button,
 #searchresults .autocomplete-suggestion {
     color: var(--INTERNAL-MAIN-LINK-color);
 }
 
 a:hover,
 .anchor:hover,
-#toc-menu:hover {
+.topbar-button button:hover {
     color: var(--INTERNAL-MAIN-LINK-HOVER-color);
 }
 
@@ -253,11 +253,11 @@ table {
     background-color: var(--INTERNAL-MAIN-BG-color);
 }
 
-#body #breadcrumbs {
+#body .topbar-left {
     border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color);
 }
 @media screen and (max-width: 48rem) {
-    #body #breadcrumbs {
+    #body .topbar-left {
         border-inline-start-color: transparent;
     }
 }
diff --git a/dev/contributing/index.html b/dev/contributing/index.html
index 0b0b397616..bab20feb2f 100644
--- a/dev/contributing/index.html
+++ b/dev/contributing/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,39 +53,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../dev/maintaining/index.html" title="Maintaining (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../dev/index.html" title="Development (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../dev/contributing/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/contributing/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../dev/maintaining/index.html" title="Maintaining (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../dev/index.html" title="Development (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../dev/contributing/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/contributing/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Contributing</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -309,12 +317,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -472,13 +480,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/dev/contributing/index.print.html b/dev/contributing/index.print.html
index 60eaaf0f79..eabc77a1aa 100644
--- a/dev/contributing/index.print.html
+++ b/dev/contributing/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,18 +54,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Contributing</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -201,8 +205,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/dev/index.html b/dev/index.html
index f38f94c530..65534794b3 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../js/url.js?1694470592"></script>
-    <script src="../js/variant.js?1694470592"></script>
+    <link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../js/url.js?1694553014"></script>
+    <script src="../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,37 +53,41 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../dev/contributing/index.html" title="Contributing (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../shortcodes/tabs/index.html" title="Tabs (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../dev/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../dev/contributing/index.html" title="Contributing (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../shortcodes/tabs/index.html" title="Tabs (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../dev/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Development</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -189,12 +193,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../js/search.js?1694470592" defer></script>
+        <script src="../js/auto-complete.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -352,13 +356,13 @@
               }
             });
           </script>
-          <script async src="../js/github-buttons.js?1694470592"></script>
+          <script async src="../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../js/theme.js?1694470592" defer></script>
+    <script src="../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/dev/index.print.html b/dev/index.print.html
index 9aa04e02c6..77c6e071e2 100644
--- a/dev/index.print.html
+++ b/dev/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../js/url.js?1694470593"></script>
-    <script src="../js/variant.js?1694470593"></script>
+    <link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../js/url.js?1694553015"></script>
+    <script src="../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,17 +54,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Development</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -459,8 +463,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <h3 id="preview-imagesscreenshotpng">Preview <code>images/screenshot.png</code></h3>
-<p><a href="#image-0099fbf3bcc4778d1a6114805594d3b4" class="lightbox-link"><img src="../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-0099fbf3bcc4778d1a6114805594d3b4"><img src="../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-9d097415384c8a6494af302b86e22354" class="lightbox-link"><img src="../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-9d097415384c8a6494af302b86e22354"><img src="../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Content</strong>:</p>
 <p>Show the <a href="#demo-screenshot">Demo Screenshot</a> page on different devices and different themes. Composition of the different device screenshots into a template.</p>
@@ -489,11 +493,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location of <code>images/tn.png</code> is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <h3 id="preview-imagesheropng">Preview <code>images/hero.png</code></h3>
-<p><a href="#image-b6be6560afff4f346c371fb915b37cd3" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-b6be6560afff4f346c371fb915b37cd3"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-67060fe9ecd729aba2cd3f3b141ae49f" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-67060fe9ecd729aba2cd3f3b141ae49f"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
-<p><a href="#image-cf95e537aa207897751d2871b80ac128" class="lightbox-link"><img src="../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-cf95e537aa207897751d2871b80ac128"><img src="../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-82bac1f20bed13071568afefaac3758a" class="lightbox-link"><img src="../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-82bac1f20bed13071568afefaac3758a"><img src="../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 
@@ -504,8 +508,8 @@
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../js/theme.js?1694470593" defer></script>
+    <script src="../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/dev/maintaining/index.html b/dev/maintaining/index.html
index 49fb8c9234..03f4180a81 100644
--- a/dev/maintaining/index.html
+++ b/dev/maintaining/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,39 +53,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../dev/screenshots/index.html" title="Screenshots (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../dev/contributing/index.html" title="Contributing (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../dev/maintaining/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/maintaining/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../dev/screenshots/index.html" title="Screenshots (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../dev/contributing/index.html" title="Contributing (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../dev/maintaining/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/maintaining/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Maintaining</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -396,12 +404,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -559,13 +567,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/dev/maintaining/index.print.html b/dev/maintaining/index.print.html
index 39eb568e0f..14f23a3ca2 100644
--- a/dev/maintaining/index.print.html
+++ b/dev/maintaining/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,18 +54,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Maintaining</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -277,8 +281,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/dev/screenshots/index.html b/dev/screenshots/index.html
index 88dd246045..dc456bdef2 100644
--- a/dev/screenshots/index.html
+++ b/dev/screenshots/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,39 +53,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../dev/maintaining/index.html" title="Maintaining (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../dev/screenshots/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/screenshots/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../dev/maintaining/index.html" title="Maintaining (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../dev/screenshots/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/screenshots/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Screenshots</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -146,8 +154,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <h3 id="preview-imagesscreenshotpng">Preview <code>images/screenshot.png</code></h3>
-<p><a href="#image-0099fbf3bcc4778d1a6114805594d3b4" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-0099fbf3bcc4778d1a6114805594d3b4"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-9d097415384c8a6494af302b86e22354" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-9d097415384c8a6494af302b86e22354"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Content</strong>:</p>
 <p>Show the <a href="#demo-screenshot">Demo Screenshot</a> page on different devices and different themes. Composition of the different device screenshots into a template.</p>
@@ -176,11 +184,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location of <code>images/tn.png</code> is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <h3 id="preview-imagesheropng">Preview <code>images/hero.png</code></h3>
-<p><a href="#image-b6be6560afff4f346c371fb915b37cd3" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-b6be6560afff4f346c371fb915b37cd3"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-67060fe9ecd729aba2cd3f3b141ae49f" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-67060fe9ecd729aba2cd3f3b141ae49f"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
-<p><a href="#image-cf95e537aa207897751d2871b80ac128" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-cf95e537aa207897751d2871b80ac128"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-82bac1f20bed13071568afefaac3758a" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-82bac1f20bed13071568afefaac3758a"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 
@@ -268,12 +276,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -431,13 +439,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/dev/screenshots/index.print.html b/dev/screenshots/index.print.html
index 5e1f1ea26c..1cd3bb8d82 100644
--- a/dev/screenshots/index.print.html
+++ b/dev/screenshots/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,18 +54,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Screenshots</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -106,8 +110,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <h3 id="preview-imagesscreenshotpng">Preview <code>images/screenshot.png</code></h3>
-<p><a href="#image-0099fbf3bcc4778d1a6114805594d3b4" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-0099fbf3bcc4778d1a6114805594d3b4"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-9d097415384c8a6494af302b86e22354" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-9d097415384c8a6494af302b86e22354"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Content</strong>:</p>
 <p>Show the <a href="#demo-screenshot">Demo Screenshot</a> page on different devices and different themes. Composition of the different device screenshots into a template.</p>
@@ -136,11 +140,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location of <code>images/tn.png</code> is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <h3 id="preview-imagesheropng">Preview <code>images/hero.png</code></h3>
-<p><a href="#image-b6be6560afff4f346c371fb915b37cd3" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-b6be6560afff4f346c371fb915b37cd3"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-67060fe9ecd729aba2cd3f3b141ae49f" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-67060fe9ecd729aba2cd3f3b141ae49f"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
-<p><a href="#image-cf95e537aa207897751d2871b80ac128" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-cf95e537aa207897751d2871b80ac128"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-82bac1f20bed13071568afefaac3758a" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-82bac1f20bed13071568afefaac3758a"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 
@@ -150,8 +154,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/index.html b/index.html
index 712875370e..ec81b0fbae 100644
--- a/index.html
+++ b/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="./index.xml" rel="alternate" type="application/rss+xml" title="Hugo Relearn Theme">
     <link href="./index.print.html" rel="alternate" type="text/html" title="Hugo Relearn Theme">
-    <link href="./images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="./css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="./css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1694470592" rel="stylesheet">
-    <link href="./css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="./css/variant.css?1694470592" rel="stylesheet">
-    <link href="./css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="./css/ie.css?1694470592" rel="stylesheet">
-    <script src="./js/url.js?1694470592"></script>
-    <script src="./js/variant.js?1694470592"></script>
+    <link href="./css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="./css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="./css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1694553014" rel="stylesheet">
+    <link href="./css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="./css/variant.css?1694553014" rel="stylesheet">
+    <link href="./css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="./css/ie.css?1694553014" rel="stylesheet">
+    <script src="./js/url.js?1694553014"></script>
+    <script src="./js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,37 +54,45 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="./basics/index.html" title="Basics (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="./basics/index.html" title="Basics (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="./index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="./index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Hugo Relearn Theme</span><meta itemprop="position" content="1"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -110,8 +118,8 @@
 
 <p>A theme for <a href="https://gohugo.io/" target="_blank">Hugo</a> designed for documentation.</p>
 <p><a href="./basics/migration/">★ What&rsquo;s new in the latest release ★</a></p>
-<p><a href="#image-50872cec2b9c663ab6e892b0c381a98c" class="lightbox-link"><img src="images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-50872cec2b9c663ab6e892b0c381a98c"><img src="images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-b763ff57d681d1aa354fedcd58db4c24" class="lightbox-link"><img src="images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-b763ff57d681d1aa354fedcd58db4c24"><img src="images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="motivation">Motivation</h2>
 <p>The theme is a fork of the great <a href="https://github.com/matcornic/hugo-theme-learn" target="_blank">Learn theme</a> with the aim of fixing long outstanding bugs and adepting to latest Hugo features. As far as possible this theme tries to be a drop-in replacement for the Learn theme.</p>
 <h2 id="features">Features</h2>
@@ -284,12 +292,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="./js/auto-complete.js?1694470592" defer></script>
-        <script src="./js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="./js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="./js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="./js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="./js/search.js?1694470592" defer></script>
+        <script src="./js/auto-complete.js?1694553014" defer></script>
+        <script src="./js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="./js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="./js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="./js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="./js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -443,13 +451,13 @@
               }
             });
           </script>
-          <script async src="./js/github-buttons.js?1694470592"></script>
+          <script async src="./js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="./js/clipboard.min.js?1694470592" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="./js/theme.js?1694470592" defer></script>
+    <script src="./js/clipboard.min.js?1694553014" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="./js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/index.print.html b/index.print.html
index d5aab95332..71bdfc88fc 100644
--- a/index.print.html
+++ b/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/index.html" rel="canonical" type="text/html" title="Hugo Relearn Theme">
     <link href="./index.xml" rel="alternate" type="application/rss+xml" title="Hugo Relearn Theme">
-    <link href="./images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="./css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="./css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1694470593" rel="stylesheet">
-    <link href="./css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="./css/variant.css?1694470593" rel="stylesheet">
-    <link href="./css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="./css/format-print.css?1694470593" rel="stylesheet">
-    <link href="./css/ie.css?1694470593" rel="stylesheet">
-    <script src="./js/url.js?1694470593"></script>
-    <script src="./js/variant.js?1694470593"></script>
+    <link href="./css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="./css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="./css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1694553015" rel="stylesheet">
+    <link href="./css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="./css/variant.css?1694553015" rel="stylesheet">
+    <link href="./css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="./css/format-print.css?1694553015" rel="stylesheet">
+    <link href="./css/ie.css?1694553015" rel="stylesheet">
+    <script src="./js/url.js?1694553015"></script>
+    <script src="./js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,16 +55,20 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Hugo Relearn Theme</span><meta itemprop="position" content="1"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable home" tabindex="-1">
@@ -76,8 +80,8 @@
 
 <p>A theme for <a href="https://gohugo.io/" target="_blank">Hugo</a> designed for documentation.</p>
 <p><a href="./basics/migration/">★ What&rsquo;s new in the latest release ★</a></p>
-<p><a href="#image-50872cec2b9c663ab6e892b0c381a98c" class="lightbox-link"><img src="./images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-50872cec2b9c663ab6e892b0c381a98c"><img src="./images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-b763ff57d681d1aa354fedcd58db4c24" class="lightbox-link"><img src="./images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-b763ff57d681d1aa354fedcd58db4c24"><img src="./images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="motivation">Motivation</h2>
 <p>The theme is a fork of the great <a href="https://github.com/matcornic/hugo-theme-learn" target="_blank">Learn theme</a> with the aim of fixing long outstanding bugs and adepting to latest Hugo features. As far as possible this theme tries to be a drop-in replacement for the Learn theme.</p>
 <h2 id="features">Features</h2>
@@ -935,8 +939,8 @@
 
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
-<p><a href="#image-f5a1b5155d97cdf5bde1df4006cf0e43" class="lightbox-link"><img src="./basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f5a1b5155d97cdf5bde1df4006cf0e43"><img src="./basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-a3294e1c75be4125d12de7e6556a24fe" class="lightbox-link"><img src="./basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a3294e1c75be4125d12de7e6556a24fe"><img src="./basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
               <i class='fas fa-list'></i>
@@ -979,8 +983,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#image-20fc0e4d2e62a391e107b447fb159e78" class="lightbox-link"><img src="./basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-20fc0e4d2e62a391e107b447fb159e78"><img src="./basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8011f8b6c738ac4a1d5df55154bf2dd1" class="lightbox-link"><img src="./basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8011f8b6c738ac4a1d5df55154bf2dd1"><img src="./basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
 <p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
@@ -1134,8 +1138,8 @@
 <p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
-<p><a href="#image-fd75945eebdedad3c0b03990ffe75e76" class="lightbox-link"><img src="./basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fd75945eebdedad3c0b03990ffe75e76"><img src="./basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-db9c03b607d2000408dbf1c3b544e461" class="lightbox-link"><img src="./basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-db9c03b607d2000408dbf1c3b544e461"><img src="./basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="activate-print-support">Activate print support</h2>
 <p>You can activate print support to add the capability to print whole chapters or even the complete site. Just add the <code>PRINT</code> output format to your home, section and page in your <code>config.toml</code> as seen below:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
@@ -1180,8 +1184,8 @@ appearance, you will have to configure two parameters for the defined languages:
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If those params are not configured for a specific language, they will get their
 default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>The home button is going to look like this:</p>
-<p><a href="#image-2489fb31edb5eeaa773b851b1d005396" class="lightbox-link"><img src="./basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-2489fb31edb5eeaa773b851b1d005396"><img src="./basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-6f92400cab765b7878877f271a88e9c1" class="lightbox-link"><img src="./basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6f92400cab765b7878877f271a88e9c1"><img src="./basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 
@@ -1302,13 +1306,13 @@ If you have requirements to support IE and/or older browser versions, use one of
 <p>This interactive tool may help you to generate your own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-4d1a6b0809e42edc9497d9cd4f1c24b2" aria-controls="expandcontent-4d1a6b0809e42edc9497d9cd4f1c24b2" >
-    <label class="expand-label" for="expand-4d1a6b0809e42edc9497d9cd4f1c24b2" >
+    <input type="checkbox" id="expand-76a501384b1df0897ccf15798da60240" aria-controls="expandcontent-76a501384b1df0897ccf15798da60240" >
+    <label class="expand-label" for="expand-76a501384b1df0897ccf15798da60240" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="expandcontent-4d1a6b0809e42edc9497d9cd4f1c24b2" class="expand-content">
+    <div id="expandcontent-76a501384b1df0897ccf15798da60240" class="expand-content">
 
 <p>To get started, first select a color variant from the variant switch in the lower left sidebar that fits you best as a starting point.</p>
 <p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
@@ -2682,8 +2686,8 @@ window.variants && variants.generator( '#vargenerator' );
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-69b26cd28033f7b8552fc54c85e22933" class="lightbox-link"><img src="./cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-69b26cd28033f7b8552fc54c85e22933"><img src="./cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-5196ecb60fb0f653f73ccf3af78288b8" class="lightbox-link"><img src="./cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5196ecb60fb0f653f73ccf3af78288b8"><img src="./cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
 <p>Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flexible way</a> to handle order for your pages.</p>
 <p>The simplest way is to set <code>weight</code> parameter to a number.</p>
@@ -2726,8 +2730,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
-<p><a href="#image-990a14d7f3a272dd46c08c5f53ec1c2f" class="lightbox-link"><img src="./cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-990a14d7f3a272dd46c08c5f53ec1c2f"><img src="./cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-d2ae732c685c4c51749c92b0bd3d5058" class="lightbox-link"><img src="./cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d2ae732c685c4c51749c92b0bd3d5058"><img src="./cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a home page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -2737,8 +2741,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
-<p><a href="#image-918c2eb86af38d835f842f04ae9f7b55" class="lightbox-link"><img src="./cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-918c2eb86af38d835f842f04ae9f7b55"><img src="./cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-5148cbbdbc1082272f067bfe80fd0467" class="lightbox-link"><img src="./cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5148cbbdbc1082272f067bfe80fd0467"><img src="./cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a chapter page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -2750,8 +2754,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace the <code>X</code> with a number. Because this number will be used to generate the subtitle of the chapter page, set the number to a consecutive value starting at 1 for each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
-<p><a href="#image-d5e6ff631d22b90dc3cc363ed82effed" class="lightbox-link"><img src="./cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d5e6ff631d22b90dc3cc363ed82effed"><img src="./cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-d8721a273456bc3b61cde523d2f00d79" class="lightbox-link"><img src="./cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d8721a273456bc3b61cde523d2f00d79"><img src="./cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a default page, run either one of the following commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
@@ -3322,8 +3326,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-43c9c8c732259db20c76ae1cef41a99d" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-43c9c8c732259db20c76ae1cef41a99d"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-ac966b9c6cba558834e78c3e7280d018" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-ac966b9c6cba558834e78c3e7280d018"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image with Tooltip</h3>
@@ -3333,8 +3337,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-d491320552f18319ba5dee316666753d" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d491320552f18319ba5dee316666753d"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e0c1f7b1dae29ba1438fef734d752100" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e0c1f7b1dae29ba1438fef734d752100"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -3346,8 +3350,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-f18167e5ea9301f5be1015980bc08521" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f18167e5ea9301f5be1015980bc08521"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-39bb479a71b9ef45e22cfb36c40f5754" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-39bb479a71b9ef45e22cfb36c40f5754"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -3359,8 +3363,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-0ecfd20ad24a98cbdc3979dfb5e538dd" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-0ecfd20ad24a98cbdc3979dfb5e538dd"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0e2bfb1335f131be0d0ceb6d91ca705e" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0e2bfb1335f131be0d0ceb6d91ca705e"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -3368,8 +3372,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-df6c82bdd7afec7d684e5f7598fba7f9" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-df6c82bdd7afec7d684e5f7598fba7f9"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-16961e17586dd04e0ae3337350b2bd81" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-16961e17586dd04e0ae3337350b2bd81"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -3377,8 +3381,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-dffb14912833a36b46733b1543233581" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-dffb14912833a36b46733b1543233581"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-98a334d01d9d5cc014b8c4a69ba8e5a0" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-98a334d01d9d5cc014b8c4a69ba8e5a0"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -3389,8 +3393,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-63928e886afde3098e2aceb2138b6472" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-63928e886afde3098e2aceb2138b6472"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#image-329c3fe46a98ac4cc75b653b6da3cf19" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-329c3fe46a98ac4cc75b653b6da3cf19"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -3399,8 +3403,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-aced5629fd95dda8c589a3433dadc8c5" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-aced5629fd95dda8c589a3433dadc8c5"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#image-92df8b7ebd9363797adbe15bf2ad9648" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-92df8b7ebd9363797adbe15bf2ad9648"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -3409,8 +3413,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-fd67d9d7c59e013796c5c115b32f0dd5" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fd67d9d7c59e013796c5c115b32f0dd5"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0c009d56a037494e0f5f2c288280008c" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0c009d56a037494e0f5f2c288280008c"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -3419,8 +3423,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-abf215818b1ae52b5abbca8ac0b17989" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-abf215818b1ae52b5abbca8ac0b17989"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#image-88b1c0ce447d85c8d5fc6256459b62b3" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-88b1c0ce447d85c8d5fc6256459b62b3"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -3432,14 +3436,14 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-a1fbee0d4a233ab4d13211c2b8cc06bd" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-a1fbee0d4a233ab4d13211c2b8cc06bd"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-c3513aadbd996a57ebf913aaa7841249" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-c3513aadbd996a57ebf913aaa7841249"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-032eeaf972011f5bb778199c88a913ff" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-032eeaf972011f5bb778199c88a913ff"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-1fcdc428c16b7d7c6bac5dd376e813f8" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-1fcdc428c16b7d7c6bac5dd376e813f8"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c7987cad543cf57f37b19318c73c6dd7" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c7987cad543cf57f37b19318c73c6dd7"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-a784b2b60ffb2024250b5886cfee6bf9" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a784b2b60ffb2024250b5886cfee6bf9"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-b681e4a726d990058dffb39f0bb7a547" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-b681e4a726d990058dffb39f0bb7a547"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-0893bd356759446ed0853211434a177b" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0893bd356759446ed0853211434a177b"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combination</h5>
@@ -3448,8 +3452,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-46386e7fea683911b7760db127106c09" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-46386e7fea683911b7760db127106c09"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#image-10d1c152207cf037f4d6561f09c16a97" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-10d1c152207cf037f4d6561f09c16a97"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -3489,13 +3493,13 @@ line 3 of code
 <p>Without any settings in your <code>config.toml</code> this defaults to</p>
 
   
-<div class="tab-panel" data-tab-group="781a17795e0250505cec4a833883d094">
+<div class="tab-panel" data-tab-group="77be7fa2f6e4eb27046b21de720b6201">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('781a17795e0250505cec4a833883d094','configtoml')"
+      onclick="switchTab('77be7fa2f6e4eb27046b21de720b6201','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -3519,13 +3523,13 @@ line 3 of code
 </div><p>This can be overridden in a pages frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="095eb24d60a5de423de3d3725ad645e0">
+<div class="tab-panel" data-tab-group="c0f283707930f36b50dbb658dab17b69">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('095eb24d60a5de423de3d3725ad645e0','frontmatter')"
+      onclick="switchTab('c0f283707930f36b50dbb658dab17b69','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -3548,13 +3552,13 @@ line 3 of code
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="552c3879071dac6226d38180e8d010c3">
+<div class="tab-panel" data-tab-group="5c51d1681feee80c41d76970f53304a9">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('552c3879071dac6226d38180e8d010c3','url')"
+      onclick="switchTab('5c51d1681feee80c41d76970f53304a9','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -3574,13 +3578,13 @@ line 3 of code
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="51e2661fc1b0af4d2847187e5478b313">
+<div class="tab-panel" data-tab-group="36d09abe1db2a90f3058ab6b625fe09d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('51e2661fc1b0af4d2847187e5478b313','result')"
+      onclick="switchTab('36d09abe1db2a90f3058ab6b625fe09d','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -3603,13 +3607,13 @@ line 3 of code
 </div><p>This ends up in the following HTML where the parameter are converted to CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="49df380363453799a529d13a1bc27b4d">
+<div class="tab-panel" data-tab-group="5dbc3bed8b73a74551adf4765ac68b55">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('49df380363453799a529d13a1bc27b4d','html')"
+      onclick="switchTab('5dbc3bed8b73a74551adf4765ac68b55','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -3786,8 +3790,8 @@ However, if you want to keep the title but change its value, it can be overridde
 <li>Automatic menu generation from multilingual content</li>
 <li>In-browser language switching</li>
 </ul>
-<p><a href="#image-f53abeac1c732386e6f242f352ee5ca2" class="lightbox-link"><img src="./cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-f53abeac1c732386e6f242f352ee5ca2"><img src="./cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c96a4da35b8879cd5616fa9e7f6e5d20" class="lightbox-link"><img src="./cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c96a4da35b8879cd5616fa9e7f6e5d20"><img src="./cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
 <p>After learning <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Hugo handle multilingual websites</a>, define your languages in your <code>config.toml</code> file.</p>
 <p>For example with current English and Piratized English website.</p>
@@ -5178,13 +5182,13 @@ So its content is used as description.</p>
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-507a167578ffe20b78f303486dc3591a" aria-controls="expandcontent-507a167578ffe20b78f303486dc3591a" >
-    <label class="expand-label" for="expand-507a167578ffe20b78f303486dc3591a" >
+    <input type="checkbox" id="expand-6daa64c4cc543c00dcaa5337880d2681" aria-controls="expandcontent-6daa64c4cc543c00dcaa5337880d2681" >
+    <label class="expand-label" for="expand-6daa64c4cc543c00dcaa5337880d2681" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-507a167578ffe20b78f303486dc3591a" class="expand-content">
+    <div id="expandcontent-6daa64c4cc543c00dcaa5337880d2681" class="expand-content">
 
 <p>Thank you!</p>
 <p>That&rsquo;s some text with a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -5311,26 +5315,26 @@ So its content is used as description.</p>
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-7bc1e43d431b2f03634f317fa1781d0b" aria-controls="expandcontent-7bc1e43d431b2f03634f317fa1781d0b" >
-    <label class="expand-label" for="expand-7bc1e43d431b2f03634f317fa1781d0b" >
+    <input type="checkbox" id="expand-4cab21919fdde69422911a1fbb994775" aria-controls="expandcontent-4cab21919fdde69422911a1fbb994775" >
+    <label class="expand-label" for="expand-4cab21919fdde69422911a1fbb994775" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-7bc1e43d431b2f03634f317fa1781d0b" class="expand-content">
+    <div id="expandcontent-4cab21919fdde69422911a1fbb994775" class="expand-content">
 <p>
 Yes, you did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-3a05e66c41443b81cff5b846f40b2321" aria-controls="expandcontent-3a05e66c41443b81cff5b846f40b2321"  checked>
-    <label class="expand-label" for="expand-3a05e66c41443b81cff5b846f40b2321" >
+    <input type="checkbox" id="expand-88953b56a350eadda70c38b7fe79faef" aria-controls="expandcontent-88953b56a350eadda70c38b7fe79faef"  checked>
+    <label class="expand-label" for="expand-88953b56a350eadda70c38b7fe79faef" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-3a05e66c41443b81cff5b846f40b2321" class="expand-content">
+    <div id="expandcontent-88953b56a350eadda70c38b7fe79faef" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -5351,13 +5355,13 @@ No need to press you!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-4bbb02415dece67aac5a4cd27ae094a8" aria-controls="expandcontent-4bbb02415dece67aac5a4cd27ae094a8" >
-    <label class="expand-label" for="expand-4bbb02415dece67aac5a4cd27ae094a8" >
+    <input type="checkbox" id="expand-26910ee67cd46a47e83d31aaabd4bc37" aria-controls="expandcontent-26910ee67cd46a47e83d31aaabd4bc37" >
+    <label class="expand-label" for="expand-26910ee67cd46a47e83d31aaabd4bc37" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="expandcontent-4bbb02415dece67aac5a4cd27ae094a8" class="expand-content">
+    <div id="expandcontent-26910ee67cd46a47e83d31aaabd4bc37" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -5386,13 +5390,13 @@ No need to press you!</div>
 <p>The <code>highlight</code> shortcode renders your code with a syntax highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="16d01fe05bab251345722223f40d4b25">
+<div class="tab-panel" data-tab-group="71052505527c7171a1c2c669c84af5ef">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('16d01fe05bab251345722223f40d4b25','python')"
+      onclick="switchTab('71052505527c7171a1c2c669c84af5ef','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -5615,13 +5619,13 @@ No need to press you!</div>
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="fd51bc9290a64e08cf0a9da47b1b940c">
+<div class="tab-panel" data-tab-group="6f6848163b690efd265cbc54821d6350">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('fd51bc9290a64e08cf0a9da47b1b940c','python')"
+      onclick="switchTab('6f6848163b690efd265cbc54821d6350','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -7160,7 +7164,7 @@ Electricity grid,H2 conversion,27.14
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-bbabeb264b3c4ca2f77988f973280a31"
+    id="openapi-955e42b69059a31d8b40541b7060a50c"
     openapi-url="./shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -7266,13 +7270,13 @@ Electricity grid,H2 conversion,27.14
 <p>To use formatted parameter, add this in your <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="38ab886d5e194af5e5d8c931c163ae44">
+<div class="tab-panel" data-tab-group="7e5135a7fa7b86bcab53ed472737f858">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('38ab886d5e194af5e5d8c931c163ae44','configtoml')"
+      onclick="switchTab('7e5135a7fa7b86bcab53ed472737f858','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -7308,13 +7312,13 @@ Electricity grid,H2 conversion,27.14
 <p>This is especially useful if you want to flag your code example with an explicit language.</p>
 <p>If you want multiple tabs grouped together you can wrap your tabs into the <a href="./shortcodes/tabs/"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="23ccf769244f7bfbb6d24ba50a6eeec5">
+<div class="tab-panel" data-tab-group="83eb6b21d8c459b33d1d4a9861b7d396">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('23ccf769244f7bfbb6d24ba50a6eeec5','c')"
+      onclick="switchTab('83eb6b21d8c459b33d1d4a9861b7d396','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -7428,13 +7432,13 @@ Electricity grid,H2 conversion,27.14
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="9f2f4d93526a8745776273197ad75ada">
+<div class="tab-panel" data-tab-group="fc304256e1ca82da47900f92107df06d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('9f2f4d93526a8745776273197ad75ada','code')"
+      onclick="switchTab('fc304256e1ca82da47900f92107df06d','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -7459,13 +7463,13 @@ Electricity grid,H2 conversion,27.14
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="5bffd88e4320d9398caffddb29bb2a40">
+<div class="tab-panel" data-tab-group="e04a80d5b80bb506370a368c3ab44384">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="emstrongmixedstrongem"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('5bffd88e4320d9398caffddb29bb2a40','emstrongmixedstrongem')"
+      onclick="switchTab('e04a80d5b80bb506370a368c3ab44384','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -7513,13 +7517,13 @@ Electricity grid,H2 conversion,27.14
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">the</span> <span class="nx">background</span> <span class="nx">to</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">of</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">and</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">icon</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="6cd2bf081629e59199d79671d3d7c329">
+<div class="tab-panel" data-tab-group="0ad9dcd84d13f9a19ef9911f674b7a1b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-colored-style')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -7529,7 +7533,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-color')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -7539,7 +7543,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','default-style-and-color')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style and color</div>
@@ -7549,7 +7553,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> just severity style</div>
@@ -7559,7 +7563,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> severity style and color</div>
@@ -7630,13 +7634,13 @@ Electricity grid,H2 conversion,27.14
 <p>This comes in handy eg. for providing code snippets for multiple languages.</p>
 <p>If you just want a single tab you can instead call the <a href="./shortcodes/tab/"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="272877369aa09ff10af68255254afa64">
+<div class="tab-panel" data-tab-group="edd488b627873e84bb9b2ef90d4b3dc0">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','py')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -7646,7 +7650,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','sh')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -7656,7 +7660,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','c')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -7813,13 +7817,13 @@ Electricity grid,H2 conversion,27.14
 <p>See what happens to the tab views while you select different tabs.</p>
 <p>While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.</p>
 
-<div class="tab-panel" data-tab-group="3acabc0ff716d55af20992733586422d">
+<div class="tab-panel" data-tab-group="c738eaf37a63a97d97618ec05d118ec4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-a-tab-view-1')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -7829,7 +7833,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-a-tab-view-2')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -7839,7 +7843,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-b')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -8239,8 +8243,8 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="./js/clipboard.min.js?1694470593" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1694470593" defer></script>
+    <script src="./js/clipboard.min.js?1694553015" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1694553015" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -8269,27 +8273,27 @@ Electricity grid,H2 conversion,27.14
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="./js/mathjax/tex-mml-chtml.js?1694470593"></script>
-    <script src="./js/d3/d3-color.min.js?1694470593" defer></script>
-    <script src="./js/d3/d3-dispatch.min.js?1694470593" defer></script>
-    <script src="./js/d3/d3-drag.min.js?1694470593" defer></script>
-    <script src="./js/d3/d3-ease.min.js?1694470593" defer></script>
-    <script src="./js/d3/d3-interpolate.min.js?1694470593" defer></script>
-    <script src="./js/d3/d3-selection.min.js?1694470593" defer></script>
-    <script src="./js/d3/d3-timer.min.js?1694470593" defer></script>
-    <script src="./js/d3/d3-transition.min.js?1694470593" defer></script>
-    <script src="./js/d3/d3-zoom.min.js?1694470593" defer></script>
-    <script src="./js/js-yaml.min.js?1694470593" defer></script>
-    <script src="./js/mermaid.min.js?1694470593" defer></script>
+    <script id="MathJax-script" async src="./js/mathjax/tex-mml-chtml.js?1694553015"></script>
+    <script src="./js/d3/d3-color.min.js?1694553015" defer></script>
+    <script src="./js/d3/d3-dispatch.min.js?1694553015" defer></script>
+    <script src="./js/d3/d3-drag.min.js?1694553015" defer></script>
+    <script src="./js/d3/d3-ease.min.js?1694553015" defer></script>
+    <script src="./js/d3/d3-interpolate.min.js?1694553015" defer></script>
+    <script src="./js/d3/d3-selection.min.js?1694553015" defer></script>
+    <script src="./js/d3/d3-timer.min.js?1694553015" defer></script>
+    <script src="./js/d3/d3-transition.min.js?1694553015" defer></script>
+    <script src="./js/d3/d3-zoom.min.js?1694553015" defer></script>
+    <script src="./js/js-yaml.min.js?1694553015" defer></script>
+    <script src="./js/mermaid.min.js?1694553015" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="./js/swagger-ui/swagger-ui-bundle.js?1694470593" defer></script>
-    <script src="./js/swagger-ui/swagger-ui-standalone-preset.js?1694470593" defer></script>
+    <script src="./js/swagger-ui/swagger-ui-bundle.js?1694553015" defer></script>
+    <script src="./js/swagger-ui/swagger-ui-standalone-preset.js?1694553015" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694470593", assetsBuster:  1694470593  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694553015", assetsBuster:  1694553015  };
     </script>
-    <script src="./js/theme.js?1694470593" defer></script>
+    <script src="./js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/js/theme.js b/js/theme.js
index a17927237d..5aae4a9c97 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -886,7 +886,7 @@ function showNav(){
 }
 
 function showToc(){
-    var t = document.querySelector( '#toc-menu' );
+    var t = document.querySelector( '.topbar-toc' );
     if( !t ){
         // we may not have a toc
         return;
@@ -941,13 +941,10 @@ function initToc(){
     document.addEventListener( 'keydown', tocShortcutHandler );
 
     document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav );
-    document.querySelector( '#sidebar-toggle' ).addEventListener( 'click', showNav );
     document.querySelector( '#toc-overlay' ).addEventListener( 'click', showToc );
-    var t = document.querySelector( '#toc-menu' );
     var p = document.querySelector( '.progress' );
-    if( t && p ){
+    if( p ){
         // we may not have a toc
-        t.addEventListener( 'click', showToc );
         p.addEventListener( 'click', showToc );
     }
 
@@ -1116,11 +1113,6 @@ function scrollToPositions() {
 
 function mark() {
 	// mark some additional stuff as searchable
-	var topbarLinks = document.querySelectorAll( '#topbar :not(.topbar-button) a' );
-	for( var i = 0; i < topbarLinks.length; i++ ){
-		topbarLinks[i].classList.add( 'highlight' );
-	}
-
 	var bodyInnerLinks = document.querySelectorAll( '#body-inner a:not(.lightbox-link):not(.btn):not(.lightbox-back)' );
 	for( var i = 0; i < bodyInnerLinks.length; i++ ){
 		bodyInnerLinks[i].classList.add( 'highlight' );
diff --git a/more/credits/index.html b/more/credits/index.html
index 09c5c61973..1c54ea7522 100644
--- a/more/credits/index.html
+++ b/more/credits/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="../../more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Credits :: Hugo Relearn Theme">
     <link href="../../more/credits/index.print.html" rel="alternate" type="text/html" title="Credits :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,38 +54,46 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../more/credits/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/more/credits/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../more/credits/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/more/credits/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Credits</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -249,12 +257,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -408,13 +416,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/more/credits/index.print.html b/more/credits/index.print.html
index 56c1fd6d24..7996059b4b 100644
--- a/more/credits/index.print.html
+++ b/more/credits/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/more/credits/index.html" rel="canonical" type="text/html" title="Credits :: Hugo Relearn Theme">
     <link href="../../more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Credits :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,17 +55,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Credits</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -139,8 +143,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/pir/404.html b/pir/404.html
index fe77a75939..bf68c6a3c6 100644
--- a/pir/404.html
+++ b/pir/404.html
@@ -9,20 +9,20 @@
     <meta name="author" content="Sören Weber">
     <title>404 Page not found :: Cap&#39;n Hugo Relearrrn Theme</title>
     <base href="https://McShelby.github.io/hugo-theme-relearn/">
-    <link href="../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../js/url.js?1694470593"></script>
-    <script src="../js/variant.js?1694470593"></script>
+    <link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../js/url.js?1694553015"></script>
+    <script src="../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
diff --git a/pir/basics/configuration/index.html b/pir/basics/configuration/index.html
index 7d224dbe2e..92f79d1dd8 100644
--- a/pir/basics/configuration/index.html
+++ b/pir/basics/configuration/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/configuration/index.print.html" rel="alternate" type="text/html" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/basics/customization/index.html" title="Customizat&#39;n (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/basics/installation/index.html" title="Installat&#39;n (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/basics/configuration/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/configuration/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/basics/customization/index.html" title="Customizat&#39;n (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/basics/installation/index.html" title="Installat&#39;n (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/basics/configuration/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/configuration/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Configurrrat&#39;n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -240,8 +248,8 @@
 <p>Ye can add a dedicated search plank fer yer plank by add'n th' <code>SEARCHPAGE</code> outputformat t' yer home plank by add'n th' follow'n lines 'n yer <code>config.toml</code> file.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
-<p><a href="#image-5ee5cb6ae5798adf9ede8926f8141368" class="lightbox-link"><img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-5ee5cb6ae5798adf9ede8926f8141368"><img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-bb1514dbf171302f8148be22b20a4bb9" class="lightbox-link"><img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-bb1514dbf171302f8148be22b20a4bb9"><img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="activate-print-support">Activate print support</h2>
 <p>Ye can activate print support t' add th' capability t' print whole chapters or even th' complete ship. Just add th' <code>PRINT</code> output format t' yer home, section an' plank 'n yer <code>config.toml</code> as seen below:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
@@ -286,8 +294,8 @@ appearance, ye will have t' configure two parameters fer th' defined languages:<
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If those params be not configured fer a specific language, they will get their
 default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
-<p><a href="#image-d1c8f189a054aba457fd59f070a55aef" class="lightbox-link"><img src="../../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d1c8f189a054aba457fd59f070a55aef"><img src="../../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-f4f68aba34cd783c808d499c9dfac3d7" class="lightbox-link"><img src="../../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-f4f68aba34cd783c808d499c9dfac3d7"><img src="../../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -376,12 +384,12 @@ default values:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470596" defer></script>
-        <script src="../../../js/search.js?1694470596" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -535,13 +543,13 @@ default values:</p>
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470596"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470596" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470596" defer></script>
-    <script src="../../../js/theme.js?1694470596" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/basics/configuration/index.print.html b/pir/basics/configuration/index.print.html
index 17b56b3e22..1da81a76a6 100644
--- a/pir/basics/configuration/index.print.html
+++ b/pir/basics/configuration/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="canonical" type="text/html" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Configurrrat&#39;n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -192,8 +196,8 @@
 <p>Ye can add a dedicated search plank fer yer plank by add'n th' <code>SEARCHPAGE</code> outputformat t' yer home plank by add'n th' follow'n lines 'n yer <code>config.toml</code> file.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
-<p><a href="#image-5ee5cb6ae5798adf9ede8926f8141368" class="lightbox-link"><img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-5ee5cb6ae5798adf9ede8926f8141368"><img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-bb1514dbf171302f8148be22b20a4bb9" class="lightbox-link"><img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-bb1514dbf171302f8148be22b20a4bb9"><img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="activate-print-support">Activate print support</h2>
 <p>Ye can activate print support t' add th' capability t' print whole chapters or even th' complete ship. Just add th' <code>PRINT</code> output format t' yer home, section an' plank 'n yer <code>config.toml</code> as seen below:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
@@ -238,8 +242,8 @@ appearance, ye will have t' configure two parameters fer th' defined languages:<
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If those params be not configured fer a specific language, they will get their
 default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
-<p><a href="#image-d1c8f189a054aba457fd59f070a55aef" class="lightbox-link"><img src="../../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d1c8f189a054aba457fd59f070a55aef"><img src="../../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-f4f68aba34cd783c808d499c9dfac3d7" class="lightbox-link"><img src="../../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-f4f68aba34cd783c808d499c9dfac3d7"><img src="../../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -250,8 +254,8 @@ default values:</p>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.html b/pir/basics/customization/index.html
index 66521c8f71..144d089f6e 100644
--- a/pir/basics/customization/index.html
+++ b/pir/basics/customization/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/customization/index.print.html" rel="alternate" type="text/html" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/basics/generator/index.html" title="Stylesheet generrrat&#39;r (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/basics/configuration/index.html" title="Configurrrat&#39;n (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/basics/customization/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/customization/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/basics/generator/index.html" title="Stylesheet generrrat&#39;r (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/basics/configuration/index.html" title="Configurrrat&#39;n (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/basics/customization/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/customization/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Customizat&#39;n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -300,12 +308,12 @@ If ye have requirements t' support IE and/or older browser versions, use one o'
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470595" defer></script>
-        <script src="../../../js/search.js?1694470595" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -459,13 +467,13 @@ If ye have requirements t' support IE and/or older browser versions, use one o'
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470596"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470596" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470596" defer></script>
-    <script src="../../../js/theme.js?1694470596" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.print.html b/pir/basics/customization/index.print.html
index 7cef68d105..d0d6f6823f 100644
--- a/pir/basics/customization/index.print.html
+++ b/pir/basics/customization/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="canonical" type="text/html" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Customizat&#39;n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -182,8 +186,8 @@ If ye have requirements t' support IE and/or older browser versions, use one o'
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/basics/generator/index.html b/pir/basics/generator/index.html
index 5ee507148b..d82669b5a3 100644
--- a/pir/basics/generator/index.html
+++ b/pir/basics/generator/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/generator/index.print.html" rel="alternate" type="text/html" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,38 +54,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/basics/history/index.html" title="Historrry (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/basics/customization/index.html" title="Customizat&#39;n (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/basics/generator/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/generator/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/basics/history/index.html" title="Historrry (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/basics/customization/index.html" title="Customizat&#39;n (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/basics/generator/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/generator/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Stylesheet generrrat&#39;r</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -99,13 +103,13 @@
 <p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-0100fcbb2a9a1157765e675941d80a89" aria-controls="expandcontent-0100fcbb2a9a1157765e675941d80a89" >
-    <label class="expand-label" for="expand-0100fcbb2a9a1157765e675941d80a89" >
+    <input type="checkbox" id="expand-2a9ac36caece8ebd218edd67b8825c81" aria-controls="expandcontent-2a9ac36caece8ebd218edd67b8825c81" >
+    <label class="expand-label" for="expand-2a9ac36caece8ebd218edd67b8825c81" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="expandcontent-0100fcbb2a9a1157765e675941d80a89" class="expand-content">
+    <div id="expandcontent-2a9ac36caece8ebd218edd67b8825c81" class="expand-content">
 
 <p>T' get started, first select a color variant from th' variant switch 'n th' lower left sidebar that fits ye best as a start'n point.</p>
 <p>Th' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph <strong>an' th' plank</strong> will update accordingly.</p>
@@ -238,12 +242,12 @@ window.variants && variants.generator( '#vargenerator' );
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470596" defer></script>
-        <script src="../../../js/search.js?1694470596" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -397,27 +401,27 @@ window.variants && variants.generator( '#vargenerator' );
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470596"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470596" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470596" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1694470596" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1694470596" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1694470596" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1694470596" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1694470596" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1694470596" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1694470596" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1694470596" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1694470596" defer></script>
-    <script src="../../../js/js-yaml.min.js?1694470596" defer></script>
-    <script src="../../../js/mermaid.min.js?1694470596" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1694553016" defer></script>
+    <script src="../../../js/js-yaml.min.js?1694553016" defer></script>
+    <script src="../../../js/mermaid.min.js?1694553016" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1694470596" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/basics/generator/index.print.html b/pir/basics/generator/index.print.html
index 1456b267b4..97d47ce1bc 100644
--- a/pir/basics/generator/index.print.html
+++ b/pir/basics/generator/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="canonical" type="text/html" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Stylesheet generrrat&#39;r</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -80,13 +84,13 @@
 <p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-0100fcbb2a9a1157765e675941d80a89" aria-controls="expandcontent-0100fcbb2a9a1157765e675941d80a89" >
-    <label class="expand-label" for="expand-0100fcbb2a9a1157765e675941d80a89" >
+    <input type="checkbox" id="expand-2a9ac36caece8ebd218edd67b8825c81" aria-controls="expandcontent-2a9ac36caece8ebd218edd67b8825c81" >
+    <label class="expand-label" for="expand-2a9ac36caece8ebd218edd67b8825c81" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="expandcontent-0100fcbb2a9a1157765e675941d80a89" class="expand-content">
+    <div id="expandcontent-2a9ac36caece8ebd218edd67b8825c81" class="expand-content">
 
 <p>T' get started, first select a color variant from th' variant switch 'n th' lower left sidebar that fits ye best as a start'n point.</p>
 <p>Th' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph <strong>an' th' plank</strong> will update accordingly.</p>
@@ -141,22 +145,22 @@ window.variants && variants.generator( '#vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1694470597" defer></script>
-    <script src="../../../js/js-yaml.min.js?1694470597" defer></script>
-    <script src="../../../js/mermaid.min.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1694553018" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1694553018" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1694553018" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1694553018" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1694553018" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1694553018" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1694553018" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1694553018" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1694553018" defer></script>
+    <script src="../../../js/js-yaml.min.js?1694553018" defer></script>
+    <script src="../../../js/mermaid.min.js?1694553018" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.html b/pir/basics/history/index.html
index 2b0d7bb10f..3924ceffd0 100644
--- a/pir/basics/history/index.html
+++ b/pir/basics/history/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/history/index.xml" rel="alternate" type="application/rss+xml" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/history/index.print.html" rel="alternate" type="text/html" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/cont/index.html" title="Rambl&#39;n (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/basics/generator/index.html" title="Stylesheet generrrat&#39;r (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/basics/history/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/history/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/cont/index.html" title="Rambl&#39;n (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/basics/generator/index.html" title="Stylesheet generrrat&#39;r (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/basics/history/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/history/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Historrry</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -2077,12 +2085,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470596" defer></script>
-        <script src="../../../js/search.js?1694470596" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -2236,13 +2244,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470596"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470596" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470596" defer></script>
-    <script src="../../../js/theme.js?1694470596" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.print.html b/pir/basics/history/index.print.html
index d0a93f8487..412ed0c9ca 100644
--- a/pir/basics/history/index.print.html
+++ b/pir/basics/history/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="canonical" type="text/html" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/history/index.xml" rel="alternate" type="application/rss+xml" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Historrry</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -1304,8 +1308,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/basics/index.html b/pir/basics/index.html
index 03610a9d6a..f89ce64324 100644
--- a/pir/basics/index.html
+++ b/pir/basics/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/basics/index.print.html" rel="alternate" type="text/html" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,37 +54,41 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../pir/basics/migration/index.html" title="What&#39;s New (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../pir/basics/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../pir/basics/migration/index.html" title="What&#39;s New (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../pir/basics/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Basics</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -185,12 +189,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470595" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470595" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470595" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470595" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470595" defer></script>
-        <script src="../../js/search.js?1694470595" defer></script>
+        <script src="../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -344,13 +348,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470595"></script>
+          <script async src="../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470595" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470595" defer></script>
-    <script src="../../js/theme.js?1694470595" defer></script>
+    <script src="../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/basics/index.print.html b/pir/basics/index.print.html
index 8cee23da08..2ecf8e246e 100644
--- a/pir/basics/index.print.html
+++ b/pir/basics/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="canonical" type="text/html" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../js/url.js?1694470597"></script>
-    <script src="../../js/variant.js?1694470597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../js/url.js?1694553017"></script>
+    <script src="../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,17 +55,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Basics</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -846,8 +850,8 @@
 
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
-<p><a href="#image-ea47d2936f07e317250c72b0c8c1c94d" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-ea47d2936f07e317250c72b0c8c1c94d"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-62dfaa745124a7099d3250d9dd6cebed" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-62dfaa745124a7099d3250d9dd6cebed"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -892,8 +896,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Cap'n Hugo theme be all about an' th' core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#image-979ad292bca7564748b2c9744eba26dd" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-979ad292bca7564748b2c9744eba26dd"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e831cf0c51acbd820d5e4b39ecbf6579" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e831cf0c51acbd820d5e4b39ecbf6579"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By open'n th' given file, ye should see th' property <code>chapter=true</code> on top, mean'n this plank be a <em>chapter</em>.</p>
 <p>By default all chapters an' planks be created as a draft. If ye want t' render these planks, remove th' property <code>draft: true</code> from th' metadata.</p>
@@ -1049,8 +1053,8 @@
 <p>Ye can add a dedicated search plank fer yer plank by add'n th' <code>SEARCHPAGE</code> outputformat t' yer home plank by add'n th' follow'n lines 'n yer <code>config.toml</code> file.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
-<p><a href="#image-5ee5cb6ae5798adf9ede8926f8141368" class="lightbox-link"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-5ee5cb6ae5798adf9ede8926f8141368"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-bb1514dbf171302f8148be22b20a4bb9" class="lightbox-link"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-bb1514dbf171302f8148be22b20a4bb9"><img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="activate-print-support">Activate print support</h2>
 <p>Ye can activate print support t' add th' capability t' print whole chapters or even th' complete ship. Just add th' <code>PRINT</code> output format t' yer home, section an' plank 'n yer <code>config.toml</code> as seen below:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
@@ -1095,8 +1099,8 @@ appearance, ye will have t' configure two parameters fer th' defined languages:<
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If those params be not configured fer a specific language, they will get their
 default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
-<p><a href="#image-d1c8f189a054aba457fd59f070a55aef" class="lightbox-link"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d1c8f189a054aba457fd59f070a55aef"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-f4f68aba34cd783c808d499c9dfac3d7" class="lightbox-link"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-f4f68aba34cd783c808d499c9dfac3d7"><img src="../../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -1221,13 +1225,13 @@ If ye have requirements t' support IE and/or older browser versions, use one o'
 <p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-0100fcbb2a9a1157765e675941d80a89" aria-controls="expandcontent-0100fcbb2a9a1157765e675941d80a89" >
-    <label class="expand-label" for="expand-0100fcbb2a9a1157765e675941d80a89" >
+    <input type="checkbox" id="expand-2a9ac36caece8ebd218edd67b8825c81" aria-controls="expandcontent-2a9ac36caece8ebd218edd67b8825c81" >
+    <label class="expand-label" for="expand-2a9ac36caece8ebd218edd67b8825c81" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="expandcontent-0100fcbb2a9a1157765e675941d80a89" class="expand-content">
+    <div id="expandcontent-2a9ac36caece8ebd218edd67b8825c81" class="expand-content">
 
 <p>T' get started, first select a color variant from th' variant switch 'n th' lower left sidebar that fits ye best as a start'n point.</p>
 <p>Th' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph <strong>an' th' plank</strong> will update accordingly.</p>
@@ -2513,22 +2517,22 @@ window.variants && variants.generator( '#vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694470597" defer></script>
-    <script src="../../js/js-yaml.min.js?1694470597" defer></script>
-    <script src="../../js/mermaid.min.js?1694470597" defer></script>
+    <script src="../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694553018" defer></script>
+    <script src="../../js/js-yaml.min.js?1694553018" defer></script>
+    <script src="../../js/mermaid.min.js?1694553018" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1694470597" defer></script>
+    <script src="../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.html b/pir/basics/installation/index.html
index aaf62da059..fdf054837b 100644
--- a/pir/basics/installation/index.html
+++ b/pir/basics/installation/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/installation/index.print.html" rel="alternate" type="text/html" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/basics/configuration/index.html" title="Configurrrat&#39;n (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/basics/requirements/index.html" title="Requirrrements (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/basics/installation/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/installation/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/basics/configuration/index.html" title="Configurrrat&#39;n (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/basics/requirements/index.html" title="Requirrrements (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/basics/installation/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/installation/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Installat&#39;n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -145,8 +153,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Cap'n Hugo theme be all about an' th' core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#image-979ad292bca7564748b2c9744eba26dd" class="lightbox-link"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-979ad292bca7564748b2c9744eba26dd"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e831cf0c51acbd820d5e4b39ecbf6579" class="lightbox-link"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e831cf0c51acbd820d5e4b39ecbf6579"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By open'n th' given file, ye should see th' property <code>chapter=true</code> on top, mean'n this plank be a <em>chapter</em>.</p>
 <p>By default all chapters an' planks be created as a draft. If ye want t' render these planks, remove th' property <code>draft: true</code> from th' metadata.</p>
@@ -262,12 +270,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470596" defer></script>
-        <script src="../../../js/search.js?1694470596" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -421,13 +429,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470596"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470596" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470596" defer></script>
-    <script src="../../../js/theme.js?1694470596" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.print.html b/pir/basics/installation/index.print.html
index fe955cec38..7ff73bbae5 100644
--- a/pir/basics/installation/index.print.html
+++ b/pir/basics/installation/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="canonical" type="text/html" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Installat&#39;n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -106,8 +110,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Cap'n Hugo theme be all about an' th' core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#image-979ad292bca7564748b2c9744eba26dd" class="lightbox-link"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-979ad292bca7564748b2c9744eba26dd"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e831cf0c51acbd820d5e4b39ecbf6579" class="lightbox-link"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e831cf0c51acbd820d5e4b39ecbf6579"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By open'n th' given file, ye should see th' property <code>chapter=true</code> on top, mean'n this plank be a <em>chapter</em>.</p>
 <p>By default all chapters an' planks be created as a draft. If ye want t' render these planks, remove th' property <code>draft: true</code> from th' metadata.</p>
@@ -145,8 +149,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.html b/pir/basics/migration/index.html
index cc25d96b67..a1e04fce39 100644
--- a/pir/basics/migration/index.html
+++ b/pir/basics/migration/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/migration/index.print.html" rel="alternate" type="text/html" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/basics/requirements/index.html" title="Requirrrements (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/basics/index.html" title="Basics (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/basics/migration/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/migration/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/basics/requirements/index.html" title="Requirrrements (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/basics/index.html" title="Basics (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/basics/migration/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/migration/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">What&#39;s New</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -974,12 +982,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470596" defer></script>
-        <script src="../../../js/search.js?1694470596" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1133,13 +1141,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470596"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470596" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470596" defer></script>
-    <script src="../../../js/theme.js?1694470596" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.print.html b/pir/basics/migration/index.print.html
index ee821a0ff7..e2da53290f 100644
--- a/pir/basics/migration/index.print.html
+++ b/pir/basics/migration/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="canonical" type="text/html" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">What&#39;s New</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -825,8 +829,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.html b/pir/basics/requirements/index.html
index 70bcb36dab..83dff09b13 100644
--- a/pir/basics/requirements/index.html
+++ b/pir/basics/requirements/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/requirements/index.print.html" rel="alternate" type="text/html" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,38 +54,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/basics/installation/index.html" title="Installat&#39;n (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/basics/migration/index.html" title="What&#39;s New (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/basics/requirements/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/requirements/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/basics/installation/index.html" title="Installat&#39;n (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/basics/migration/index.html" title="What&#39;s New (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/basics/requirements/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/requirements/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Requirrrements</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -98,8 +102,8 @@
 
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
-<p><a href="#image-ea47d2936f07e317250c72b0c8c1c94d" class="lightbox-link"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-ea47d2936f07e317250c72b0c8c1c94d"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-62dfaa745124a7099d3250d9dd6cebed" class="lightbox-link"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-62dfaa745124a7099d3250d9dd6cebed"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -190,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470596" defer></script>
-        <script src="../../../js/search.js?1694470596" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -349,13 +353,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470596"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470596" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470596" defer></script>
-    <script src="../../../js/theme.js?1694470596" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.print.html b/pir/basics/requirements/index.print.html
index 792820538c..12641094c2 100644
--- a/pir/basics/requirements/index.print.html
+++ b/pir/basics/requirements/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="canonical" type="text/html" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Requirrrements</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -79,8 +83,8 @@
 
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
-<p><a href="#image-ea47d2936f07e317250c72b0c8c1c94d" class="lightbox-link"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-ea47d2936f07e317250c72b0c8c1c94d"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-62dfaa745124a7099d3250d9dd6cebed" class="lightbox-link"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-62dfaa745124a7099d3250d9dd6cebed"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -93,8 +97,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/categories/basic/index.html b/pir/categories/basic/index.html
index 6b0dacdcf0..320cf3e003 100644
--- a/pir/categories/basic/index.html
+++ b/pir/categories/basic/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/basic/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/basic/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/categories/basic/index.xml" rel="alternate" type="application/rss+xml" title="basic :: Categorrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/categories/index.html"><span itemprop="name">Categorrries</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Categorrry :: basic</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/categories/content/index.html b/pir/categories/content/index.html
index 92e8aecfff..473128a112 100644
--- a/pir/categories/content/index.html
+++ b/pir/categories/content/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/content/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/content/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/categories/content/index.xml" rel="alternate" type="application/rss+xml" title="content :: Categorrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/categories/index.html"><span itemprop="name">Categorrries</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Categorrry :: content</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/categories/custom/index.html b/pir/categories/custom/index.html
index 682235f523..1cd67ff277 100644
--- a/pir/categories/custom/index.html
+++ b/pir/categories/custom/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/custom/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/custom/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/categories/custom/index.xml" rel="alternate" type="application/rss+xml" title="custom :: Categorrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/categories/index.html"><span itemprop="name">Categorrries</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Categorrry :: custom</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/categories/index.html b/pir/categories/index.html
index 747f7a298d..d531b83e06 100644
--- a/pir/categories/index.html
+++ b/pir/categories/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/categories/index.xml" rel="alternate" type="application/rss+xml" title="Categorrries :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,36 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Categorrries</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -193,12 +201,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../js/search.js?1694470597" defer></script>
+        <script src="../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -352,13 +360,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../js/theme.js?1694470597" defer></script>
+    <script src="../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/categories/taxonomy/index.html b/pir/categories/taxonomy/index.html
index 6b1be6496a..68ccf1216b 100644
--- a/pir/categories/taxonomy/index.html
+++ b/pir/categories/taxonomy/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/taxonomy/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/categories/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="taxonomy :: Categorrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/categories/index.html"><span itemprop="name">Categorrries</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Categorrry :: taxonomy</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/categories/theming/index.html b/pir/categories/theming/index.html
index ce8e6722bc..80f38be5a8 100644
--- a/pir/categories/theming/index.html
+++ b/pir/categories/theming/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/theming/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/theming/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/categories/theming/index.xml" rel="alternate" type="application/rss+xml" title="theming :: Categorrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/categories/index.html"><span itemprop="name">Categorrries</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Categorrry :: theming</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -172,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -331,13 +335,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.html b/pir/cont/archetypes/index.html
index 671481133d..ffb429ae4a 100644
--- a/pir/cont/archetypes/index.html
+++ b/pir/cont/archetypes/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/archetypes/index.print.html" rel="alternate" type="text/html" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/cont/markdown/index.html" title="Marrrkdown rules (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/cont/pages/index.html" title="planks orrrganizat&#39;n (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/cont/archetypes/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/archetypes/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/cont/markdown/index.html" title="Marrrkdown rules (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/cont/pages/index.html" title="planks orrrganizat&#39;n (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/cont/archetypes/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/archetypes/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Arrrchetypes</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -123,8 +131,8 @@
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
-<p><a href="#image-99ca588fec09e21d5e65e6ecef4d73af" class="lightbox-link"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-99ca588fec09e21d5e65e6ecef4d73af"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-78a59797cefbeb1692fd1fe7041c86dc" class="lightbox-link"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-78a59797cefbeb1692fd1fe7041c86dc"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a home plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -134,8 +142,8 @@
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
-<p><a href="#image-dd358fcd621b1d1dcbd37ee27dcc23ca" class="lightbox-link"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-dd358fcd621b1d1dcbd37ee27dcc23ca"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8c9c7c4ed549f5c0dafaecaae7c5cb09" class="lightbox-link"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8c9c7c4ed549f5c0dafaecaae7c5cb09"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -147,8 +155,8 @@
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace th' <code>X</code> wit' a number. Because this number will be used t' generate th' subtitle o' th' chapter plank, set th' number t' a consecutive value start'n at 1 fer each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
-<p><a href="#image-aa04bdcd96fe4f8eeede99c83bc69c89" class="lightbox-link"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-aa04bdcd96fe4f8eeede99c83bc69c89"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-bacf71dfea11537600c39689027223db" class="lightbox-link"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-bacf71dfea11537600c39689027223db"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
@@ -279,12 +287,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470596" defer></script>
-        <script src="../../../js/search.js?1694470596" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -438,13 +446,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470596"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470596" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470596" defer></script>
-    <script src="../../../js/theme.js?1694470596" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.print.html b/pir/cont/archetypes/index.print.html
index 5302d39167..7fbc03c567 100644
--- a/pir/cont/archetypes/index.print.html
+++ b/pir/cont/archetypes/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="canonical" type="text/html" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Arrrchetypes</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -82,8 +86,8 @@
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
-<p><a href="#image-99ca588fec09e21d5e65e6ecef4d73af" class="lightbox-link"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-99ca588fec09e21d5e65e6ecef4d73af"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-78a59797cefbeb1692fd1fe7041c86dc" class="lightbox-link"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-78a59797cefbeb1692fd1fe7041c86dc"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a home plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -93,8 +97,8 @@
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
-<p><a href="#image-dd358fcd621b1d1dcbd37ee27dcc23ca" class="lightbox-link"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-dd358fcd621b1d1dcbd37ee27dcc23ca"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8c9c7c4ed549f5c0dafaecaae7c5cb09" class="lightbox-link"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8c9c7c4ed549f5c0dafaecaae7c5cb09"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -106,8 +110,8 @@
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace th' <code>X</code> wit' a number. Because this number will be used t' generate th' subtitle o' th' chapter plank, set th' number t' a consecutive value start'n at 1 fer each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
-<p><a href="#image-aa04bdcd96fe4f8eeede99c83bc69c89" class="lightbox-link"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-aa04bdcd96fe4f8eeede99c83bc69c89"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-bacf71dfea11537600c39689027223db" class="lightbox-link"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-bacf71dfea11537600c39689027223db"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
@@ -160,8 +164,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.html b/pir/cont/i18n/index.html
index 6572158c8e..0ab03cd48e 100644
--- a/pir/cont/i18n/index.html
+++ b/pir/cont/i18n/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/i18n/index.print.html" rel="alternate" type="text/html" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/cont/taxonomy/index.html" title="Taxonomy (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/cont/menushortcuts/index.html" title="Menu extrrra shorrrtcuts (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/cont/i18n/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/i18n/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/cont/taxonomy/index.html" title="Taxonomy (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/cont/menushortcuts/index.html" title="Menu extrrra shorrrtcuts (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/cont/i18n/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/i18n/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Multilingual an&#39; i18n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -120,8 +128,8 @@
 <li>Automatic menu generat'n from multilingual rrrambl'n</li>
 <li>In-browser language switch'n</li>
 </ul>
-<p><a href="#image-3ddd5df9631a17df99a0e3169fda0d43" class="lightbox-link"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-3ddd5df9631a17df99a0e3169fda0d43"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-74a4e264dc71537b22a1509bac103a35" class="lightbox-link"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-74a4e264dc71537b22a1509bac103a35"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
 <p>Aft learn'n <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Cap'n Hugo handle multilingual websites</a>, define yer languages 'n yer <code>config.toml</code> file.</p>
 <p>For example wit' current English an' Piratized English website.</p>
@@ -300,12 +308,12 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470596" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470596" defer></script>
-        <script src="../../../js/search.js?1694470596" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -459,13 +467,13 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470596"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470596" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470596" defer></script>
-    <script src="../../../js/theme.js?1694470596" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.print.html b/pir/cont/i18n/index.print.html
index f71af025e3..b7f458d1d4 100644
--- a/pir/cont/i18n/index.print.html
+++ b/pir/cont/i18n/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="canonical" type="text/html" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Multilingual an&#39; i18n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -84,8 +88,8 @@
 <li>Automatic menu generat'n from multilingual rrrambl'n</li>
 <li>In-browser language switch'n</li>
 </ul>
-<p><a href="#image-3ddd5df9631a17df99a0e3169fda0d43" class="lightbox-link"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-3ddd5df9631a17df99a0e3169fda0d43"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-74a4e264dc71537b22a1509bac103a35" class="lightbox-link"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-74a4e264dc71537b22a1509bac103a35"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
 <p>Aft learn'n <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Cap'n Hugo handle multilingual websites</a>, define yer languages 'n yer <code>config.toml</code> file.</p>
 <p>For example wit' current English an' Piratized English website.</p>
@@ -186,8 +190,8 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/cont/imageeffects/index.html b/pir/cont/imageeffects/index.html
index 1c156d584f..0f98a29937 100644
--- a/pir/cont/imageeffects/index.html
+++ b/pir/cont/imageeffects/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/imageeffects/index.print.html" rel="alternate" type="text/html" title="Image Effects :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/cont/menushortcuts/index.html" title="Menu extrrra shorrrtcuts (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/cont/markdown/index.html" title="Marrrkdown rules (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/cont/imageeffects/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/imageeffects.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/cont/menushortcuts/index.html" title="Menu extrrra shorrrtcuts (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/cont/markdown/index.html" title="Marrrkdown rules (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/cont/imageeffects/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/imageeffects.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Image Effects</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -113,13 +121,13 @@
 <p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
 
   
-<div class="tab-panel" data-tab-group="b3bfbccbf551006176bbaed595d7af44">
+<div class="tab-panel" data-tab-group="fa99d8e0faf6dc5141df6694f4de3351">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('b3bfbccbf551006176bbaed595d7af44','configtoml')"
+      onclick="switchTab('fa99d8e0faf6dc5141df6694f4de3351','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -143,13 +151,13 @@
 </div><p>This can be overridden 'n a planks frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="090a651dba1fd6b90420e1f11f480b51">
+<div class="tab-panel" data-tab-group="4e35395b48d9f1e1403b6b7306b5dd44">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('090a651dba1fd6b90420e1f11f480b51','frontmatter')"
+      onclick="switchTab('4e35395b48d9f1e1403b6b7306b5dd44','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -172,13 +180,13 @@
 </div><p>Or by explicitly override sett'ns by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="5cf2480855a0aa5d6115567c4641906f">
+<div class="tab-panel" data-tab-group="ed06e6aeff95d249c7cadbe0b1313a6d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('5cf2480855a0aa5d6115567c4641906f','url')"
+      onclick="switchTab('ed06e6aeff95d249c7cadbe0b1313a6d','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -198,13 +206,13 @@
 </div><p>Th' sett'ns applied t' th' above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="02fd8f2aaf1e870a905a22c8f81a0e93">
+<div class="tab-panel" data-tab-group="c1bb8e1f653715f053d1c3e6a35cf5d0">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('02fd8f2aaf1e870a905a22c8f81a0e93','result')"
+      onclick="switchTab('c1bb8e1f653715f053d1c3e6a35cf5d0','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -227,13 +235,13 @@
 </div><p>This ends up 'n th' follow'n HTML whar' th' parameter be converted t' CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="d89d752263892081539d78904634f3e8">
+<div class="tab-panel" data-tab-group="9743dd3fa96d7ec2031121beb3075f45">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('d89d752263892081539d78904634f3e8','html')"
+      onclick="switchTab('9743dd3fa96d7ec2031121beb3075f45','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -348,12 +356,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../js/search.js?1694470593" defer></script>
+        <script src="../../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -507,13 +515,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/pir/cont/imageeffects/index.print.html b/pir/cont/imageeffects/index.print.html
index 4f72498d25..4d5aa9c81a 100644
--- a/pir/cont/imageeffects/index.print.html
+++ b/pir/cont/imageeffects/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="canonical" type="text/html" title="Image Effects :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Image Effects</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -84,13 +88,13 @@
 <p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
 
   
-<div class="tab-panel" data-tab-group="b3bfbccbf551006176bbaed595d7af44">
+<div class="tab-panel" data-tab-group="fa99d8e0faf6dc5141df6694f4de3351">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('b3bfbccbf551006176bbaed595d7af44','configtoml')"
+      onclick="switchTab('fa99d8e0faf6dc5141df6694f4de3351','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -114,13 +118,13 @@
 </div><p>This can be overridden 'n a planks frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="090a651dba1fd6b90420e1f11f480b51">
+<div class="tab-panel" data-tab-group="4e35395b48d9f1e1403b6b7306b5dd44">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('090a651dba1fd6b90420e1f11f480b51','frontmatter')"
+      onclick="switchTab('4e35395b48d9f1e1403b6b7306b5dd44','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -143,13 +147,13 @@
 </div><p>Or by explicitly override sett'ns by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="5cf2480855a0aa5d6115567c4641906f">
+<div class="tab-panel" data-tab-group="ed06e6aeff95d249c7cadbe0b1313a6d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('5cf2480855a0aa5d6115567c4641906f','url')"
+      onclick="switchTab('ed06e6aeff95d249c7cadbe0b1313a6d','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -169,13 +173,13 @@
 </div><p>Th' sett'ns applied t' th' above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="02fd8f2aaf1e870a905a22c8f81a0e93">
+<div class="tab-panel" data-tab-group="c1bb8e1f653715f053d1c3e6a35cf5d0">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('02fd8f2aaf1e870a905a22c8f81a0e93','result')"
+      onclick="switchTab('c1bb8e1f653715f053d1c3e6a35cf5d0','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -198,13 +202,13 @@
 </div><p>This ends up 'n th' follow'n HTML whar' th' parameter be converted t' CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="d89d752263892081539d78904634f3e8">
+<div class="tab-panel" data-tab-group="9743dd3fa96d7ec2031121beb3075f45">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('d89d752263892081539d78904634f3e8','html')"
+      onclick="switchTab('9743dd3fa96d7ec2031121beb3075f45','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -241,8 +245,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/cont/index.html b/pir/cont/index.html
index c93e2961da..5b88054f16 100644
--- a/pir/cont/index.html
+++ b/pir/cont/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/cont/index.xml" rel="alternate" type="application/rss+xml" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/cont/index.print.html" rel="alternate" type="text/html" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,37 +54,41 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../pir/cont/pages/index.html" title="planks orrrganizat&#39;n (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../pir/basics/history/index.html" title="Historrry (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../pir/cont/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../pir/cont/pages/index.html" title="planks orrrganizat&#39;n (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../pir/basics/history/index.html" title="Historrry (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../pir/cont/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Rambl&#39;n</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -185,12 +189,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470596" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470596" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470596" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470596" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470596" defer></script>
-        <script src="../../js/search.js?1694470596" defer></script>
+        <script src="../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -344,13 +348,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470596"></script>
+          <script async src="../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470596" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470596" defer></script>
-    <script src="../../js/theme.js?1694470596" defer></script>
+    <script src="../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/cont/index.print.html b/pir/cont/index.print.html
index cc1e9ca35b..1e4896016b 100644
--- a/pir/cont/index.print.html
+++ b/pir/cont/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="canonical" type="text/html" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/cont/index.xml" rel="alternate" type="application/rss+xml" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../js/url.js?1694470597"></script>
-    <script src="../../js/variant.js?1694470597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../js/url.js?1694553017"></script>
+    <script src="../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,17 +55,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Rambl&#39;n</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -167,8 +171,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-95fa7121c3a0cc2a5380be0e449fed9d" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-95fa7121c3a0cc2a5380be0e449fed9d"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-a7f9689139fe8f1399857b15edc5762a" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a7f9689139fe8f1399857b15edc5762a"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
 <p>Cap'n Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flex'ble way</a> t' handle order fer yer planks.</p>
 <p>Th' simplest way be t' set <code>weight</code> parameter t' a number.</p>
@@ -213,8 +217,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
-<p><a href="#image-99ca588fec09e21d5e65e6ecef4d73af" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-99ca588fec09e21d5e65e6ecef4d73af"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-78a59797cefbeb1692fd1fe7041c86dc" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-78a59797cefbeb1692fd1fe7041c86dc"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a home plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -224,8 +228,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
-<p><a href="#image-dd358fcd621b1d1dcbd37ee27dcc23ca" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-dd358fcd621b1d1dcbd37ee27dcc23ca"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8c9c7c4ed549f5c0dafaecaae7c5cb09" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8c9c7c4ed549f5c0dafaecaae7c5cb09"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -237,8 +241,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace th' <code>X</code> wit' a number. Because this number will be used t' generate th' subtitle o' th' chapter plank, set th' number t' a consecutive value start'n at 1 fer each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
-<p><a href="#image-aa04bdcd96fe4f8eeede99c83bc69c89" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-aa04bdcd96fe4f8eeede99c83bc69c89"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-bacf71dfea11537600c39689027223db" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-bacf71dfea11537600c39689027223db"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
@@ -811,8 +815,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-4cc820ecb2663d8d4c051110f3796f9c" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-4cc820ecb2663d8d4c051110f3796f9c"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-7d38e3826ab7fccd230e619f159f85d8" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-7d38e3826ab7fccd230e619f159f85d8"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image wit' Tooltip</h3>
@@ -822,8 +826,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-d467281cd215eb11ea7570921aba0654" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d467281cd215eb11ea7570921aba0654"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-eeeb4a653e678d22e87f9889f83b8761" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-eeeb4a653e678d22e87f9889f83b8761"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -835,8 +839,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-18f77fb181e405cccfe48ae16b0fc0f8" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-18f77fb181e405cccfe48ae16b0fc0f8"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-256644eaa512ada734d9b176de5e1cca" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-256644eaa512ada734d9b176de5e1cca"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -848,8 +852,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-fc4d7f73263e177ffdcb5b6a80d6d64d" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fc4d7f73263e177ffdcb5b6a80d6d64d"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e0bee757205d11fe4fa78219709e949a" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e0bee757205d11fe4fa78219709e949a"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -857,8 +861,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-041e45d87c15dbee137869a305bd3879" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-041e45d87c15dbee137869a305bd3879"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-9e73acf392f2607a00706d2d6e89c1a6" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-9e73acf392f2607a00706d2d6e89c1a6"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -866,8 +870,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-51fb5fb04c56116593fc117b2744c7f0" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-51fb5fb04c56116593fc117b2744c7f0"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-22afc41d57aed83da64f37e8acc4208b" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-22afc41d57aed83da64f37e8acc4208b"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -878,8 +882,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-8945e3496b8252e393e093e3d1943bbd" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-8945e3496b8252e393e093e3d1943bbd"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#image-d2a33670f37e827811faeda02015ad88" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d2a33670f37e827811faeda02015ad88"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -888,8 +892,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-e71e502e01ed0e4331817bf0e3ec7446" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-e71e502e01ed0e4331817bf0e3ec7446"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#image-a9bfb45ed8ec4001c0e2d1f21d0ebbaa" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a9bfb45ed8ec4001c0e2d1f21d0ebbaa"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -898,8 +902,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-223f5f7e42375918377fdb41d88cb22b" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-223f5f7e42375918377fdb41d88cb22b"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c5c39dcbb9cede10af5ad0e328840ff7" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c5c39dcbb9cede10af5ad0e328840ff7"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -908,8 +912,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-05ca4a22d9e3ceafdfb58bf6f9bf4f70" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-05ca4a22d9e3ceafdfb58bf6f9bf4f70"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#image-14c448f3273bc84672f13432a86a77d4" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-14c448f3273bc84672f13432a86a77d4"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -921,14 +925,14 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-03875be0ce973758fc1205641b765c0f" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-03875be0ce973758fc1205641b765c0f"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-41a3ef1b556d283b2fda4482c21e1d10" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-41a3ef1b556d283b2fda4482c21e1d10"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-bf13832a60b06c56362f74ffb5f6a6f1" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-bf13832a60b06c56362f74ffb5f6a6f1"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-c6806407283f1e96beab57b0465f316e" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-c6806407283f1e96beab57b0465f316e"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-4f1e10a1a724c90542114e2393e78a7a" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-4f1e10a1a724c90542114e2393e78a7a"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-2b42f7e22eba8ebdfbd0564f5fddab23" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-2b42f7e22eba8ebdfbd0564f5fddab23"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-6ea134915110aad7522b3f9c50c0687d" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6ea134915110aad7522b3f9c50c0687d"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-5bda19abd73e3a94e5d3d46cd0389193" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5bda19abd73e3a94e5d3d46cd0389193"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combinat'n</h5>
@@ -937,8 +941,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-4c0df3cf1c4fe9c7cf83283f421c8231" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-4c0df3cf1c4fe9c7cf83283f421c8231"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#image-7217aaad64d6cfdd116aa7a8f6173768" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-7217aaad64d6cfdd116aa7a8f6173768"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -980,13 +984,13 @@ line 3 o' code
 <p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
 
   
-<div class="tab-panel" data-tab-group="b3bfbccbf551006176bbaed595d7af44">
+<div class="tab-panel" data-tab-group="fa99d8e0faf6dc5141df6694f4de3351">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('b3bfbccbf551006176bbaed595d7af44','configtoml')"
+      onclick="switchTab('fa99d8e0faf6dc5141df6694f4de3351','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -1010,13 +1014,13 @@ line 3 o' code
 </div><p>This can be overridden 'n a planks frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="090a651dba1fd6b90420e1f11f480b51">
+<div class="tab-panel" data-tab-group="4e35395b48d9f1e1403b6b7306b5dd44">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('090a651dba1fd6b90420e1f11f480b51','frontmatter')"
+      onclick="switchTab('4e35395b48d9f1e1403b6b7306b5dd44','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -1039,13 +1043,13 @@ line 3 o' code
 </div><p>Or by explicitly override sett'ns by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="5cf2480855a0aa5d6115567c4641906f">
+<div class="tab-panel" data-tab-group="ed06e6aeff95d249c7cadbe0b1313a6d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('5cf2480855a0aa5d6115567c4641906f','url')"
+      onclick="switchTab('ed06e6aeff95d249c7cadbe0b1313a6d','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -1065,13 +1069,13 @@ line 3 o' code
 </div><p>Th' sett'ns applied t' th' above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="02fd8f2aaf1e870a905a22c8f81a0e93">
+<div class="tab-panel" data-tab-group="c1bb8e1f653715f053d1c3e6a35cf5d0">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('02fd8f2aaf1e870a905a22c8f81a0e93','result')"
+      onclick="switchTab('c1bb8e1f653715f053d1c3e6a35cf5d0','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -1094,13 +1098,13 @@ line 3 o' code
 </div><p>This ends up 'n th' follow'n HTML whar' th' parameter be converted t' CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="d89d752263892081539d78904634f3e8">
+<div class="tab-panel" data-tab-group="9743dd3fa96d7ec2031121beb3075f45">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('d89d752263892081539d78904634f3e8','html')"
+      onclick="switchTab('9743dd3fa96d7ec2031121beb3075f45','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -1281,8 +1285,8 @@ However, if ye want t' keep th' title but change its value, it can be overridden
 <li>Automatic menu generat'n from multilingual rrrambl'n</li>
 <li>In-browser language switch'n</li>
 </ul>
-<p><a href="#image-3ddd5df9631a17df99a0e3169fda0d43" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-3ddd5df9631a17df99a0e3169fda0d43"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-74a4e264dc71537b22a1509bac103a35" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-74a4e264dc71537b22a1509bac103a35"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
 <p>Aft learn'n <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Cap'n Hugo handle multilingual websites</a>, define yer languages 'n yer <code>config.toml</code> file.</p>
 <p>For example wit' current English an' Piratized English website.</p>
@@ -1422,8 +1426,8 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../js/theme.js?1694470597" defer></script>
+    <script src="../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.html b/pir/cont/markdown/index.html
index 3aa5d9a1de..2555957c02 100644
--- a/pir/cont/markdown/index.html
+++ b/pir/cont/markdown/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/markdown/index.print.html" rel="alternate" type="text/html" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/cont/imageeffects/index.html" title="Image Effects (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/cont/archetypes/index.html" title="Arrrchetypes (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/cont/markdown/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/markdown.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/cont/imageeffects/index.html" title="Image Effects (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/cont/archetypes/index.html" title="Arrrchetypes (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/cont/markdown/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/markdown.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Marrrkdown rules</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -671,8 +679,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-4cc820ecb2663d8d4c051110f3796f9c" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-4cc820ecb2663d8d4c051110f3796f9c"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-7d38e3826ab7fccd230e619f159f85d8" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-7d38e3826ab7fccd230e619f159f85d8"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image wit' Tooltip</h3>
@@ -682,8 +690,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-d467281cd215eb11ea7570921aba0654" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d467281cd215eb11ea7570921aba0654"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-eeeb4a653e678d22e87f9889f83b8761" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-eeeb4a653e678d22e87f9889f83b8761"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -695,8 +703,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-18f77fb181e405cccfe48ae16b0fc0f8" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-18f77fb181e405cccfe48ae16b0fc0f8"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-256644eaa512ada734d9b176de5e1cca" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-256644eaa512ada734d9b176de5e1cca"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -708,8 +716,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-fc4d7f73263e177ffdcb5b6a80d6d64d" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fc4d7f73263e177ffdcb5b6a80d6d64d"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e0bee757205d11fe4fa78219709e949a" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e0bee757205d11fe4fa78219709e949a"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -717,8 +725,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-041e45d87c15dbee137869a305bd3879" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-041e45d87c15dbee137869a305bd3879"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-9e73acf392f2607a00706d2d6e89c1a6" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-9e73acf392f2607a00706d2d6e89c1a6"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -726,8 +734,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-51fb5fb04c56116593fc117b2744c7f0" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-51fb5fb04c56116593fc117b2744c7f0"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-22afc41d57aed83da64f37e8acc4208b" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-22afc41d57aed83da64f37e8acc4208b"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -738,8 +746,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-8945e3496b8252e393e093e3d1943bbd" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-8945e3496b8252e393e093e3d1943bbd"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#image-d2a33670f37e827811faeda02015ad88" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d2a33670f37e827811faeda02015ad88"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -748,8 +756,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-e71e502e01ed0e4331817bf0e3ec7446" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-e71e502e01ed0e4331817bf0e3ec7446"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#image-a9bfb45ed8ec4001c0e2d1f21d0ebbaa" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a9bfb45ed8ec4001c0e2d1f21d0ebbaa"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -758,8 +766,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-223f5f7e42375918377fdb41d88cb22b" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-223f5f7e42375918377fdb41d88cb22b"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c5c39dcbb9cede10af5ad0e328840ff7" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c5c39dcbb9cede10af5ad0e328840ff7"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -768,8 +776,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-05ca4a22d9e3ceafdfb58bf6f9bf4f70" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-05ca4a22d9e3ceafdfb58bf6f9bf4f70"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#image-14c448f3273bc84672f13432a86a77d4" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-14c448f3273bc84672f13432a86a77d4"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -781,14 +789,14 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-03875be0ce973758fc1205641b765c0f" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-03875be0ce973758fc1205641b765c0f"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-41a3ef1b556d283b2fda4482c21e1d10" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-41a3ef1b556d283b2fda4482c21e1d10"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-bf13832a60b06c56362f74ffb5f6a6f1" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-bf13832a60b06c56362f74ffb5f6a6f1"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-c6806407283f1e96beab57b0465f316e" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-c6806407283f1e96beab57b0465f316e"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-4f1e10a1a724c90542114e2393e78a7a" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-4f1e10a1a724c90542114e2393e78a7a"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-2b42f7e22eba8ebdfbd0564f5fddab23" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-2b42f7e22eba8ebdfbd0564f5fddab23"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-6ea134915110aad7522b3f9c50c0687d" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6ea134915110aad7522b3f9c50c0687d"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-5bda19abd73e3a94e5d3d46cd0389193" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5bda19abd73e3a94e5d3d46cd0389193"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combinat'n</h5>
@@ -797,8 +805,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-4c0df3cf1c4fe9c7cf83283f421c8231" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-4c0df3cf1c4fe9c7cf83283f421c8231"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#image-7217aaad64d6cfdd116aa7a8f6173768" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-7217aaad64d6cfdd116aa7a8f6173768"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -908,12 +916,12 @@ line 3 o' code
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470594" defer></script>
-        <script src="../../../js/search.js?1694470594" defer></script>
+        <script src="../../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1067,13 +1075,13 @@ line 3 o' code
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.print.html b/pir/cont/markdown/index.print.html
index 34fa00fb62..dcd78787f5 100644
--- a/pir/cont/markdown/index.print.html
+++ b/pir/cont/markdown/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="canonical" type="text/html" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Marrrkdown rules</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -594,8 +598,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-4cc820ecb2663d8d4c051110f3796f9c" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-4cc820ecb2663d8d4c051110f3796f9c"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-7d38e3826ab7fccd230e619f159f85d8" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-7d38e3826ab7fccd230e619f159f85d8"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image wit' Tooltip</h3>
@@ -605,8 +609,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-d467281cd215eb11ea7570921aba0654" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d467281cd215eb11ea7570921aba0654"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-eeeb4a653e678d22e87f9889f83b8761" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-eeeb4a653e678d22e87f9889f83b8761"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -618,8 +622,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-18f77fb181e405cccfe48ae16b0fc0f8" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-18f77fb181e405cccfe48ae16b0fc0f8"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-256644eaa512ada734d9b176de5e1cca" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-256644eaa512ada734d9b176de5e1cca"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -631,8 +635,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-fc4d7f73263e177ffdcb5b6a80d6d64d" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fc4d7f73263e177ffdcb5b6a80d6d64d"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e0bee757205d11fe4fa78219709e949a" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e0bee757205d11fe4fa78219709e949a"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -640,8 +644,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-041e45d87c15dbee137869a305bd3879" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-041e45d87c15dbee137869a305bd3879"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-9e73acf392f2607a00706d2d6e89c1a6" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-9e73acf392f2607a00706d2d6e89c1a6"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -649,8 +653,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-51fb5fb04c56116593fc117b2744c7f0" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-51fb5fb04c56116593fc117b2744c7f0"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-22afc41d57aed83da64f37e8acc4208b" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-22afc41d57aed83da64f37e8acc4208b"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -661,8 +665,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-8945e3496b8252e393e093e3d1943bbd" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-8945e3496b8252e393e093e3d1943bbd"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#image-d2a33670f37e827811faeda02015ad88" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d2a33670f37e827811faeda02015ad88"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -671,8 +675,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-e71e502e01ed0e4331817bf0e3ec7446" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-e71e502e01ed0e4331817bf0e3ec7446"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#image-a9bfb45ed8ec4001c0e2d1f21d0ebbaa" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a9bfb45ed8ec4001c0e2d1f21d0ebbaa"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -681,8 +685,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-223f5f7e42375918377fdb41d88cb22b" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-223f5f7e42375918377fdb41d88cb22b"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c5c39dcbb9cede10af5ad0e328840ff7" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c5c39dcbb9cede10af5ad0e328840ff7"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -691,8 +695,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-05ca4a22d9e3ceafdfb58bf6f9bf4f70" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-05ca4a22d9e3ceafdfb58bf6f9bf4f70"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#image-14c448f3273bc84672f13432a86a77d4" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-14c448f3273bc84672f13432a86a77d4"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -704,14 +708,14 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-03875be0ce973758fc1205641b765c0f" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-03875be0ce973758fc1205641b765c0f"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-41a3ef1b556d283b2fda4482c21e1d10" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-41a3ef1b556d283b2fda4482c21e1d10"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-bf13832a60b06c56362f74ffb5f6a6f1" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-bf13832a60b06c56362f74ffb5f6a6f1"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-c6806407283f1e96beab57b0465f316e" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-c6806407283f1e96beab57b0465f316e"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-4f1e10a1a724c90542114e2393e78a7a" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-4f1e10a1a724c90542114e2393e78a7a"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-2b42f7e22eba8ebdfbd0564f5fddab23" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-2b42f7e22eba8ebdfbd0564f5fddab23"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-6ea134915110aad7522b3f9c50c0687d" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6ea134915110aad7522b3f9c50c0687d"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-5bda19abd73e3a94e5d3d46cd0389193" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5bda19abd73e3a94e5d3d46cd0389193"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combinat'n</h5>
@@ -720,8 +724,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-4c0df3cf1c4fe9c7cf83283f421c8231" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-4c0df3cf1c4fe9c7cf83283f421c8231"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#image-7217aaad64d6cfdd116aa7a8f6173768" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-7217aaad64d6cfdd116aa7a8f6173768"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -753,8 +757,8 @@ line 3 o' code
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.html b/pir/cont/menushortcuts/index.html
index eed0464d52..319227c501 100644
--- a/pir/cont/menushortcuts/index.html
+++ b/pir/cont/menushortcuts/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/menushortcuts/index.print.html" rel="alternate" type="text/html" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/cont/i18n/index.html" title="Multilingual an&#39; i18n (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/cont/imageeffects/index.html" title="Image Effects (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/cont/menushortcuts/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/menushortcuts.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/cont/i18n/index.html" title="Multilingual an&#39; i18n (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/cont/imageeffects/index.html" title="Image Effects (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/cont/menushortcuts/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/menushortcuts.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Menu extrrra shorrrtcuts</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -317,12 +325,12 @@ However, if ye want t' keep th' title but change its value, it can be overridden
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../js/search.js?1694470593" defer></script>
+        <script src="../../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -476,13 +484,13 @@ However, if ye want t' keep th' title but change its value, it can be overridden
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.print.html b/pir/cont/menushortcuts/index.print.html
index 76b2ff606f..35fe878edf 100644
--- a/pir/cont/menushortcuts/index.print.html
+++ b/pir/cont/menushortcuts/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="canonical" type="text/html" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Menu extrrra shorrrtcuts</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -208,8 +212,8 @@ However, if ye want t' keep th' title but change its value, it can be overridden
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.html b/pir/cont/pages/index.html
index 1c35c7312a..e92355814f 100644
--- a/pir/cont/pages/index.html
+++ b/pir/cont/pages/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/pages/index.print.html" rel="alternate" type="text/html" title="planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/cont/archetypes/index.html" title="Arrrchetypes (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/cont/index.html" title="Rambl&#39;n (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/cont/pages/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/pages/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/cont/archetypes/index.html" title="Arrrchetypes (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/cont/index.html" title="Rambl&#39;n (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/cont/pages/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/pages/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">planks orrrganizat&#39;n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -189,8 +197,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-95fa7121c3a0cc2a5380be0e449fed9d" class="lightbox-link"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-95fa7121c3a0cc2a5380be0e449fed9d"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-a7f9689139fe8f1399857b15edc5762a" class="lightbox-link"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a7f9689139fe8f1399857b15edc5762a"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
 <p>Cap'n Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flex'ble way</a> t' handle order fer yer planks.</p>
 <p>Th' simplest way be t' set <code>weight</code> parameter t' a number.</p>
@@ -305,12 +313,12 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -464,13 +472,13 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.print.html b/pir/cont/pages/index.print.html
index 9ea31fbfb2..568bd41443 100644
--- a/pir/cont/pages/index.print.html
+++ b/pir/cont/pages/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="canonical" type="text/html" title="planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">planks orrrganizat&#39;n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -151,8 +155,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-95fa7121c3a0cc2a5380be0e449fed9d" class="lightbox-link"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-95fa7121c3a0cc2a5380be0e449fed9d"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-a7f9689139fe8f1399857b15edc5762a" class="lightbox-link"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a7f9689139fe8f1399857b15edc5762a"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
 <p>Cap'n Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flex'ble way</a> t' handle order fer yer planks.</p>
 <p>Th' simplest way be t' set <code>weight</code> parameter t' a number.</p>
@@ -189,8 +193,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/cont/taxonomy/index.html b/pir/cont/taxonomy/index.html
index 8fe82430b3..d0446e5b3b 100644
--- a/pir/cont/taxonomy/index.html
+++ b/pir/cont/taxonomy/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="Taxonomy :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/taxonomy/index.print.html" rel="alternate" type="text/html" title="Taxonomy :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/index.html" title="Shorrrtcodes (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/cont/i18n/index.html" title="Multilingual an&#39; i18n (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/cont/taxonomy/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/taxonomy.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/index.html" title="Shorrrtcodes (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/cont/i18n/index.html" title="Multilingual an&#39; i18n (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/cont/taxonomy/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/cont/taxonomy.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Taxonomy</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -221,12 +229,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470594" defer></script>
-        <script src="../../../js/search.js?1694470594" defer></script>
+        <script src="../../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -380,13 +388,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/pir/cont/taxonomy/index.print.html b/pir/cont/taxonomy/index.print.html
index 4f9fe16238..6239b65619 100644
--- a/pir/cont/taxonomy/index.print.html
+++ b/pir/cont/taxonomy/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="canonical" type="text/html" title="Taxonomy :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="Taxonomy :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/cont/index.html"><span itemprop="name">Rambl&#39;n</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Taxonomy</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -112,8 +116,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/dev/contributing/index.html b/pir/dev/contributing/index.html
index 636d051c9e..1c3f0689a6 100644
--- a/pir/dev/contributing/index.html
+++ b/pir/dev/contributing/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,39 +53,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/dev/maintaining/index.html" title="Maintaining (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/dev/index.html" title="Development (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/dev/contributing/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/contributing/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/dev/maintaining/index.html" title="Maintaining (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/dev/index.html" title="Development (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/dev/contributing/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/contributing/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Contributing</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -311,12 +319,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -474,13 +482,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/dev/contributing/index.print.html b/pir/dev/contributing/index.print.html
index 7a712f0074..71f0251b7d 100644
--- a/pir/dev/contributing/index.print.html
+++ b/pir/dev/contributing/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,18 +54,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Contributing</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -203,8 +207,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/dev/index.html b/pir/dev/index.html
index 5514fdb6f0..ee422c07b9 100644
--- a/pir/dev/index.html
+++ b/pir/dev/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,37 +53,41 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../pir/dev/contributing/index.html" title="Contributing (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../pir/shortcodes/tabs/index.html" title="Tabs (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../pir/dev/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../pir/dev/contributing/index.html" title="Contributing (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../pir/shortcodes/tabs/index.html" title="Tabs (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../pir/dev/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Development</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -191,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../js/search.js?1694470597" defer></script>
+        <script src="../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -354,13 +358,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../js/theme.js?1694470597" defer></script>
+    <script src="../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/dev/index.print.html b/pir/dev/index.print.html
index 32efbcf6ab..f4d4860e18 100644
--- a/pir/dev/index.print.html
+++ b/pir/dev/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../js/url.js?1694470597"></script>
-    <script src="../../js/variant.js?1694470597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../js/url.js?1694553017"></script>
+    <script src="../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,17 +54,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Development</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -466,8 +470,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <h3 id="preview-imagesscreenshotpng">Preview <code>images/screenshot.png</code></h3>
-<p><a href="#image-460a1323099c10a9e99bed17089d115a" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-460a1323099c10a9e99bed17089d115a"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8c1c0f86411c385975dda79e606c7c95" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8c1c0f86411c385975dda79e606c7c95"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Rrrambl'n</strong>:</p>
 <p>Show th' <a href="#demo-screenshot">Demo Screenshot</a> plank on different devices an' different themes. Composit'n o' th' different device screenshots into a template.</p>
@@ -496,11 +500,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n o' <code>images/tn.png</code> be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <h3 id="preview-imagesheropng">Preview <code>images/hero.png</code></h3>
-<p><a href="#image-a98b62ef3a316c59e163e40370ff9b81" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-a98b62ef3a316c59e163e40370ff9b81"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-ac253bd68a079435845cedfc9c0b4a8f" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-ac253bd68a079435845cedfc9c0b4a8f"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
-<p><a href="#image-718c7f1e469cc1aee9db73cbe290c382" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-718c7f1e469cc1aee9db73cbe290c382"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-6facd511c53ac4dee270f1412467e3ee" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6facd511c53ac4dee270f1412467e3ee"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -512,8 +516,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../js/theme.js?1694470597" defer></script>
+    <script src="../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/dev/maintaining/index.html b/pir/dev/maintaining/index.html
index 592a910734..881ab52756 100644
--- a/pir/dev/maintaining/index.html
+++ b/pir/dev/maintaining/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,39 +53,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/dev/screenshots/index.html" title="Scrrrenshots (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/dev/contributing/index.html" title="Contributing (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/dev/maintaining/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/maintaining/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/dev/screenshots/index.html" title="Scrrrenshots (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/dev/contributing/index.html" title="Contributing (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/dev/maintaining/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/maintaining/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Maintaining</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -398,12 +406,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -561,13 +569,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/dev/maintaining/index.print.html b/pir/dev/maintaining/index.print.html
index 1fd46a9669..8c36a66fea 100644
--- a/pir/dev/maintaining/index.print.html
+++ b/pir/dev/maintaining/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,18 +54,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Maintaining</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -279,8 +283,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/dev/screenshots/index.html b/pir/dev/screenshots/index.html
index 4086023df5..abff0794d3 100644
--- a/pir/dev/screenshots/index.html
+++ b/pir/dev/screenshots/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,39 +53,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/dev/maintaining/index.html" title="Maintaining (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/dev/screenshots/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/screenshots/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/dev/maintaining/index.html" title="Maintaining (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/dev/screenshots/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/dev/screenshots/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Scrrrenshots</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -147,8 +155,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <h3 id="preview-imagesscreenshotpng">Preview <code>images/screenshot.png</code></h3>
-<p><a href="#image-460a1323099c10a9e99bed17089d115a" class="lightbox-link"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-460a1323099c10a9e99bed17089d115a"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8c1c0f86411c385975dda79e606c7c95" class="lightbox-link"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8c1c0f86411c385975dda79e606c7c95"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Rrrambl'n</strong>:</p>
 <p>Show th' <a href="#demo-screenshot">Demo Screenshot</a> plank on different devices an' different themes. Composit'n o' th' different device screenshots into a template.</p>
@@ -177,11 +185,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n o' <code>images/tn.png</code> be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <h3 id="preview-imagesheropng">Preview <code>images/hero.png</code></h3>
-<p><a href="#image-a98b62ef3a316c59e163e40370ff9b81" class="lightbox-link"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-a98b62ef3a316c59e163e40370ff9b81"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-ac253bd68a079435845cedfc9c0b4a8f" class="lightbox-link"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-ac253bd68a079435845cedfc9c0b4a8f"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
-<p><a href="#image-718c7f1e469cc1aee9db73cbe290c382" class="lightbox-link"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-718c7f1e469cc1aee9db73cbe290c382"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-6facd511c53ac4dee270f1412467e3ee" class="lightbox-link"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6facd511c53ac4dee270f1412467e3ee"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -270,12 +278,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -433,13 +441,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/dev/screenshots/index.print.html b/pir/dev/screenshots/index.print.html
index 273f036682..df90bda33c 100644
--- a/pir/dev/screenshots/index.print.html
+++ b/pir/dev/screenshots/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,18 +54,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/dev/index.html"><span itemprop="name">Development</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Scrrrenshots</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -107,8 +111,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <h3 id="preview-imagesscreenshotpng">Preview <code>images/screenshot.png</code></h3>
-<p><a href="#image-460a1323099c10a9e99bed17089d115a" class="lightbox-link"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-460a1323099c10a9e99bed17089d115a"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8c1c0f86411c385975dda79e606c7c95" class="lightbox-link"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8c1c0f86411c385975dda79e606c7c95"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Rrrambl'n</strong>:</p>
 <p>Show th' <a href="#demo-screenshot">Demo Screenshot</a> plank on different devices an' different themes. Composit'n o' th' different device screenshots into a template.</p>
@@ -137,11 +141,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n o' <code>images/tn.png</code> be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <h3 id="preview-imagesheropng">Preview <code>images/hero.png</code></h3>
-<p><a href="#image-a98b62ef3a316c59e163e40370ff9b81" class="lightbox-link"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-a98b62ef3a316c59e163e40370ff9b81"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-ac253bd68a079435845cedfc9c0b4a8f" class="lightbox-link"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-ac253bd68a079435845cedfc9c0b4a8f"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
-<p><a href="#image-718c7f1e469cc1aee9db73cbe290c382" class="lightbox-link"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-718c7f1e469cc1aee9db73cbe290c382"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-6facd511c53ac4dee270f1412467e3ee" class="lightbox-link"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6facd511c53ac4dee270f1412467e3ee"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -152,8 +156,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/index.html b/pir/index.html
index f0f2f96607..d8f24a1fc6 100644
--- a/pir/index.html
+++ b/pir/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="../pir/index.xml" rel="alternate" type="application/rss+xml" title="Cap&#39;n Hugo Relearrrn Theme">
     <link href="../pir/index.print.html" rel="alternate" type="text/html" title="Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../js/url.js?1694470593"></script>
-    <script src="../js/variant.js?1694470593"></script>
+    <link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../js/url.js?1694553015"></script>
+    <script src="../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,37 +54,45 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../pir/basics/index.html" title="Basics (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../pir/basics/index.html" title="Basics (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../pir/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../pir/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span><meta itemprop="position" content="1"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -118,8 +126,8 @@
 </div>
 <p>A theme fer <a href="https://gohugo.io/" target="_blank">Cap'n Hugo</a> designed fer documentat'n.</p>
 <p><a href="../basics/migration/">★ What&rsquo;s new 'n th' latest release ★</a></p>
-<p><a href="#image-21fe73af0e1da749bb515e3a828635a7" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-21fe73af0e1da749bb515e3a828635a7"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0e8fda50f9a62a31d36828a6068c95c0" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0e8fda50f9a62a31d36828a6068c95c0"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="motivation">Motivat'n</h2>
 <p>Th' theme be a fork o' th' great <a href="https://github.com/matcornic/hugo-theme-learn" target="_blank">Learrrn theme</a> wit' th' aim o' fix'n long outstand'n bugs an' adept'n t' latest Cap'n Hugo features. As far as poss'ble this theme tries t' be a drop-in replacement fer th' Learrrn theme.</p>
 <h2 id="features">Features</h2>
@@ -293,12 +301,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694470595" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694470595" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694470595" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694470595" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694470595" defer></script>
-        <script src="../js/search.js?1694470595" defer></script>
+        <script src="../js/auto-complete.js?1694553016" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -452,13 +460,13 @@
               }
             });
           </script>
-          <script async src="../js/github-buttons.js?1694470595"></script>
+          <script async src="../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694470595" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470595" defer></script>
-    <script src="../js/theme.js?1694470595" defer></script>
+    <script src="../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/index.print.html b/pir/index.print.html
index 851708e3b9..d6b9144b31 100644
--- a/pir/index.print.html
+++ b/pir/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="canonical" type="text/html" title="Cap&#39;n Hugo Relearrrn Theme">
     <link href="../pir/index.xml" rel="alternate" type="application/rss+xml" title="Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../js/url.js?1694470597"></script>
-    <script src="../js/variant.js?1694470597"></script>
+    <link href="../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../js/url.js?1694553017"></script>
+    <script src="../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,16 +55,20 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span><meta itemprop="position" content="1"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable home" tabindex="-1">
@@ -84,8 +88,8 @@
 </div>
 <p>A theme fer <a href="https://gohugo.io/" target="_blank">Cap'n Hugo</a> designed fer documentat'n.</p>
 <p><a href="../basics/migration/">★ What&rsquo;s new 'n th' latest release ★</a></p>
-<p><a href="#image-21fe73af0e1da749bb515e3a828635a7" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-21fe73af0e1da749bb515e3a828635a7"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0e8fda50f9a62a31d36828a6068c95c0" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-0e8fda50f9a62a31d36828a6068c95c0"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="motivation">Motivat'n</h2>
 <p>Th' theme be a fork o' th' great <a href="https://github.com/matcornic/hugo-theme-learn" target="_blank">Learrrn theme</a> wit' th' aim o' fix'n long outstand'n bugs an' adept'n t' latest Cap'n Hugo features. As far as poss'ble this theme tries t' be a drop-in replacement fer th' Learrrn theme.</p>
 <h2 id="features">Features</h2>
@@ -956,8 +960,8 @@
 
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
-<p><a href="#image-ea47d2936f07e317250c72b0c8c1c94d" class="lightbox-link"><img src="../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-ea47d2936f07e317250c72b0c8c1c94d"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-62dfaa745124a7099d3250d9dd6cebed" class="lightbox-link"><img src="../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-62dfaa745124a7099d3250d9dd6cebed"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -1002,8 +1006,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Cap'n Hugo theme be all about an' th' core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#image-979ad292bca7564748b2c9744eba26dd" class="lightbox-link"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-979ad292bca7564748b2c9744eba26dd"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e831cf0c51acbd820d5e4b39ecbf6579" class="lightbox-link"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e831cf0c51acbd820d5e4b39ecbf6579"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By open'n th' given file, ye should see th' property <code>chapter=true</code> on top, mean'n this plank be a <em>chapter</em>.</p>
 <p>By default all chapters an' planks be created as a draft. If ye want t' render these planks, remove th' property <code>draft: true</code> from th' metadata.</p>
@@ -1159,8 +1163,8 @@
 <p>Ye can add a dedicated search plank fer yer plank by add'n th' <code>SEARCHPAGE</code> outputformat t' yer home plank by add'n th' follow'n lines 'n yer <code>config.toml</code> file.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
-<p><a href="#image-5ee5cb6ae5798adf9ede8926f8141368" class="lightbox-link"><img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-5ee5cb6ae5798adf9ede8926f8141368"><img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-bb1514dbf171302f8148be22b20a4bb9" class="lightbox-link"><img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-bb1514dbf171302f8148be22b20a4bb9"><img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="activate-print-support">Activate print support</h2>
 <p>Ye can activate print support t' add th' capability t' print whole chapters or even th' complete ship. Just add th' <code>PRINT</code> output format t' yer home, section an' plank 'n yer <code>config.toml</code> as seen below:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
@@ -1205,8 +1209,8 @@ appearance, ye will have t' configure two parameters fer th' defined languages:<
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If those params be not configured fer a specific language, they will get their
 default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
-<p><a href="#image-d1c8f189a054aba457fd59f070a55aef" class="lightbox-link"><img src="../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d1c8f189a054aba457fd59f070a55aef"><img src="../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-f4f68aba34cd783c808d499c9dfac3d7" class="lightbox-link"><img src="../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-f4f68aba34cd783c808d499c9dfac3d7"><img src="../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -1331,13 +1335,13 @@ If ye have requirements t' support IE and/or older browser versions, use one o'
 <p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-0100fcbb2a9a1157765e675941d80a89" aria-controls="expandcontent-0100fcbb2a9a1157765e675941d80a89" >
-    <label class="expand-label" for="expand-0100fcbb2a9a1157765e675941d80a89" >
+    <input type="checkbox" id="expand-2a9ac36caece8ebd218edd67b8825c81" aria-controls="expandcontent-2a9ac36caece8ebd218edd67b8825c81" >
+    <label class="expand-label" for="expand-2a9ac36caece8ebd218edd67b8825c81" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="expandcontent-0100fcbb2a9a1157765e675941d80a89" class="expand-content">
+    <div id="expandcontent-2a9ac36caece8ebd218edd67b8825c81" class="expand-content">
 
 <p>T' get started, first select a color variant from th' variant switch 'n th' lower left sidebar that fits ye best as a start'n point.</p>
 <p>Th' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph <strong>an' th' plank</strong> will update accordingly.</p>
@@ -2717,8 +2721,8 @@ window.variants && variants.generator( '#vargenerator' );
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-95fa7121c3a0cc2a5380be0e449fed9d" class="lightbox-link"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-95fa7121c3a0cc2a5380be0e449fed9d"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#image-a7f9689139fe8f1399857b15edc5762a" class="lightbox-link"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a7f9689139fe8f1399857b15edc5762a"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
 <p>Cap'n Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flex'ble way</a> t' handle order fer yer planks.</p>
 <p>Th' simplest way be t' set <code>weight</code> parameter t' a number.</p>
@@ -2763,8 +2767,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
-<p><a href="#image-99ca588fec09e21d5e65e6ecef4d73af" class="lightbox-link"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-99ca588fec09e21d5e65e6ecef4d73af"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-78a59797cefbeb1692fd1fe7041c86dc" class="lightbox-link"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-78a59797cefbeb1692fd1fe7041c86dc"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a home plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -2774,8 +2778,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
-<p><a href="#image-dd358fcd621b1d1dcbd37ee27dcc23ca" class="lightbox-link"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-dd358fcd621b1d1dcbd37ee27dcc23ca"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-8c9c7c4ed549f5c0dafaecaae7c5cb09" class="lightbox-link"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-8c9c7c4ed549f5c0dafaecaae7c5cb09"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -2787,8 +2791,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace th' <code>X</code> wit' a number. Because this number will be used t' generate th' subtitle o' th' chapter plank, set th' number t' a consecutive value start'n at 1 fer each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
-<p><a href="#image-aa04bdcd96fe4f8eeede99c83bc69c89" class="lightbox-link"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-aa04bdcd96fe4f8eeede99c83bc69c89"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-bacf71dfea11537600c39689027223db" class="lightbox-link"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-bacf71dfea11537600c39689027223db"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
@@ -3361,8 +3365,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-4cc820ecb2663d8d4c051110f3796f9c" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-4cc820ecb2663d8d4c051110f3796f9c"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-7d38e3826ab7fccd230e619f159f85d8" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-7d38e3826ab7fccd230e619f159f85d8"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image wit' Tooltip</h3>
@@ -3372,8 +3376,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-d467281cd215eb11ea7570921aba0654" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-d467281cd215eb11ea7570921aba0654"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-eeeb4a653e678d22e87f9889f83b8761" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-eeeb4a653e678d22e87f9889f83b8761"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -3385,8 +3389,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-18f77fb181e405cccfe48ae16b0fc0f8" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-18f77fb181e405cccfe48ae16b0fc0f8"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-256644eaa512ada734d9b176de5e1cca" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-256644eaa512ada734d9b176de5e1cca"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -3398,8 +3402,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-fc4d7f73263e177ffdcb5b6a80d6d64d" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-fc4d7f73263e177ffdcb5b6a80d6d64d"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-e0bee757205d11fe4fa78219709e949a" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-e0bee757205d11fe4fa78219709e949a"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -3407,8 +3411,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-041e45d87c15dbee137869a305bd3879" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-041e45d87c15dbee137869a305bd3879"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-9e73acf392f2607a00706d2d6e89c1a6" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-9e73acf392f2607a00706d2d6e89c1a6"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -3416,8 +3420,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-51fb5fb04c56116593fc117b2744c7f0" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-51fb5fb04c56116593fc117b2744c7f0"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-22afc41d57aed83da64f37e8acc4208b" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-22afc41d57aed83da64f37e8acc4208b"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -3428,8 +3432,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-8945e3496b8252e393e093e3d1943bbd" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-8945e3496b8252e393e093e3d1943bbd"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#image-d2a33670f37e827811faeda02015ad88" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-d2a33670f37e827811faeda02015ad88"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -3438,8 +3442,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-e71e502e01ed0e4331817bf0e3ec7446" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-e71e502e01ed0e4331817bf0e3ec7446"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#image-a9bfb45ed8ec4001c0e2d1f21d0ebbaa" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-a9bfb45ed8ec4001c0e2d1f21d0ebbaa"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -3448,8 +3452,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-223f5f7e42375918377fdb41d88cb22b" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-223f5f7e42375918377fdb41d88cb22b"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-c5c39dcbb9cede10af5ad0e328840ff7" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-c5c39dcbb9cede10af5ad0e328840ff7"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -3458,8 +3462,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-05ca4a22d9e3ceafdfb58bf6f9bf4f70" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-05ca4a22d9e3ceafdfb58bf6f9bf4f70"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#image-14c448f3273bc84672f13432a86a77d4" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-14c448f3273bc84672f13432a86a77d4"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -3471,14 +3475,14 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-03875be0ce973758fc1205641b765c0f" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-03875be0ce973758fc1205641b765c0f"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-41a3ef1b556d283b2fda4482c21e1d10" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-41a3ef1b556d283b2fda4482c21e1d10"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-bf13832a60b06c56362f74ffb5f6a6f1" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-bf13832a60b06c56362f74ffb5f6a6f1"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#image-c6806407283f1e96beab57b0465f316e" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-c6806407283f1e96beab57b0465f316e"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-4f1e10a1a724c90542114e2393e78a7a" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-4f1e10a1a724c90542114e2393e78a7a"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-2b42f7e22eba8ebdfbd0564f5fddab23" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-2b42f7e22eba8ebdfbd0564f5fddab23"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-6ea134915110aad7522b3f9c50c0687d" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-6ea134915110aad7522b3f9c50c0687d"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#image-5bda19abd73e3a94e5d3d46cd0389193" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5bda19abd73e3a94e5d3d46cd0389193"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combinat'n</h5>
@@ -3487,8 +3491,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#image-4c0df3cf1c4fe9c7cf83283f421c8231" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-4c0df3cf1c4fe9c7cf83283f421c8231"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#image-7217aaad64d6cfdd116aa7a8f6173768" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-7217aaad64d6cfdd116aa7a8f6173768"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -3530,13 +3534,13 @@ line 3 o' code
 <p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
 
   
-<div class="tab-panel" data-tab-group="b3bfbccbf551006176bbaed595d7af44">
+<div class="tab-panel" data-tab-group="fa99d8e0faf6dc5141df6694f4de3351">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('b3bfbccbf551006176bbaed595d7af44','configtoml')"
+      onclick="switchTab('fa99d8e0faf6dc5141df6694f4de3351','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -3560,13 +3564,13 @@ line 3 o' code
 </div><p>This can be overridden 'n a planks frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="090a651dba1fd6b90420e1f11f480b51">
+<div class="tab-panel" data-tab-group="4e35395b48d9f1e1403b6b7306b5dd44">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('090a651dba1fd6b90420e1f11f480b51','frontmatter')"
+      onclick="switchTab('4e35395b48d9f1e1403b6b7306b5dd44','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -3589,13 +3593,13 @@ line 3 o' code
 </div><p>Or by explicitly override sett'ns by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="5cf2480855a0aa5d6115567c4641906f">
+<div class="tab-panel" data-tab-group="ed06e6aeff95d249c7cadbe0b1313a6d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('5cf2480855a0aa5d6115567c4641906f','url')"
+      onclick="switchTab('ed06e6aeff95d249c7cadbe0b1313a6d','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -3615,13 +3619,13 @@ line 3 o' code
 </div><p>Th' sett'ns applied t' th' above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="02fd8f2aaf1e870a905a22c8f81a0e93">
+<div class="tab-panel" data-tab-group="c1bb8e1f653715f053d1c3e6a35cf5d0">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('02fd8f2aaf1e870a905a22c8f81a0e93','result')"
+      onclick="switchTab('c1bb8e1f653715f053d1c3e6a35cf5d0','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -3644,13 +3648,13 @@ line 3 o' code
 </div><p>This ends up 'n th' follow'n HTML whar' th' parameter be converted t' CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="d89d752263892081539d78904634f3e8">
+<div class="tab-panel" data-tab-group="9743dd3fa96d7ec2031121beb3075f45">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('d89d752263892081539d78904634f3e8','html')"
+      onclick="switchTab('9743dd3fa96d7ec2031121beb3075f45','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -3831,8 +3835,8 @@ However, if ye want t' keep th' title but change its value, it can be overridden
 <li>Automatic menu generat'n from multilingual rrrambl'n</li>
 <li>In-browser language switch'n</li>
 </ul>
-<p><a href="#image-3ddd5df9631a17df99a0e3169fda0d43" class="lightbox-link"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-3ddd5df9631a17df99a0e3169fda0d43"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-74a4e264dc71537b22a1509bac103a35" class="lightbox-link"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-74a4e264dc71537b22a1509bac103a35"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
 <p>Aft learn'n <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Cap'n Hugo handle multilingual websites</a>, define yer languages 'n yer <code>config.toml</code> file.</p>
 <p>For example wit' current English an' Piratized English website.</p>
@@ -5264,13 +5268,13 @@ So its rrrambl'n be used as descript'n.</p>
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-eb063ec2f5048b55f4d21e3c1567c5d1" aria-controls="expandcontent-eb063ec2f5048b55f4d21e3c1567c5d1" >
-    <label class="expand-label" for="expand-eb063ec2f5048b55f4d21e3c1567c5d1" >
+    <input type="checkbox" id="expand-144ec7e27de618ed99ec695e16b73526" aria-controls="expandcontent-144ec7e27de618ed99ec695e16b73526" >
+    <label class="expand-label" for="expand-144ec7e27de618ed99ec695e16b73526" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-eb063ec2f5048b55f4d21e3c1567c5d1" class="expand-content">
+    <div id="expandcontent-144ec7e27de618ed99ec695e16b73526" class="expand-content">
 
 <p>Thank ye!</p>
 <p>That&rsquo;s some text wit' a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -5397,26 +5401,26 @@ So its rrrambl'n be used as descript'n.</p>
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-afac8a58459bed7f460380decbf5591a" aria-controls="expandcontent-afac8a58459bed7f460380decbf5591a" >
-    <label class="expand-label" for="expand-afac8a58459bed7f460380decbf5591a" >
+    <input type="checkbox" id="expand-d1fba8017effec3848f1e6a914c3c432" aria-controls="expandcontent-d1fba8017effec3848f1e6a914c3c432" >
+    <label class="expand-label" for="expand-d1fba8017effec3848f1e6a914c3c432" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-afac8a58459bed7f460380decbf5591a" class="expand-content">
+    <div id="expandcontent-d1fba8017effec3848f1e6a914c3c432" class="expand-content">
 <p>
 Yes, ye did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-47400f476e59b2ac5a9d91d86a36803b" aria-controls="expandcontent-47400f476e59b2ac5a9d91d86a36803b"  checked>
-    <label class="expand-label" for="expand-47400f476e59b2ac5a9d91d86a36803b" >
+    <input type="checkbox" id="expand-913b6eac47ced9ff00714324b582e919" aria-controls="expandcontent-913b6eac47ced9ff00714324b582e919"  checked>
+    <label class="expand-label" for="expand-913b6eac47ced9ff00714324b582e919" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-47400f476e59b2ac5a9d91d86a36803b" class="expand-content">
+    <div id="expandcontent-913b6eac47ced9ff00714324b582e919" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -5437,13 +5441,13 @@ No need t' press ye!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-ff756e61dd93c94e1f3247a704456b42" aria-controls="expandcontent-ff756e61dd93c94e1f3247a704456b42" >
-    <label class="expand-label" for="expand-ff756e61dd93c94e1f3247a704456b42" >
+    <input type="checkbox" id="expand-43a0d2087a7cbb56802601afded4a347" aria-controls="expandcontent-43a0d2087a7cbb56802601afded4a347" >
+    <label class="expand-label" for="expand-43a0d2087a7cbb56802601afded4a347" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="expandcontent-ff756e61dd93c94e1f3247a704456b42" class="expand-content">
+    <div id="expandcontent-43a0d2087a7cbb56802601afded4a347" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -5481,13 +5485,13 @@ No need t' press ye!</div>
 <p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="71c0391c0013104fc2299667be13d42e">
+<div class="tab-panel" data-tab-group="615881d0d843ff5343687231c05afa1d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('71c0391c0013104fc2299667be13d42e','python')"
+      onclick="switchTab('615881d0d843ff5343687231c05afa1d','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -5710,13 +5714,13 @@ No need t' press ye!</div>
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="7e3a033777c3bb4c01bf64ebd8287a36">
+<div class="tab-panel" data-tab-group="37bd08df34358e9c04bc5e55ed07238b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('7e3a033777c3bb4c01bf64ebd8287a36','python')"
+      onclick="switchTab('37bd08df34358e9c04bc5e55ed07238b','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -7281,7 +7285,7 @@ Electricity grid,H2 conversion,27.14
 <div class="sc-openapi-wrapper is-load'n helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-e89d11607488f69f768025d876e4150e"
+    id="openapi-b9df731ddbf0b6c951211accae4d3a29"
     openapi-url="../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -7389,13 +7393,13 @@ Electricity grid,H2 conversion,27.14
 <p>T' use formatted parameter, add this 'n yer <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="3b5fe17741db4f3d6fb8132d96f9a594">
+<div class="tab-panel" data-tab-group="1bb8c54595449b50899e72ba74ce3ec5">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('3b5fe17741db4f3d6fb8132d96f9a594','configtoml')"
+      onclick="switchTab('1bb8c54595449b50899e72ba74ce3ec5','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -7433,13 +7437,13 @@ Electricity grid,H2 conversion,27.14
 <p>This be especially useful if ye want t' flag yer code example wit' an explicit language.</p>
 <p>If ye want multiple tabs grouped together ye can wrap yer tabs into th' <a href="../shortcodes/tabs/"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="da867040ef03a7fa6050e5fc5f961d29">
+<div class="tab-panel" data-tab-group="be52b0ba22b9937defc0e4845df11421">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('da867040ef03a7fa6050e5fc5f961d29','c')"
+      onclick="switchTab('be52b0ba22b9937defc0e4845df11421','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -7553,13 +7557,13 @@ Electricity grid,H2 conversion,27.14
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="1f7a5ffa67ce2fb5f3cca4c7fed296fa">
+<div class="tab-panel" data-tab-group="cf674ea1dc73404428b11f21ec160e52">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('1f7a5ffa67ce2fb5f3cca4c7fed296fa','code')"
+      onclick="switchTab('cf674ea1dc73404428b11f21ec160e52','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -7584,13 +7588,13 @@ Electricity grid,H2 conversion,27.14
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="a72b357e3471451759ddf94ac6f9d1c6">
+<div class="tab-panel" data-tab-group="3c585e87f746ab7af552336fe95bbea3">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="emstrongmixedstrongem"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('a72b357e3471451759ddf94ac6f9d1c6','emstrongmixedstrongem')"
+      onclick="switchTab('3c585e87f746ab7af552336fe95bbea3','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -7638,13 +7642,13 @@ Electricity grid,H2 conversion,27.14
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">an'</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">ay'con</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="5b6b7cce14d9206ae8644631c96490e5">
+<div class="tab-panel" data-tab-group="668bdc1dfc1b5fa78fdabcd3d6d57c49">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-colored-style')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -7654,7 +7658,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-color')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -7664,7 +7668,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','default-style-and-color')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style an' color</div>
@@ -7674,7 +7678,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> just severity style</div>
@@ -7684,7 +7688,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</div>
@@ -7757,13 +7761,13 @@ Electricity grid,H2 conversion,27.14
 <p>This comes 'n handy eg. fer provid'n code snippets fer multiple languages.</p>
 <p>If ye just want a single tab ye can instead call th' <a href="../shortcodes/tab/"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="a97539806551d51d6abe006ce9a16f06">
+<div class="tab-panel" data-tab-group="a6a154c24c268988c14c443d1c35f028">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','py')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -7773,7 +7777,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','sh')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -7783,7 +7787,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','c')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -7940,13 +7944,13 @@ Electricity grid,H2 conversion,27.14
 <p>See what happens t' th' tab views while ye select different tabs.</p>
 <p>While press'n a tab o' Group A switches all tab views o' Group A 'n sync (if th' tab be available), th' tabs o' Group B be left untouched.</p>
 
-<div class="tab-panel" data-tab-group="bdd3ec3d0da331c777d3c2337f657651">
+<div class="tab-panel" data-tab-group="1e895b51ad5a5bacfe6f63817e645f8b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-a-tab-view-1')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -7956,7 +7960,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-a-tab-view-2')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -7966,7 +7970,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-b')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -8367,8 +8371,8 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470597" defer></script>
+    <script src="../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553018" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -8397,27 +8401,27 @@ Electricity grid,H2 conversion,27.14
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1694470597"></script>
-    <script src="../js/d3/d3-color.min.js?1694470597" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1694470597" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1694470597" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1694470597" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1694470597" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1694470597" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1694470597" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1694470597" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1694470597" defer></script>
-    <script src="../js/js-yaml.min.js?1694470597" defer></script>
-    <script src="../js/mermaid.min.js?1694470597" defer></script>
+    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1694553018"></script>
+    <script src="../js/d3/d3-color.min.js?1694553018" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1694553018" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1694553018" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1694553018" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1694553018" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1694553018" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1694553018" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1694553018" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1694553018" defer></script>
+    <script src="../js/js-yaml.min.js?1694553018" defer></script>
+    <script src="../js/mermaid.min.js?1694553018" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="../js/swagger-ui/swagger-ui-bundle.js?1694470597" defer></script>
-    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1694470597" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-bundle.js?1694553018" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1694553018" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694470597", assetsBuster:  1694470597  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694553018", assetsBuster:  1694553018  };
     </script>
-    <script src="../js/theme.js?1694470597" defer></script>
+    <script src="../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/more/credits/index.html b/pir/more/credits/index.html
index 00a7bca067..60ad49e5e3 100644
--- a/pir/more/credits/index.html
+++ b/pir/more/credits/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/more/credits/index.print.html" rel="alternate" type="text/html" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,38 +54,46 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/more/credits/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/more/credits/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/more/credits/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/more/credits/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Crrredits</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -251,12 +259,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -410,13 +418,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/more/credits/index.print.html b/pir/more/credits/index.print.html
index bbfaadc534..723bb26be8 100644
--- a/pir/more/credits/index.print.html
+++ b/pir/more/credits/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="canonical" type="text/html" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,17 +55,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Crrredits</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -141,8 +145,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/search.html b/pir/search.html
index 6f285ab3d7..f7fec149c7 100644
--- a/pir/search.html
+++ b/pir/search.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/search.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/search.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/search.html" rel="canonical" type="text/html" title="Searrrch :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../js/url.js?1694470597"></script>
-    <script src="../js/variant.js?1694470597"></script>
+    <link href="../css/fontawesome-all.min.css?1694553018" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553018" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553018" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553018" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553018" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553018" rel="stylesheet">
+    <link href="../css/fonts.css?1694553018" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553018" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553018" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553018" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553018" rel="stylesheet">
+    <link href="../css/print.css?1694553018" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694553018" rel="stylesheet">
+    <script src="../js/url.js?1694553018"></script>
+    <script src="../js/variant.js?1694553018"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,26 +53,30 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span><meta itemprop="position" content="1"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable home" tabindex="-1">
@@ -185,12 +189,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694470597" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../js/search.js?1694470597" defer></script>
+        <script src="../js/auto-complete.js?1694553018" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694553018" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694553018" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694553018" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694553018" defer></script>
+        <script src="../js/search.js?1694553018" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -344,13 +348,13 @@
               }
             });
           </script>
-          <script async src="../js/github-buttons.js?1694470597"></script>
+          <script async src="../js/github-buttons.js?1694553018"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../js/theme.js?1694470597" defer></script>
+    <script src="../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.html b/pir/shortcodes/attachments/index.html
index 12a322c5e7..f0435352b9 100644
--- a/pir/shortcodes/attachments/index.html
+++ b/pir/shortcodes/attachments/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/attachments/index.print.html" rel="alternate" type="text/html" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/badge/index.html" title="Badge (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/index.html" title="Shorrrtcodes (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/attachments/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/attachments/index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/badge/index.html" title="Badge (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/index.html" title="Shorrrtcodes (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/attachments/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/attachments/index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Attachments</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -466,12 +474,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470594" defer></script>
-        <script src="../../../js/search.js?1694470594" defer></script>
+        <script src="../../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -625,13 +633,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.print.html b/pir/shortcodes/attachments/index.print.html
index b9a4a12d71..1337b3e2f9 100644
--- a/pir/shortcodes/attachments/index.print.html
+++ b/pir/shortcodes/attachments/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="canonical" type="text/html" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Attachments</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -341,8 +345,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/badge/index.html b/pir/shortcodes/badge/index.html
index a501d6c1c9..c929a43e74 100644
--- a/pir/shortcodes/badge/index.html
+++ b/pir/shortcodes/badge/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/badge/index.print.html" rel="alternate" type="text/html" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/button/index.html" title="Button (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/attachments/index.html" title="Attachments (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/badge/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/badge.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/button/index.html" title="Button (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/attachments/index.html" title="Attachments (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/badge/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/badge.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Badge</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -398,12 +406,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470594" defer></script>
-        <script src="../../../js/search.js?1694470594" defer></script>
+        <script src="../../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -557,13 +565,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/badge/index.print.html b/pir/shortcodes/badge/index.print.html
index 3584308932..e1b3be9627 100644
--- a/pir/shortcodes/badge/index.print.html
+++ b/pir/shortcodes/badge/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="canonical" type="text/html" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Badge</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -280,8 +284,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.html b/pir/shortcodes/button/index.html
index 3162004def..63a30f89b0 100644
--- a/pir/shortcodes/button/index.html
+++ b/pir/shortcodes/button/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/button/index.print.html" rel="alternate" type="text/html" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/children/index.html" title="Children (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/badge/index.html" title="Badge (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/button/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/button.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/children/index.html" title="Children (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/badge/index.html" title="Badge (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/button/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/button.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Button</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -538,12 +546,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470594" defer></script>
-        <script src="../../../js/search.js?1694470594" defer></script>
+        <script src="../../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -697,13 +705,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.print.html b/pir/shortcodes/button/index.print.html
index 3e36903e2e..5c48dbb848 100644
--- a/pir/shortcodes/button/index.print.html
+++ b/pir/shortcodes/button/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="canonical" type="text/html" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Button</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -419,8 +423,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
index 6397a19ca5..595d444f49 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,33 +53,37 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" title="plank 1-1-1-1-1 (hidden) (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" title="plank 1-1-1-1-1 (hidden) (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -90,7 +94,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html"><span itemprop="name">plank 1-1-1-1-1 (hidden)</span></a><meta itemprop="position" content="8">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-1-1-1-1</span><meta itemprop="position" content="9"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -194,12 +198,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../../../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../../../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../../../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -357,13 +361,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../../../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../../../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
index 1a9e9eb461..187a9e3a2f 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../../../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../../../../../../js/url.js?1694470597"></script>
-    <script src="../../../../../../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../../../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../../../../../../js/url.js?1694553017"></script>
+    <script src="../../../../../../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,13 +54,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -71,7 +75,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html"><span itemprop="name">plank 1-1-1-1-1 (hidden)</span></a><meta itemprop="position" content="8">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-1-1-1-1</span><meta itemprop="position" content="9"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -97,8 +101,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../../../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
index 1c996bb391..d43849d46f 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,34 +53,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" title="plank 1-1-1-1-1-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" title="plank 1-1-1-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" title="plank 1-1-1-1-1-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" title="plank 1-1-1-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -90,7 +98,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html"><span itemprop="name">plank 1-1-1-1</span></a><meta itemprop="position" content="7">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-1-1-1 (hidden)</span><meta itemprop="position" content="8"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -209,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -372,13 +380,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
index 28ad444f96..c4b73dd3ff 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1694470597"></script>
-    <script src="../../../../../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1694553017"></script>
+    <script src="../../../../../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,13 +54,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -70,7 +74,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html"><span itemprop="name">plank 1-1-1-1</span></a><meta itemprop="position" content="7">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-1-1-1 (hidden)</span><meta itemprop="position" content="8"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -123,8 +127,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
index 391f92fa8c..f908bb2be9 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,34 +53,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" title="plank 1-1-1 (hidden) (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" title="plank 1-1-1 (hidden) (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -89,7 +97,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html"><span itemprop="name">plank 1-1-1 (hidden)</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-1-1</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -208,12 +216,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -369,13 +377,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
index 2ff407cf69..ef201041bf 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694470597"></script>
-    <script src="../../../../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694553017"></script>
+    <script src="../../../../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,13 +54,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -69,7 +73,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html"><span itemprop="name">plank 1-1-1 (hidden)</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-1-1</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -104,8 +108,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
index 50a51abfde..bdbb85cf24 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,34 +53,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" title="plank 1-1-1-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html" title="plank 1-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" title="plank 1-1-1-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html" title="plank 1-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -88,7 +96,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">plank 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-1 (hidden)</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -207,12 +215,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -368,13 +376,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
index ddf9a0d0fb..dc4434511b 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470597"></script>
-    <script src="../../../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553017"></script>
+    <script src="../../../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,13 +54,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -68,7 +72,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">plank 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-1 (hidden)</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -130,8 +134,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
index eb05f962d1..414262b62f 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html" rel="alternate" type="text/html" title="plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,33 +54,37 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" title="plank 1-1-2-2 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" title="plank 1-1-2-2 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -89,7 +93,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html"><span itemprop="name">plank 1-1-2</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-2-1</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -193,12 +197,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -352,13 +356,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
index 6327fae7ee..49d5d8a63b 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="canonical" type="text/html" title="plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694470597"></script>
-    <script src="../../../../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694553017"></script>
+    <script src="../../../../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,13 +55,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -70,7 +74,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html"><span itemprop="name">plank 1-1-2</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-2-1</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -96,8 +100,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
index 997e0152f1..a649c179e1 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html" rel="alternate" type="text/html" title="plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,33 +54,37 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="plank 1-1-3 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" title="plank 1-1-2-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="plank 1-1-3 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" title="plank 1-1-2-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -89,7 +93,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html"><span itemprop="name">plank 1-1-2</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-2-2</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -193,12 +197,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -352,13 +356,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
index 9a98006ee6..989a12581a 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="canonical" type="text/html" title="plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694470597"></script>
-    <script src="../../../../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694553017"></script>
+    <script src="../../../../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,13 +55,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -70,7 +74,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html"><span itemprop="name">plank 1-1-2</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-2-2</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -96,8 +100,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
index c4fc849bc3..ebf54d168a 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html" rel="alternate" type="text/html" title="plank 1-1-2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,34 +54,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" title="plank 1-1-2-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html" title="plank 1-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" title="plank 1-1-2-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html" title="plank 1-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -89,7 +97,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">plank 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-2</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -209,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -368,13 +376,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
index 52c1d7add7..13aff6db27 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="canonical" type="text/html" title="plank 1-1-2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470597"></script>
-    <script src="../../../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553017"></script>
+    <script src="../../../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,13 +55,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -69,7 +73,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">plank 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-2</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -141,8 +145,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
index 6ac6583df6..9e86e4ffc4 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html" rel="alternate" type="text/html" title="plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,33 +54,37 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../pir/shortcodes/children/children-2/index.html" title="plank 2 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" title="plank 1-1-2-2 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-3/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../pir/shortcodes/children/children-2/index.html" title="plank 2 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" title="plank 1-1-2-2 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-3/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -88,7 +92,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">plank 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-3</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -192,12 +196,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -351,13 +355,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
index 424ab59749..6e82604ff2 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="canonical" type="text/html" title="plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470597"></script>
-    <script src="../../../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553017"></script>
+    <script src="../../../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,13 +55,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -69,7 +73,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">plank 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1-3</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -95,8 +99,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/index.html
index 2d76e7fe89..f19f1ecb50 100644
--- a/pir/shortcodes/children/children-1/children-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.print.html" rel="alternate" type="text/html" title="plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,41 +54,49 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../pir/shortcodes/children/children-1/index.html" title="plank 1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../pir/shortcodes/children/children-1/index.html" title="plank 1 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/children/children-1/index.html"><span itemprop="name">plank 1</span></a><meta itemprop="position" content="4">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1</span><meta itemprop="position" content="5"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -209,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -368,13 +376,13 @@
               }
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/index.print.html
index 5173418cdc..5eec43e3c1 100644
--- a/pir/shortcodes/children/children-1/children-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="canonical" type="text/html" title="plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694470597"></script>
-    <script src="../../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694553017"></script>
+    <script src="../../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,20 +55,24 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/children/children-1/index.html"><span itemprop="name">plank 1</span></a><meta itemprop="position" content="4">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1-1</span><meta itemprop="position" content="5"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -187,8 +191,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/index.html b/pir/shortcodes/children/children-1/index.html
index 344bf2ebb0..5225c9cfa8 100644
--- a/pir/shortcodes/children/children-1/index.html
+++ b/pir/shortcodes/children/children-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-1/index.print.html" rel="alternate" type="text/html" title="plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470593"></script>
-    <script src="../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553015"></script>
+    <script src="../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,40 +54,48 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../pir/shortcodes/children/children-1/children-1-1/index.html" title="plank 1-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../pir/shortcodes/children/test/index.html" title="plank X (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../pir/shortcodes/children/children-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../pir/shortcodes/children/children-1/children-1-1/index.html" title="plank 1-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../pir/shortcodes/children/test/index.html" title="plank X (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../pir/shortcodes/children/children-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -206,12 +214,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -365,13 +373,13 @@
               }
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/index.print.html b/pir/shortcodes/children/children-1/index.print.html
index 118fa0c20e..2d1ef0bfe7 100644
--- a/pir/shortcodes/children/children-1/index.print.html
+++ b/pir/shortcodes/children/children-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="canonical" type="text/html" title="plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470597"></script>
-    <script src="../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553017"></script>
+    <script src="../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,19 +55,23 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 1</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -213,8 +217,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-2/index.html b/pir/shortcodes/children/children-2/index.html
index c7d2115de4..05cb145d37 100644
--- a/pir/shortcodes/children/children-2/index.html
+++ b/pir/shortcodes/children/children-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-2/index.print.html" rel="alternate" type="text/html" title="plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470593"></script>
-    <script src="../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553015"></script>
+    <script src="../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,43 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../pir/shortcodes/children/children-3/index.html" title="plank 3 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="plank 1-1-3 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../pir/shortcodes/children/children-2/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-2/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../pir/shortcodes/children/children-3/index.html" title="plank 3 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="plank 1-1-3 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../pir/shortcodes/children/children-2/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-2/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 2</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -191,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -350,13 +354,13 @@
               }
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-2/index.print.html b/pir/shortcodes/children/children-2/index.print.html
index 73e54d8034..d811a73067 100644
--- a/pir/shortcodes/children/children-2/index.print.html
+++ b/pir/shortcodes/children/children-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="canonical" type="text/html" title="plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470597"></script>
-    <script src="../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553017"></script>
+    <script src="../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,19 +55,23 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 2</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -94,8 +98,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/index.html b/pir/shortcodes/children/children-3/index.html
index fee90fb3b3..c8399831f2 100644
--- a/pir/shortcodes/children/children-3/index.html
+++ b/pir/shortcodes/children/children-3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-3/index.print.html" rel="alternate" type="text/html" title="plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470593"></script>
-    <script src="../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553015"></script>
+    <script src="../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,40 +54,48 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../pir/shortcodes/children/children-3/test3/index.html" title="plank 3-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../pir/shortcodes/children/children-2/index.html" title="plank 2 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../pir/shortcodes/children/children-3/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-3/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../pir/shortcodes/children/children-3/test3/index.html" title="plank 3-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../pir/shortcodes/children/children-2/index.html" title="plank 2 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../pir/shortcodes/children/children-3/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-3/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 3</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -206,12 +214,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -365,13 +373,13 @@
               }
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/index.print.html b/pir/shortcodes/children/children-3/index.print.html
index 18c50ea05f..12f5fb34b1 100644
--- a/pir/shortcodes/children/children-3/index.print.html
+++ b/pir/shortcodes/children/children-3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="canonical" type="text/html" title="plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470597"></script>
-    <script src="../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553017"></script>
+    <script src="../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,19 +55,23 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 3</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -120,8 +124,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/test3/index.html b/pir/shortcodes/children/children-3/test3/index.html
index d16717fc51..633759fa68 100644
--- a/pir/shortcodes/children/children-3/test3/index.html
+++ b/pir/shortcodes/children/children-3/test3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../pir/shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-3/test3/index.print.html" rel="alternate" type="text/html" title="plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,40 +54,44 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../pir/shortcodes/expand/index.html" title="Expand (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../pir/shortcodes/children/children-3/index.html" title="plank 3 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../pir/shortcodes/children/children-3/test3/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-3/test3.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../pir/shortcodes/expand/index.html" title="Expand (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../pir/shortcodes/children/children-3/index.html" title="plank 3 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../pir/shortcodes/children/children-3/test3/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-3/test3.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/children/children-3/index.html"><span itemprop="name">plank 3</span></a><meta itemprop="position" content="4">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 3-1</span><meta itemprop="position" content="5"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -191,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1694470595" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1694470595" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694470595" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1694470595" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1694470595" defer></script>
-        <script src="../../../../../js/search.js?1694470595" defer></script>
+        <script src="../../../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -350,13 +354,13 @@
               }
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1694470595"></script>
+          <script async src="../../../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1694470595" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694470595" defer></script>
-    <script src="../../../../../js/theme.js?1694470595" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/test3/index.print.html b/pir/shortcodes/children/children-3/test3/index.print.html
index fc36a48ef5..bdb7bbf0e1 100644
--- a/pir/shortcodes/children/children-3/test3/index.print.html
+++ b/pir/shortcodes/children/children-3/test3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="canonical" type="text/html" title="plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694470597"></script>
-    <script src="../../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694553017"></script>
+    <script src="../../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,20 +55,24 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../pir/shortcodes/children/children-3/index.html"><span itemprop="name">plank 3</span></a><meta itemprop="position" content="4">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 3-1</span><meta itemprop="position" content="5"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -94,8 +98,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-4/index.html b/pir/shortcodes/children/children-4/index.html
index fc1009b293..42cb1872c1 100644
--- a/pir/shortcodes/children/children-4/index.html
+++ b/pir/shortcodes/children/children-4/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470593"></script>
-    <script src="../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553015"></script>
+    <script src="../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,39 +53,43 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../pir/shortcodes/expand/index.html" title="Expand (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../pir/shortcodes/children/children-3/test3/index.html" title="plank 3-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../pir/shortcodes/children/children-4/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-4/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../pir/shortcodes/expand/index.html" title="Expand (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../pir/shortcodes/children/children-3/test3/index.html" title="plank 3-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../pir/shortcodes/children/children-4/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-4/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 4 (hidden)</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -189,12 +193,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../../js/search.js?1694470597" defer></script>
+        <script src="../../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -349,13 +353,13 @@
               }
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-4/index.print.html b/pir/shortcodes/children/children-4/index.print.html
index 23adaff0d5..47adddfa2e 100644
--- a/pir/shortcodes/children/children-4/index.print.html
+++ b/pir/shortcodes/children/children-4/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470597"></script>
-    <script src="../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553017"></script>
+    <script src="../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,19 +54,23 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank 4 (hidden)</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -92,8 +96,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.html b/pir/shortcodes/children/index.html
index 793014074e..ab4e330b35 100644
--- a/pir/shortcodes/children/index.html
+++ b/pir/shortcodes/children/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/children/index.print.html" rel="alternate" type="text/html" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/children/test/index.html" title="plank X (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/button/index.html" title="Button (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/children/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/children/test/index.html" title="plank X (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/button/index.html" title="Button (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/children/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Children</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -401,12 +409,12 @@ So its rrrambl'n be used as descript'n.</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -560,13 +568,13 @@ So its rrrambl'n be used as descript'n.</p>
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.print.html b/pir/shortcodes/children/index.print.html
index 65395a00ea..d019783862 100644
--- a/pir/shortcodes/children/index.print.html
+++ b/pir/shortcodes/children/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="canonical" type="text/html" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Children</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -503,8 +507,8 @@ So its rrrambl'n be used as descript'n.</p>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.html b/pir/shortcodes/children/test/index.html
index 7d2ba244e3..3b5c2e248c 100644
--- a/pir/shortcodes/children/test/index.html
+++ b/pir/shortcodes/children/test/index.html
@@ -14,20 +14,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="plank X :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/test/index.print.html" rel="alternate" type="text/html" title="plank X :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470593"></script>
-    <script src="../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553015"></script>
+    <script src="../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,39 +55,43 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../pir/shortcodes/children/children-1/index.html" title="plank 1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../pir/shortcodes/children/index.html" title="Children (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../pir/shortcodes/children/test/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/test.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../pir/shortcodes/children/children-1/index.html" title="plank 1 (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../pir/shortcodes/children/index.html" title="Children (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../pir/shortcodes/children/test/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/test.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank X</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -190,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694470595" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694470595" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694470595" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694470595" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694470595" defer></script>
-        <script src="../../../../js/search.js?1694470595" defer></script>
+        <script src="../../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -349,13 +353,13 @@
               }
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694470595"></script>
+          <script async src="../../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694470595" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470595" defer></script>
-    <script src="../../../../js/theme.js?1694470595" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.print.html b/pir/shortcodes/children/test/index.print.html
index 233050539e..ee988c146d 100644
--- a/pir/shortcodes/children/test/index.print.html
+++ b/pir/shortcodes/children/test/index.print.html
@@ -14,21 +14,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="canonical" type="text/html" title="plank X :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="plank X :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470597"></script>
-    <script src="../../../../js/variant.js?1694470597"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553017"></script>
+    <script src="../../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -56,19 +56,23 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../pir/shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">plank X</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -93,8 +97,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.html b/pir/shortcodes/expand/index.html
index 0b1c2e5183..f8ddf266eb 100644
--- a/pir/shortcodes/expand/index.html
+++ b/pir/shortcodes/expand/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/expand/index.print.html" rel="alternate" type="text/html" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/highlight/index.html" title="Highlight (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/children/children-3/test3/index.html" title="plank 3-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/expand/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/expand.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/highlight/index.html" title="Highlight (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/children/children-3/test3/index.html" title="plank 3-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/expand/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/expand.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Expand</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -120,13 +128,13 @@
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-eb063ec2f5048b55f4d21e3c1567c5d1" aria-controls="expandcontent-eb063ec2f5048b55f4d21e3c1567c5d1" >
-    <label class="expand-label" for="expand-eb063ec2f5048b55f4d21e3c1567c5d1" >
+    <input type="checkbox" id="expand-144ec7e27de618ed99ec695e16b73526" aria-controls="expandcontent-144ec7e27de618ed99ec695e16b73526" >
+    <label class="expand-label" for="expand-144ec7e27de618ed99ec695e16b73526" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-eb063ec2f5048b55f4d21e3c1567c5d1" class="expand-content">
+    <div id="expandcontent-144ec7e27de618ed99ec695e16b73526" class="expand-content">
 
 <p>Thank ye!</p>
 <p>That&rsquo;s some text wit' a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -253,26 +261,26 @@
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-afac8a58459bed7f460380decbf5591a" aria-controls="expandcontent-afac8a58459bed7f460380decbf5591a" >
-    <label class="expand-label" for="expand-afac8a58459bed7f460380decbf5591a" >
+    <input type="checkbox" id="expand-d1fba8017effec3848f1e6a914c3c432" aria-controls="expandcontent-d1fba8017effec3848f1e6a914c3c432" >
+    <label class="expand-label" for="expand-d1fba8017effec3848f1e6a914c3c432" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-afac8a58459bed7f460380decbf5591a" class="expand-content">
+    <div id="expandcontent-d1fba8017effec3848f1e6a914c3c432" class="expand-content">
 <p>
 Yes, ye did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-47400f476e59b2ac5a9d91d86a36803b" aria-controls="expandcontent-47400f476e59b2ac5a9d91d86a36803b"  checked>
-    <label class="expand-label" for="expand-47400f476e59b2ac5a9d91d86a36803b" >
+    <input type="checkbox" id="expand-913b6eac47ced9ff00714324b582e919" aria-controls="expandcontent-913b6eac47ced9ff00714324b582e919"  checked>
+    <label class="expand-label" for="expand-913b6eac47ced9ff00714324b582e919" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-47400f476e59b2ac5a9d91d86a36803b" class="expand-content">
+    <div id="expandcontent-913b6eac47ced9ff00714324b582e919" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -293,13 +301,13 @@ No need t' press ye!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-ff756e61dd93c94e1f3247a704456b42" aria-controls="expandcontent-ff756e61dd93c94e1f3247a704456b42" >
-    <label class="expand-label" for="expand-ff756e61dd93c94e1f3247a704456b42" >
+    <input type="checkbox" id="expand-43a0d2087a7cbb56802601afded4a347" aria-controls="expandcontent-43a0d2087a7cbb56802601afded4a347" >
+    <label class="expand-label" for="expand-43a0d2087a7cbb56802601afded4a347" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="expandcontent-ff756e61dd93c94e1f3247a704456b42" class="expand-content">
+    <div id="expandcontent-43a0d2087a7cbb56802601afded4a347" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -402,12 +410,12 @@ No need t' press ye!</div>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470594" defer></script>
-        <script src="../../../js/search.js?1694470594" defer></script>
+        <script src="../../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -561,13 +569,13 @@ No need t' press ye!</div>
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.print.html b/pir/shortcodes/expand/index.print.html
index 2b00868a2a..c3e8c8f758 100644
--- a/pir/shortcodes/expand/index.print.html
+++ b/pir/shortcodes/expand/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="canonical" type="text/html" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Expand</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -80,13 +84,13 @@
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-eb063ec2f5048b55f4d21e3c1567c5d1" aria-controls="expandcontent-eb063ec2f5048b55f4d21e3c1567c5d1" >
-    <label class="expand-label" for="expand-eb063ec2f5048b55f4d21e3c1567c5d1" >
+    <input type="checkbox" id="expand-144ec7e27de618ed99ec695e16b73526" aria-controls="expandcontent-144ec7e27de618ed99ec695e16b73526" >
+    <label class="expand-label" for="expand-144ec7e27de618ed99ec695e16b73526" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-eb063ec2f5048b55f4d21e3c1567c5d1" class="expand-content">
+    <div id="expandcontent-144ec7e27de618ed99ec695e16b73526" class="expand-content">
 
 <p>Thank ye!</p>
 <p>That&rsquo;s some text wit' a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -213,26 +217,26 @@
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-afac8a58459bed7f460380decbf5591a" aria-controls="expandcontent-afac8a58459bed7f460380decbf5591a" >
-    <label class="expand-label" for="expand-afac8a58459bed7f460380decbf5591a" >
+    <input type="checkbox" id="expand-d1fba8017effec3848f1e6a914c3c432" aria-controls="expandcontent-d1fba8017effec3848f1e6a914c3c432" >
+    <label class="expand-label" for="expand-d1fba8017effec3848f1e6a914c3c432" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-afac8a58459bed7f460380decbf5591a" class="expand-content">
+    <div id="expandcontent-d1fba8017effec3848f1e6a914c3c432" class="expand-content">
 <p>
 Yes, ye did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-47400f476e59b2ac5a9d91d86a36803b" aria-controls="expandcontent-47400f476e59b2ac5a9d91d86a36803b"  checked>
-    <label class="expand-label" for="expand-47400f476e59b2ac5a9d91d86a36803b" >
+    <input type="checkbox" id="expand-913b6eac47ced9ff00714324b582e919" aria-controls="expandcontent-913b6eac47ced9ff00714324b582e919"  checked>
+    <label class="expand-label" for="expand-913b6eac47ced9ff00714324b582e919" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-47400f476e59b2ac5a9d91d86a36803b" class="expand-content">
+    <div id="expandcontent-913b6eac47ced9ff00714324b582e919" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -253,13 +257,13 @@ No need t' press ye!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-ff756e61dd93c94e1f3247a704456b42" aria-controls="expandcontent-ff756e61dd93c94e1f3247a704456b42" >
-    <label class="expand-label" for="expand-ff756e61dd93c94e1f3247a704456b42" >
+    <input type="checkbox" id="expand-43a0d2087a7cbb56802601afded4a347" aria-controls="expandcontent-43a0d2087a7cbb56802601afded4a347" >
+    <label class="expand-label" for="expand-43a0d2087a7cbb56802601afded4a347" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="expandcontent-ff756e61dd93c94e1f3247a704456b42" class="expand-content">
+    <div id="expandcontent-43a0d2087a7cbb56802601afded4a347" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -284,8 +288,8 @@ No need t' press ye!</div>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/highlight/index.html b/pir/shortcodes/highlight/index.html
index 58d114900b..0b57e6a318 100644
--- a/pir/shortcodes/highlight/index.html
+++ b/pir/shortcodes/highlight/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/highlight/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/highlight/index.xml" rel="alternate" type="application/rss+xml" title="Highlight :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/highlight/index.print.html" rel="alternate" type="text/html" title="Highlight :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/icon/index.html" title="Icon (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/expand/index.html" title="Expand (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/highlight/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/highlight.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/icon/index.html" title="Icon (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/expand/index.html" title="Expand (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/highlight/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/highlight.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Highlight</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -134,13 +142,13 @@
 <p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="71c0391c0013104fc2299667be13d42e">
+<div class="tab-panel" data-tab-group="615881d0d843ff5343687231c05afa1d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('71c0391c0013104fc2299667be13d42e','python')"
+      onclick="switchTab('615881d0d843ff5343687231c05afa1d','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -363,13 +371,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="7e3a033777c3bb4c01bf64ebd8287a36">
+<div class="tab-panel" data-tab-group="37bd08df34358e9c04bc5e55ed07238b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('7e3a033777c3bb4c01bf64ebd8287a36','python')"
+      onclick="switchTab('37bd08df34358e9c04bc5e55ed07238b','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -491,12 +499,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470594" defer></script>
-        <script src="../../../js/search.js?1694470594" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -650,13 +658,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/highlight/index.print.html b/pir/shortcodes/highlight/index.print.html
index e7a780030c..6d1d6eb32c 100644
--- a/pir/shortcodes/highlight/index.print.html
+++ b/pir/shortcodes/highlight/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/highlight/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/highlight/index.html" rel="canonical" type="text/html" title="Highlight :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/highlight/index.xml" rel="alternate" type="application/rss+xml" title="Highlight :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Highlight</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -87,13 +91,13 @@
 <p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="71c0391c0013104fc2299667be13d42e">
+<div class="tab-panel" data-tab-group="615881d0d843ff5343687231c05afa1d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('71c0391c0013104fc2299667be13d42e','python')"
+      onclick="switchTab('615881d0d843ff5343687231c05afa1d','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -316,13 +320,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="7e3a033777c3bb4c01bf64ebd8287a36">
+<div class="tab-panel" data-tab-group="37bd08df34358e9c04bc5e55ed07238b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('7e3a033777c3bb4c01bf64ebd8287a36','python')"
+      onclick="switchTab('37bd08df34358e9c04bc5e55ed07238b','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -366,8 +370,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/icon/index.html b/pir/shortcodes/icon/index.html
index b79b20787d..bd37576e8c 100644
--- a/pir/shortcodes/icon/index.html
+++ b/pir/shortcodes/icon/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/icon/index.print.html" rel="alternate" type="text/html" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/include/index.html" title="Include (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/highlight/index.html" title="Highlight (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/icon/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/icon.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/include/index.html" title="Include (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/highlight/index.html" title="Highlight (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/icon/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/icon.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Icon</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -325,12 +333,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470594" defer></script>
-        <script src="../../../js/search.js?1694470594" defer></script>
+        <script src="../../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -484,13 +492,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/icon/index.print.html b/pir/shortcodes/icon/index.print.html
index c470bd7a35..94bbc81879 100644
--- a/pir/shortcodes/icon/index.print.html
+++ b/pir/shortcodes/icon/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="canonical" type="text/html" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Icon</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -206,8 +210,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.html b/pir/shortcodes/include/index.html
index 615548f486..8011d92454 100644
--- a/pir/shortcodes/include/index.html
+++ b/pir/shortcodes/include/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/include/index.print.html" rel="alternate" type="text/html" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/math/index.html" title="Math (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/icon/index.html" title="Icon (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/include/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/include.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/math/index.html" title="Math (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/icon/index.html" title="Icon (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/include/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/include.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Include</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -315,12 +323,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470594" defer></script>
-        <script src="../../../js/search.js?1694470594" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -474,13 +482,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.print.html b/pir/shortcodes/include/index.print.html
index 05f3eadf41..0f72e48703 100644
--- a/pir/shortcodes/include/index.print.html
+++ b/pir/shortcodes/include/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="canonical" type="text/html" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Include</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -199,8 +203,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.html b/pir/shortcodes/index.html
index 1bdfc93c46..d36eafa771 100644
--- a/pir/shortcodes/index.html
+++ b/pir/shortcodes/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/shortcodes/index.print.html" rel="alternate" type="text/html" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,37 +54,41 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../pir/shortcodes/attachments/index.html" title="Attachments (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../pir/cont/taxonomy/index.html" title="Taxonomy (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../pir/shortcodes/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../pir/shortcodes/attachments/index.html" title="Attachments (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../pir/cont/taxonomy/index.html" title="Taxonomy (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../pir/shortcodes/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Shorrrtcodes</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -207,12 +211,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../js/search.js?1694470597" defer></script>
+        <script src="../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -366,13 +370,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../js/theme.js?1694470597" defer></script>
+    <script src="../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.print.html b/pir/shortcodes/index.print.html
index 24506b6922..6fee96113a 100644
--- a/pir/shortcodes/index.print.html
+++ b/pir/shortcodes/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="canonical" type="text/html" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../js/url.js?1694470597"></script>
-    <script src="../../js/variant.js?1694470597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../js/url.js?1694553017"></script>
+    <script src="../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,17 +55,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Shorrrtcodes</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -1365,13 +1369,13 @@ So its rrrambl'n be used as descript'n.</p>
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-eb063ec2f5048b55f4d21e3c1567c5d1" aria-controls="expandcontent-eb063ec2f5048b55f4d21e3c1567c5d1" >
-    <label class="expand-label" for="expand-eb063ec2f5048b55f4d21e3c1567c5d1" >
+    <input type="checkbox" id="expand-144ec7e27de618ed99ec695e16b73526" aria-controls="expandcontent-144ec7e27de618ed99ec695e16b73526" >
+    <label class="expand-label" for="expand-144ec7e27de618ed99ec695e16b73526" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-eb063ec2f5048b55f4d21e3c1567c5d1" class="expand-content">
+    <div id="expandcontent-144ec7e27de618ed99ec695e16b73526" class="expand-content">
 
 <p>Thank ye!</p>
 <p>That&rsquo;s some text wit' a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -1498,26 +1502,26 @@ So its rrrambl'n be used as descript'n.</p>
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-afac8a58459bed7f460380decbf5591a" aria-controls="expandcontent-afac8a58459bed7f460380decbf5591a" >
-    <label class="expand-label" for="expand-afac8a58459bed7f460380decbf5591a" >
+    <input type="checkbox" id="expand-d1fba8017effec3848f1e6a914c3c432" aria-controls="expandcontent-d1fba8017effec3848f1e6a914c3c432" >
+    <label class="expand-label" for="expand-d1fba8017effec3848f1e6a914c3c432" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-afac8a58459bed7f460380decbf5591a" class="expand-content">
+    <div id="expandcontent-d1fba8017effec3848f1e6a914c3c432" class="expand-content">
 <p>
 Yes, ye did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-47400f476e59b2ac5a9d91d86a36803b" aria-controls="expandcontent-47400f476e59b2ac5a9d91d86a36803b"  checked>
-    <label class="expand-label" for="expand-47400f476e59b2ac5a9d91d86a36803b" >
+    <input type="checkbox" id="expand-913b6eac47ced9ff00714324b582e919" aria-controls="expandcontent-913b6eac47ced9ff00714324b582e919"  checked>
+    <label class="expand-label" for="expand-913b6eac47ced9ff00714324b582e919" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-47400f476e59b2ac5a9d91d86a36803b" class="expand-content">
+    <div id="expandcontent-913b6eac47ced9ff00714324b582e919" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -1538,13 +1542,13 @@ No need t' press ye!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-ff756e61dd93c94e1f3247a704456b42" aria-controls="expandcontent-ff756e61dd93c94e1f3247a704456b42" >
-    <label class="expand-label" for="expand-ff756e61dd93c94e1f3247a704456b42" >
+    <input type="checkbox" id="expand-43a0d2087a7cbb56802601afded4a347" aria-controls="expandcontent-43a0d2087a7cbb56802601afded4a347" >
+    <label class="expand-label" for="expand-43a0d2087a7cbb56802601afded4a347" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="expandcontent-ff756e61dd93c94e1f3247a704456b42" class="expand-content">
+    <div id="expandcontent-43a0d2087a7cbb56802601afded4a347" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -1582,13 +1586,13 @@ No need t' press ye!</div>
 <p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="71c0391c0013104fc2299667be13d42e">
+<div class="tab-panel" data-tab-group="615881d0d843ff5343687231c05afa1d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('71c0391c0013104fc2299667be13d42e','python')"
+      onclick="switchTab('615881d0d843ff5343687231c05afa1d','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -1811,13 +1815,13 @@ No need t' press ye!</div>
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="7e3a033777c3bb4c01bf64ebd8287a36">
+<div class="tab-panel" data-tab-group="37bd08df34358e9c04bc5e55ed07238b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('7e3a033777c3bb4c01bf64ebd8287a36','python')"
+      onclick="switchTab('37bd08df34358e9c04bc5e55ed07238b','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -3382,7 +3386,7 @@ Electricity grid,H2 conversion,27.14
 <div class="sc-openapi-wrapper is-load'n helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-e89d11607488f69f768025d876e4150e"
+    id="openapi-b9df731ddbf0b6c951211accae4d3a29"
     openapi-url="../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -3490,13 +3494,13 @@ Electricity grid,H2 conversion,27.14
 <p>T' use formatted parameter, add this 'n yer <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="3b5fe17741db4f3d6fb8132d96f9a594">
+<div class="tab-panel" data-tab-group="1bb8c54595449b50899e72ba74ce3ec5">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('3b5fe17741db4f3d6fb8132d96f9a594','configtoml')"
+      onclick="switchTab('1bb8c54595449b50899e72ba74ce3ec5','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -3534,13 +3538,13 @@ Electricity grid,H2 conversion,27.14
 <p>This be especially useful if ye want t' flag yer code example wit' an explicit language.</p>
 <p>If ye want multiple tabs grouped together ye can wrap yer tabs into th' <a href="../../shortcodes/tabs/"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="da867040ef03a7fa6050e5fc5f961d29">
+<div class="tab-panel" data-tab-group="be52b0ba22b9937defc0e4845df11421">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('da867040ef03a7fa6050e5fc5f961d29','c')"
+      onclick="switchTab('be52b0ba22b9937defc0e4845df11421','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -3654,13 +3658,13 @@ Electricity grid,H2 conversion,27.14
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="1f7a5ffa67ce2fb5f3cca4c7fed296fa">
+<div class="tab-panel" data-tab-group="cf674ea1dc73404428b11f21ec160e52">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('1f7a5ffa67ce2fb5f3cca4c7fed296fa','code')"
+      onclick="switchTab('cf674ea1dc73404428b11f21ec160e52','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -3685,13 +3689,13 @@ Electricity grid,H2 conversion,27.14
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="a72b357e3471451759ddf94ac6f9d1c6">
+<div class="tab-panel" data-tab-group="3c585e87f746ab7af552336fe95bbea3">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="emstrongmixedstrongem"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('a72b357e3471451759ddf94ac6f9d1c6','emstrongmixedstrongem')"
+      onclick="switchTab('3c585e87f746ab7af552336fe95bbea3','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -3739,13 +3743,13 @@ Electricity grid,H2 conversion,27.14
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">an'</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">ay'con</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="5b6b7cce14d9206ae8644631c96490e5">
+<div class="tab-panel" data-tab-group="668bdc1dfc1b5fa78fdabcd3d6d57c49">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-colored-style')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -3755,7 +3759,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-color')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -3765,7 +3769,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','default-style-and-color')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style an' color</div>
@@ -3775,7 +3779,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> just severity style</div>
@@ -3785,7 +3789,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</div>
@@ -3858,13 +3862,13 @@ Electricity grid,H2 conversion,27.14
 <p>This comes 'n handy eg. fer provid'n code snippets fer multiple languages.</p>
 <p>If ye just want a single tab ye can instead call th' <a href="../../shortcodes/tab/"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="a97539806551d51d6abe006ce9a16f06">
+<div class="tab-panel" data-tab-group="a6a154c24c268988c14c443d1c35f028">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','py')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -3874,7 +3878,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','sh')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -3884,7 +3888,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','c')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -4041,13 +4045,13 @@ Electricity grid,H2 conversion,27.14
 <p>See what happens t' th' tab views while ye select different tabs.</p>
 <p>While press'n a tab o' Group A switches all tab views o' Group A 'n sync (if th' tab be available), th' tabs o' Group B be left untouched.</p>
 
-<div class="tab-panel" data-tab-group="bdd3ec3d0da331c777d3c2337f657651">
+<div class="tab-panel" data-tab-group="1e895b51ad5a5bacfe6f63817e645f8b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-a-tab-view-1')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -4057,7 +4061,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-a-tab-view-2')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -4067,7 +4071,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-b')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -4467,8 +4471,8 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470597" defer></script>
+    <script src="../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553018" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -4497,27 +4501,27 @@ Electricity grid,H2 conversion,27.14
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1694470597"></script>
-    <script src="../../js/d3/d3-color.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694470597" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694470597" defer></script>
-    <script src="../../js/js-yaml.min.js?1694470597" defer></script>
-    <script src="../../js/mermaid.min.js?1694470597" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1694553018"></script>
+    <script src="../../js/d3/d3-color.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694553018" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694553018" defer></script>
+    <script src="../../js/js-yaml.min.js?1694553018" defer></script>
+    <script src="../../js/mermaid.min.js?1694553018" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694470597" defer></script>
-    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694470597" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694553018" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694553018" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694470597", assetsBuster:  1694470597  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694553018", assetsBuster:  1694553018  };
     </script>
-    <script src="../../js/theme.js?1694470597" defer></script>
+    <script src="../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/math/index.html b/pir/shortcodes/math/index.html
index c7b888249f..57617f2d56 100644
--- a/pir/shortcodes/math/index.html
+++ b/pir/shortcodes/math/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/math/index.print.html" rel="alternate" type="text/html" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/mermaid/index.html" title="Merrrmaid (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/include/index.html" title="Include (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/math/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/math.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/mermaid/index.html" title="Merrrmaid (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/include/index.html" title="Include (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/math/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/math.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Math</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -382,12 +390,12 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470594" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470594" defer></script>
-        <script src="../../../js/search.js?1694470594" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -541,13 +549,13 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470594"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470594" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470594" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -576,7 +584,7 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1694470594"></script>
-    <script src="../../../js/theme.js?1694470594" defer></script>
+    <script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1694553016"></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/math/index.print.html b/pir/shortcodes/math/index.print.html
index 21230b8802..2de991c085 100644
--- a/pir/shortcodes/math/index.print.html
+++ b/pir/shortcodes/math/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="canonical" type="text/html" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Math</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -257,8 +261,8 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -287,7 +291,7 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1694470597"></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1694553017"></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.html b/pir/shortcodes/mermaid/index.html
index 0dffde6f21..7ee9f70d78 100644
--- a/pir/shortcodes/mermaid/index.html
+++ b/pir/shortcodes/mermaid/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/mermaid/index.print.html" rel="alternate" type="text/html" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/notice/index.html" title="Notice (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/math/index.html" title="Math (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/mermaid/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/mermaid.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/notice/index.html" title="Notice (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/math/index.html" title="Math (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/mermaid/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/mermaid.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Merrrmaid</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -848,12 +856,12 @@ Electricity grid,H2 conversion,27.14
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470595" defer></script>
-        <script src="../../../js/search.js?1694470595" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1007,27 +1015,27 @@ Electricity grid,H2 conversion,27.14
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470595"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470595" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470595" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1694470595" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1694470595" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1694470595" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1694470595" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1694470595" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1694470595" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1694470595" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1694470595" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1694470595" defer></script>
-    <script src="../../../js/js-yaml.min.js?1694470595" defer></script>
-    <script src="../../../js/mermaid.min.js?1694470595" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1694553016" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1694553016" defer></script>
+    <script src="../../../js/js-yaml.min.js?1694553016" defer></script>
+    <script src="../../../js/mermaid.min.js?1694553016" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1694470595" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.print.html b/pir/shortcodes/mermaid/index.print.html
index 26fe41f4bf..7674d45a35 100644
--- a/pir/shortcodes/mermaid/index.print.html
+++ b/pir/shortcodes/mermaid/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="canonical" type="text/html" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Merrrmaid</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -712,22 +716,22 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1694470597" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1694470597" defer></script>
-    <script src="../../../js/js-yaml.min.js?1694470597" defer></script>
-    <script src="../../../js/mermaid.min.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1694553017" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1694553017" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1694553017" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1694553017" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1694553017" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1694553017" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1694553017" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1694553017" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1694553017" defer></script>
+    <script src="../../../js/js-yaml.min.js?1694553017" defer></script>
+    <script src="../../../js/mermaid.min.js?1694553017" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.html b/pir/shortcodes/notice/index.html
index b19330fead..af99712d75 100644
--- a/pir/shortcodes/notice/index.html
+++ b/pir/shortcodes/notice/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/notice/index.print.html" rel="alternate" type="text/html" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/openapi/index.html" title="OpenAPI (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/mermaid/index.html" title="Merrrmaid (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/notice/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/notice.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/openapi/index.html" title="OpenAPI (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/mermaid/index.html" title="Merrrmaid (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/notice/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/notice.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Notice</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -546,12 +554,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470595" defer></script>
-        <script src="../../../js/search.js?1694470595" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -705,13 +713,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470595"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470595" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470595" defer></script>
-    <script src="../../../js/theme.js?1694470595" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.print.html b/pir/shortcodes/notice/index.print.html
index 095917edd4..8827bee519 100644
--- a/pir/shortcodes/notice/index.print.html
+++ b/pir/shortcodes/notice/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="canonical" type="text/html" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Notice</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -426,8 +430,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/openapi/index.html b/pir/shortcodes/openapi/index.html
index b54a4243ed..2635de323b 100644
--- a/pir/shortcodes/openapi/index.html
+++ b/pir/shortcodes/openapi/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/openapi/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/openapi/index.xml" rel="alternate" type="application/rss+xml" title="OpenAPI :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/openapi/index.print.html" rel="alternate" type="text/html" title="OpenAPI :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/siteparam/index.html" title="SiteParam (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/notice/index.html" title="Notice (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/openapi/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/openapi/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/siteparam/index.html" title="SiteParam (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/notice/index.html" title="Notice (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/openapi/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/openapi/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">OpenAPI</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -203,7 +211,7 @@
 <div class="sc-openapi-wrapper is-load'n helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-e89d11607488f69f768025d876e4150e"
+    id="openapi-b9df731ddbf0b6c951211accae4d3a29"
     openapi-url="../../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -295,12 +303,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -454,19 +462,19 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1694470597" defer></script>
-    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1694470597" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1694553017" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1694553017" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694470597", assetsBuster:  1694470597  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694553017", assetsBuster:  1694553017  };
     </script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/openapi/index.print.html b/pir/shortcodes/openapi/index.print.html
index 3e69077549..282eb570c8 100644
--- a/pir/shortcodes/openapi/index.print.html
+++ b/pir/shortcodes/openapi/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/openapi/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/openapi/index.html" rel="canonical" type="text/html" title="OpenAPI :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/openapi/index.xml" rel="alternate" type="application/rss+xml" title="OpenAPI :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">OpenAPI</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -165,7 +169,7 @@
 <div class="sc-openapi-wrapper is-load'n helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-e89d11607488f69f768025d876e4150e"
+    id="openapi-b9df731ddbf0b6c951211accae4d3a29"
     openapi-url="../../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -179,14 +183,14 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553018" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1694470597" defer></script>
-    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1694470597" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1694553018" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1694553018" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694470597", assetsBuster:  1694470597  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694553018", assetsBuster:  1694553018  };
     </script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.html b/pir/shortcodes/siteparam/index.html
index b22589921b..380b10fb0d 100644
--- a/pir/shortcodes/siteparam/index.html
+++ b/pir/shortcodes/siteparam/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="SiteParam :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/siteparam/index.print.html" rel="alternate" type="text/html" title="SiteParam :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/tab/index.html" title="Tab (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/openapi/index.html" title="OpenAPI (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/siteparam/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/siteparam.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/tab/index.html" title="Tab (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/openapi/index.html" title="OpenAPI (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/siteparam/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/siteparam.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">SiteParam</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -207,13 +215,13 @@
 <p>T' use formatted parameter, add this 'n yer <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="3b5fe17741db4f3d6fb8132d96f9a594">
+<div class="tab-panel" data-tab-group="1bb8c54595449b50899e72ba74ce3ec5">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('3b5fe17741db4f3d6fb8132d96f9a594','configtoml')"
+      onclick="switchTab('1bb8c54595449b50899e72ba74ce3ec5','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -322,12 +330,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470595" defer></script>
-        <script src="../../../js/search.js?1694470595" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -481,13 +489,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470595"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470595" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470595" defer></script>
-    <script src="../../../js/theme.js?1694470595" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.print.html b/pir/shortcodes/siteparam/index.print.html
index fcad333953..e3861eec7e 100644
--- a/pir/shortcodes/siteparam/index.print.html
+++ b/pir/shortcodes/siteparam/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="canonical" type="text/html" title="SiteParam :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="SiteParam :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">SiteParam</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -168,13 +172,13 @@
 <p>T' use formatted parameter, add this 'n yer <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="3b5fe17741db4f3d6fb8132d96f9a594">
+<div class="tab-panel" data-tab-group="1bb8c54595449b50899e72ba74ce3ec5">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('3b5fe17741db4f3d6fb8132d96f9a594','configtoml')"
+      onclick="switchTab('1bb8c54595449b50899e72ba74ce3ec5','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -205,8 +209,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tab/index.html b/pir/shortcodes/tab/index.html
index 01f7f14a01..de9af38607 100644
--- a/pir/shortcodes/tab/index.html
+++ b/pir/shortcodes/tab/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tab/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/tab/index.xml" rel="alternate" type="application/rss+xml" title="Tab :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/tab/index.print.html" rel="alternate" type="text/html" title="Tab :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../pir/shortcodes/tabs/index.html" title="Tabs (🡐)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/siteparam/index.html" title="SiteParam (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/tab/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/tab.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../pir/shortcodes/tabs/index.html" title="Tabs (🡐)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/siteparam/index.html" title="SiteParam (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/tab/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/tab.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tab</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -121,13 +129,13 @@
 <p>This be especially useful if ye want t' flag yer code example wit' an explicit language.</p>
 <p>If ye want multiple tabs grouped together ye can wrap yer tabs into th' <a href="../../../shortcodes/tabs/"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="da867040ef03a7fa6050e5fc5f961d29">
+<div class="tab-panel" data-tab-group="be52b0ba22b9937defc0e4845df11421">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('da867040ef03a7fa6050e5fc5f961d29','c')"
+      onclick="switchTab('be52b0ba22b9937defc0e4845df11421','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -241,13 +249,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="1f7a5ffa67ce2fb5f3cca4c7fed296fa">
+<div class="tab-panel" data-tab-group="cf674ea1dc73404428b11f21ec160e52">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('1f7a5ffa67ce2fb5f3cca4c7fed296fa','code')"
+      onclick="switchTab('cf674ea1dc73404428b11f21ec160e52','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -272,13 +280,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="a72b357e3471451759ddf94ac6f9d1c6">
+<div class="tab-panel" data-tab-group="3c585e87f746ab7af552336fe95bbea3">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="emstrongmixedstrongem"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('a72b357e3471451759ddf94ac6f9d1c6','emstrongmixedstrongem')"
+      onclick="switchTab('3c585e87f746ab7af552336fe95bbea3','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -326,13 +334,13 @@
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">an'</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">ay'con</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="5b6b7cce14d9206ae8644631c96490e5">
+<div class="tab-panel" data-tab-group="668bdc1dfc1b5fa78fdabcd3d6d57c49">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-colored-style')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -342,7 +350,7 @@
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-color')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -352,7 +360,7 @@
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','default-style-and-color')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style an' color</div>
@@ -362,7 +370,7 @@
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> just severity style</div>
@@ -372,7 +380,7 @@
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</div>
@@ -516,12 +524,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470595" defer></script>
-        <script src="../../../js/search.js?1694470595" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -675,13 +683,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470595"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470595" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470595" defer></script>
-    <script src="../../../js/theme.js?1694470595" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tab/index.print.html b/pir/shortcodes/tab/index.print.html
index 99ac3c0b11..ce95f5a4cc 100644
--- a/pir/shortcodes/tab/index.print.html
+++ b/pir/shortcodes/tab/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tab/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tab/index.html" rel="canonical" type="text/html" title="Tab :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/tab/index.xml" rel="alternate" type="application/rss+xml" title="Tab :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tab</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -81,13 +85,13 @@
 <p>This be especially useful if ye want t' flag yer code example wit' an explicit language.</p>
 <p>If ye want multiple tabs grouped together ye can wrap yer tabs into th' <a href="../../../shortcodes/tabs/"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="da867040ef03a7fa6050e5fc5f961d29">
+<div class="tab-panel" data-tab-group="be52b0ba22b9937defc0e4845df11421">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('da867040ef03a7fa6050e5fc5f961d29','c')"
+      onclick="switchTab('be52b0ba22b9937defc0e4845df11421','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -201,13 +205,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="1f7a5ffa67ce2fb5f3cca4c7fed296fa">
+<div class="tab-panel" data-tab-group="cf674ea1dc73404428b11f21ec160e52">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('1f7a5ffa67ce2fb5f3cca4c7fed296fa','code')"
+      onclick="switchTab('cf674ea1dc73404428b11f21ec160e52','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -232,13 +236,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="a72b357e3471451759ddf94ac6f9d1c6">
+<div class="tab-panel" data-tab-group="3c585e87f746ab7af552336fe95bbea3">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="emstrongmixedstrongem"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('a72b357e3471451759ddf94ac6f9d1c6','emstrongmixedstrongem')"
+      onclick="switchTab('3c585e87f746ab7af552336fe95bbea3','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -286,13 +290,13 @@
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">an'</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">ay'con</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="5b6b7cce14d9206ae8644631c96490e5">
+<div class="tab-panel" data-tab-group="668bdc1dfc1b5fa78fdabcd3d6d57c49">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-colored-style')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -302,7 +306,7 @@
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-color')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -312,7 +316,7 @@
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','default-style-and-color')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style an' color</div>
@@ -322,7 +326,7 @@
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> just severity style</div>
@@ -332,7 +336,7 @@
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('5b6b7cce14d9206ae8644631c96490e5','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('668bdc1dfc1b5fa78fdabcd3d6d57c49','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</div>
@@ -398,8 +402,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.html b/pir/shortcodes/tabs/index.html
index 8e18ea38dc..dbefc5535e 100644
--- a/pir/shortcodes/tabs/index.html
+++ b/pir/shortcodes/tabs/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/tabs/index.print.html" rel="alternate" type="text/html" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/shortcodes/tab/index.html" title="Tab (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../pir/shortcodes/tabs/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/tabs.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/shortcodes/tab/index.html" title="Tab (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../pir/shortcodes/tabs/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/tabs.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tabs</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -120,13 +128,13 @@
 <p>This comes 'n handy eg. fer provid'n code snippets fer multiple languages.</p>
 <p>If ye just want a single tab ye can instead call th' <a href="../../../shortcodes/tab/"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="a97539806551d51d6abe006ce9a16f06">
+<div class="tab-panel" data-tab-group="a6a154c24c268988c14c443d1c35f028">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','py')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -136,7 +144,7 @@
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','sh')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -146,7 +154,7 @@
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','c')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -303,13 +311,13 @@
 <p>See what happens t' th' tab views while ye select different tabs.</p>
 <p>While press'n a tab o' Group A switches all tab views o' Group A 'n sync (if th' tab be available), th' tabs o' Group B be left untouched.</p>
 
-<div class="tab-panel" data-tab-group="bdd3ec3d0da331c777d3c2337f657651">
+<div class="tab-panel" data-tab-group="1e895b51ad5a5bacfe6f63817e645f8b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-a-tab-view-1')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -319,7 +327,7 @@
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-a-tab-view-2')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -329,7 +337,7 @@
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-b')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -806,12 +814,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470595" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470595" defer></script>
-        <script src="../../../js/search.js?1694470595" defer></script>
+        <script src="../../../js/auto-complete.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553016" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553016" defer></script>
+        <script src="../../../js/search.js?1694553016" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -965,13 +973,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470595"></script>
+          <script async src="../../../js/github-buttons.js?1694553016"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470595" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470595" defer></script>
-    <script src="../../../js/theme.js?1694470595" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553016" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553016" defer></script>
+    <script src="../../../js/theme.js?1694553016" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.print.html b/pir/shortcodes/tabs/index.print.html
index b5b0b7a4d3..3bc098814c 100644
--- a/pir/shortcodes/tabs/index.print.html
+++ b/pir/shortcodes/tabs/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="canonical" type="text/html" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../../js/url.js?1694470597"></script>
-    <script src="../../../js/variant.js?1694470597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../../js/url.js?1694553017"></script>
+    <script src="../../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tabs</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -81,13 +85,13 @@
 <p>This comes 'n handy eg. fer provid'n code snippets fer multiple languages.</p>
 <p>If ye just want a single tab ye can instead call th' <a href="../../../shortcodes/tab/"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="a97539806551d51d6abe006ce9a16f06">
+<div class="tab-panel" data-tab-group="a6a154c24c268988c14c443d1c35f028">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','py')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -97,7 +101,7 @@
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','sh')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -107,7 +111,7 @@
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('a97539806551d51d6abe006ce9a16f06','c')"
+      onclick="switchTab('a6a154c24c268988c14c443d1c35f028','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -264,13 +268,13 @@
 <p>See what happens t' th' tab views while ye select different tabs.</p>
 <p>While press'n a tab o' Group A switches all tab views o' Group A 'n sync (if th' tab be available), th' tabs o' Group B be left untouched.</p>
 
-<div class="tab-panel" data-tab-group="bdd3ec3d0da331c777d3c2337f657651">
+<div class="tab-panel" data-tab-group="1e895b51ad5a5bacfe6f63817e645f8b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-a-tab-view-1')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -280,7 +284,7 @@
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-a-tab-view-2')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -290,7 +294,7 @@
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bdd3ec3d0da331c777d3c2337f657651','group-b')"
+      onclick="switchTab('1e895b51ad5a5bacfe6f63817e645f8b','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -689,8 +693,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/showcase/index.html b/pir/showcase/index.html
index ef935e5bea..75ceb71db5 100644
--- a/pir/showcase/index.html
+++ b/pir/showcase/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/showcase/index.print.html" rel="alternate" type="text/html" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,38 +54,46 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../pir/shortcodes/tabs/index.html" title="Tabs (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../pir/showcase/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/showcase/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../pir/shortcodes/tabs/index.html" title="Tabs (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../pir/showcase/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/showcase/_index.pir.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Showcase</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -108,14 +116,14 @@
 
 
 <h2 id="gobolinux-wikihttpswikigobolinuxorg-by-neonsysorg"><a href="https://wiki.gobolinux.org/" target="_blank">GoboLinux Wiki</a> by NEONsys.org</h2>
-<p><a href="#image-9d8af5f9d8ecd79b3a84850783babfdc" class="lightbox-link"><img src="../../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-9d8af5f9d8ecd79b3a84850783babfdc"><img src="../../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-efab61be24c7a9e594d01ef3823200bc" class="lightbox-link"><img src="../../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-efab61be24c7a9e594d01ef3823200bc"><img src="../../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="bitshttpsbits-trainingdetraining-by-dr-lutz-gollan"><a href="https://bits-train'n.de/training/" target="_blank">BITS</a> by Dr. Lutz Gollan</h2>
-<p><a href="#image-83f492356b5b97a0b52dea33c6a97c8e" class="lightbox-link"><img src="../../showcase/bits-train.png?width=60pc" alt="BITS image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-83f492356b5b97a0b52dea33c6a97c8e"><img src="../../showcase/bits-train.png?width=60pc" alt="BITS image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-5e91a039fa64c3b4e5ab3b4b9ea74833" class="lightbox-link"><img src="../../showcase/bits-train.png?width=60pc" alt="BITS image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5e91a039fa64c3b4e5ab3b4b9ea74833"><img src="../../showcase/bits-train.png?width=60pc" alt="BITS image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="pamasol-electricshttpspamasolgithubiode-by-pamasol"><a href="https://pamasol.github.io/de/" target="_blank">Pamasol Electrics</a> by Pamasol</h2>
-<p><a href="#image-df4fe51b2fcd6dfc3e0708780b2bcb25" class="lightbox-link"><img src="../../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-df4fe51b2fcd6dfc3e0708780b2bcb25"><img src="../../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-94c6c7c58b1e443de6e3c7085eb7a62c" class="lightbox-link"><img src="../../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-94c6c7c58b1e443de6e3c7085eb7a62c"><img src="../../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -204,12 +212,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../js/search.js?1694470597" defer></script>
+        <script src="../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -363,13 +371,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../js/theme.js?1694470597" defer></script>
+    <script src="../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/showcase/index.print.html b/pir/showcase/index.print.html
index 40c105ca6c..fea15049ec 100644
--- a/pir/showcase/index.print.html
+++ b/pir/showcase/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/showcase/index.html" rel="canonical" type="text/html" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470597" rel="stylesheet">
-    <link href="../../css/print.css?1694470597" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470597" rel="stylesheet">
-    <link href="../../css/ie.css?1694470597" rel="stylesheet">
-    <script src="../../js/url.js?1694470597"></script>
-    <script src="../../js/variant.js?1694470597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553017" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553017" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553017" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553017" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553017" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553017" rel="stylesheet">
+    <link href="../../css/print.css?1694553017" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553017" rel="stylesheet">
+    <link href="../../css/ie.css?1694553017" rel="stylesheet">
+    <script src="../../js/url.js?1694553017"></script>
+    <script src="../../js/variant.js?1694553017"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,17 +55,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Showcase</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -77,14 +81,14 @@
 
 
 <h2 id="gobolinux-wikihttpswikigobolinuxorg-by-neonsysorg"><a href="https://wiki.gobolinux.org/" target="_blank">GoboLinux Wiki</a> by NEONsys.org</h2>
-<p><a href="#image-9d8af5f9d8ecd79b3a84850783babfdc" class="lightbox-link"><img src="../../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-9d8af5f9d8ecd79b3a84850783babfdc"><img src="../../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-efab61be24c7a9e594d01ef3823200bc" class="lightbox-link"><img src="../../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-efab61be24c7a9e594d01ef3823200bc"><img src="../../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="bitshttpsbits-trainingdetraining-by-dr-lutz-gollan"><a href="https://bits-train'n.de/training/" target="_blank">BITS</a> by Dr. Lutz Gollan</h2>
-<p><a href="#image-83f492356b5b97a0b52dea33c6a97c8e" class="lightbox-link"><img src="../../showcase/bits-train.png?width=60pc" alt="BITS image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-83f492356b5b97a0b52dea33c6a97c8e"><img src="../../showcase/bits-train.png?width=60pc" alt="BITS image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-5e91a039fa64c3b4e5ab3b4b9ea74833" class="lightbox-link"><img src="../../showcase/bits-train.png?width=60pc" alt="BITS image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-5e91a039fa64c3b4e5ab3b4b9ea74833"><img src="../../showcase/bits-train.png?width=60pc" alt="BITS image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="pamasol-electricshttpspamasolgithubiode-by-pamasol"><a href="https://pamasol.github.io/de/" target="_blank">Pamasol Electrics</a> by Pamasol</h2>
-<p><a href="#image-df4fe51b2fcd6dfc3e0708780b2bcb25" class="lightbox-link"><img src="../../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-df4fe51b2fcd6dfc3e0708780b2bcb25"><img src="../../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-94c6c7c58b1e443de6e3c7085eb7a62c" class="lightbox-link"><img src="../../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-94c6c7c58b1e443de6e3c7085eb7a62c"><img src="../../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -95,8 +99,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../js/theme.js?1694470597" defer></script>
+    <script src="../../js/clipboard.min.js?1694553018" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553018" defer></script>
+    <script src="../../js/theme.js?1694553018" defer></script>
   </body>
 </html>
diff --git a/pir/tags/children/index.html b/pir/tags/children/index.html
index eabf23816e..54b85fa100 100644
--- a/pir/tags/children/index.html
+++ b/pir/tags/children/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/children/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Tak :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/tags/index.html"><span itemprop="name">Taks</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tak :: Children</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -185,12 +189,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -344,13 +348,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/tags/config/index.html b/pir/tags/config/index.html
index 3d39fbfe24..afeec10569 100644
--- a/pir/tags/config/index.html
+++ b/pir/tags/config/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/config/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/config/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/config/index.xml" rel="alternate" type="application/rss+xml" title="config :: Tak :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/tags/index.html"><span itemprop="name">Taks</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tak :: config</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/tags/content/index.html b/pir/tags/content/index.html
index e069e2114d..08d9075093 100644
--- a/pir/tags/content/index.html
+++ b/pir/tags/content/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/content/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/content/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/content/index.xml" rel="alternate" type="application/rss+xml" title="Content :: Tak :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/tags/index.html"><span itemprop="name">Taks</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tak :: Content</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/tags/documentatn/index.html b/pir/tags/documentatn/index.html
index de7b0d1ae0..12969c8bd6 100644
--- a/pir/tags/documentatn/index.html
+++ b/pir/tags/documentatn/index.html
@@ -9,20 +9,20 @@
     <meta name="author" content="Sören Weber">
     <title>documentat&#39;n :: Tak :: Cap&#39;n Hugo Relearrrn Theme</title>
     <link href="../../../pir/tags/documentatn/index.xml" rel="alternate" type="application/rss+xml" title="documentat&#39;n :: Tak :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -50,28 +50,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/tags/index.html"><span itemprop="name">Taks</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tak :: documentat&#39;n</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -168,12 +172,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -326,13 +330,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/tags/hidden/index.html b/pir/tags/hidden/index.html
index fd17396678..7f16189f51 100644
--- a/pir/tags/hidden/index.html
+++ b/pir/tags/hidden/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/hidden/index.xml" rel="alternate" type="application/rss+xml" title="hidden :: Tak :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/tags/index.html"><span itemprop="name">Taks</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tak :: hidden</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -175,12 +179,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -334,13 +338,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/tags/index.html b/pir/tags/index.html
index c8ee191db2..f3ca738706 100644
--- a/pir/tags/index.html
+++ b/pir/tags/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/tags/index.xml" rel="alternate" type="application/rss+xml" title="Taks :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,36 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table o&#39; Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Taks</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -203,12 +211,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../js/search.js?1694470597" defer></script>
+        <script src="../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -362,13 +370,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../js/theme.js?1694470597" defer></script>
+    <script src="../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/tags/non-hidden/index.html b/pir/tags/non-hidden/index.html
index a52f22e3b1..aa94b93386 100644
--- a/pir/tags/non-hidden/index.html
+++ b/pir/tags/non-hidden/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/non-hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/non-hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/non-hidden/index.xml" rel="alternate" type="application/rss+xml" title="non-hidden :: Tak :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/tags/index.html"><span itemprop="name">Taks</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tak :: non-hidden</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -179,12 +183,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -338,13 +342,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/pir/tags/tutorrrial/index.html b/pir/tags/tutorrrial/index.html
index 74de62a357..3c6f26346d 100644
--- a/pir/tags/tutorrrial/index.html
+++ b/pir/tags/tutorrrial/index.html
@@ -9,20 +9,20 @@
     <meta name="author" content="Sören Weber">
     <title>tutorrrial :: Tak :: Cap&#39;n Hugo Relearrrn Theme</title>
     <link href="../../../pir/tags/tutorrrial/index.xml" rel="alternate" type="application/rss+xml" title="tutorrrial :: Tak :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1694470593" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553015" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -50,28 +50,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/tags/index.html"><span itemprop="name">Taks</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tak :: tutorrrial</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -168,12 +172,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470597" defer></script>
-        <script src="../../../js/search.js?1694470597" defer></script>
+        <script src="../../../js/auto-complete.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553017" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553017" defer></script>
+        <script src="../../../js/search.js?1694553017" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -326,13 +330,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470597"></script>
+          <script async src="../../../js/github-buttons.js?1694553017"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470597" defer></script>
-    <script src="../../../js/theme.js?1694470597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553017" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553017" defer></script>
+    <script src="../../../js/theme.js?1694553017" defer></script>
   </body>
 </html>
diff --git a/search.html b/search.html
index 19fc289c14..b2f8cfed1b 100644
--- a/search.html
+++ b/search.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/search.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/search.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/search.html" rel="canonical" type="text/html" title="Search :: Hugo Relearn Theme">
-    <link href="./images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="./css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="./css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1694470593" rel="stylesheet">
-    <link href="./css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="./css/variant.css?1694470593" rel="stylesheet">
-    <link href="./css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="./css/ie.css?1694470593" rel="stylesheet">
-    <script src="./js/url.js?1694470593"></script>
-    <script src="./js/variant.js?1694470593"></script>
+    <link href="./css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="./css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="./css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1694553015" rel="stylesheet">
+    <link href="./css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="./css/variant.css?1694553015" rel="stylesheet">
+    <link href="./css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="./css/ie.css?1694553015" rel="stylesheet">
+    <script src="./js/url.js?1694553015"></script>
+    <script src="./js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,26 +53,30 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="./index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="./index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Hugo Relearn Theme</span><meta itemprop="position" content="1"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable home" tabindex="-1">
@@ -185,12 +189,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="./js/auto-complete.js?1694470593" defer></script>
-        <script src="./js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="./js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="./js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="./js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="./js/search.js?1694470593" defer></script>
+        <script src="./js/auto-complete.js?1694553015" defer></script>
+        <script src="./js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="./js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="./js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="./js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="./js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -344,13 +348,13 @@
               }
             });
           </script>
-          <script async src="./js/github-buttons.js?1694470593"></script>
+          <script async src="./js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="./js/clipboard.min.js?1694470593" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="./js/theme.js?1694470593" defer></script>
+    <script src="./js/clipboard.min.js?1694553015" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="./js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.html b/shortcodes/attachments/index.html
index 2b520a4df1..3c839e1cc4 100644
--- a/shortcodes/attachments/index.html
+++ b/shortcodes/attachments/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Hugo Relearn Theme">
     <link href="../../shortcodes/attachments/index.print.html" rel="alternate" type="text/html" title="Attachments :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/badge/index.html" title="Badge (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/index.html" title="Shortcodes (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/attachments/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/attachments/index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/badge/index.html" title="Badge (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/index.html" title="Shortcodes (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/attachments/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/attachments/index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Attachments</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -457,12 +465,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -616,13 +624,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.print.html b/shortcodes/attachments/index.print.html
index 4c12bd1361..432569cf7c 100644
--- a/shortcodes/attachments/index.print.html
+++ b/shortcodes/attachments/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/attachments/index.html" rel="canonical" type="text/html" title="Attachments :: Hugo Relearn Theme">
     <link href="../../shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Attachments</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -332,8 +336,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/badge/index.html b/shortcodes/badge/index.html
index e0f25cc9c4..9bdfd60896 100644
--- a/shortcodes/badge/index.html
+++ b/shortcodes/badge/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Hugo Relearn Theme">
     <link href="../../shortcodes/badge/index.print.html" rel="alternate" type="text/html" title="Badge :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/button/index.html" title="Button (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/attachments/index.html" title="Attachments (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/badge/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/badge.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/button/index.html" title="Button (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/attachments/index.html" title="Attachments (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/badge/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/badge.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Badge</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -396,12 +404,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -555,13 +563,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/badge/index.print.html b/shortcodes/badge/index.print.html
index b76732796b..f4e35e5b68 100644
--- a/shortcodes/badge/index.print.html
+++ b/shortcodes/badge/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/badge/index.html" rel="canonical" type="text/html" title="Badge :: Hugo Relearn Theme">
     <link href="../../shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Badge</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -278,8 +282,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.html b/shortcodes/button/index.html
index 398639747c..e4c4db7f11 100644
--- a/shortcodes/button/index.html
+++ b/shortcodes/button/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Hugo Relearn Theme">
     <link href="../../shortcodes/button/index.print.html" rel="alternate" type="text/html" title="Button :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/children/index.html" title="Children (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/badge/index.html" title="Badge (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/button/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/button.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/children/index.html" title="Children (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/badge/index.html" title="Badge (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/button/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/button.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Button</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -536,12 +544,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -695,13 +703,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.print.html b/shortcodes/button/index.print.html
index 39519c27d3..103384d430 100644
--- a/shortcodes/button/index.print.html
+++ b/shortcodes/button/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/button/index.html" rel="canonical" type="text/html" title="Button :: Hugo Relearn Theme">
     <link href="../../shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Button</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -417,8 +421,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
index 5637ace598..0f6f2371c9 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1694470592"></script>
-    <script src="../../../../../../../../js/variant.js?1694470592"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1694553014"></script>
+    <script src="../../../../../../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,33 +53,37 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" title="page 1-1-1-1-1 (hidden) (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" title="page 1-1-1-1-1 (hidden) (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -90,7 +94,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html"><span itemprop="name">page 1-1-1-1-1 (hidden)</span></a><meta itemprop="position" content="8">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-1-1-1-1</span><meta itemprop="position" content="9"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -192,12 +196,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../../../../../../js/search.js?1694470593" defer></script>
+        <script src="../../../../../../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../../../../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -355,13 +359,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../../../../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../../../../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
index 1df15a754d..80f9e3907c 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,13 +54,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -71,7 +75,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html"><span itemprop="name">page 1-1-1-1-1 (hidden)</span></a><meta itemprop="position" content="8">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-1-1-1-1</span><meta itemprop="position" content="9"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -95,8 +99,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../../../../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
index ab5aa5ecb8..2ddaf781f0 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694470592"></script>
-    <script src="../../../../../../../js/variant.js?1694470592"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694553014"></script>
+    <script src="../../../../../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,34 +53,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" title="page 1-1-1-1-1-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" title="page 1-1-1-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" title="page 1-1-1-1-1-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" title="page 1-1-1-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -90,7 +98,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html"><span itemprop="name">page 1-1-1-1</span></a><meta itemprop="position" content="7">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-1-1-1 (hidden)</span><meta itemprop="position" content="8"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -207,12 +215,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../../../../../js/search.js?1694470593" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../../../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -370,13 +378,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../../../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
index e5522fc453..778de15ce9 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,13 +54,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -70,7 +74,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html"><span itemprop="name">page 1-1-1-1</span></a><meta itemprop="position" content="7">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-1-1-1 (hidden)</span><meta itemprop="position" content="8"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -119,8 +123,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../../../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
index 6de7bec46a..174a78252f 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470592"></script>
-    <script src="../../../../../../js/variant.js?1694470592"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553014"></script>
+    <script src="../../../../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,34 +53,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" title="page 1-1-1 (hidden) (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" title="page 1-1-1 (hidden) (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -89,7 +97,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html"><span itemprop="name">page 1-1-1 (hidden)</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-1-1</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -206,12 +214,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/search.js?1694470593" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -367,13 +375,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
index 7a436e7ab8..bef2443519 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,13 +54,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -69,7 +73,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html"><span itemprop="name">page 1-1-1 (hidden)</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-1-1</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -102,8 +106,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
index 43be874947..548c2db6d7 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694470592"></script>
-    <script src="../../../../../js/variant.js?1694470592"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694553014"></script>
+    <script src="../../../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,34 +53,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" title="page 1-1-1-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../shortcodes/children/children-1/children-1-1/index.html" title="page 1-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" title="page 1-1-1-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../shortcodes/children/children-1/children-1-1/index.html" title="page 1-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -88,7 +96,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">page 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-1 (hidden)</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -205,12 +213,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../../../js/search.js?1694470593" defer></script>
+        <script src="../../../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -366,13 +374,13 @@
               }
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
index 86af4ade29..1ffea6e57d 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,13 +54,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -68,7 +72,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">page 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-1 (hidden)</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -126,8 +130,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
index 3d5ebccd6a..b0a8feb746 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-1 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html" rel="alternate" type="text/html" title="page 1-1-2-1 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470592"></script>
-    <script src="../../../../../../js/variant.js?1694470592"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553014"></script>
+    <script src="../../../../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,33 +54,37 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" title="page 1-1-2-2 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" title="page 1-1-2-2 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -89,7 +93,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html"><span itemprop="name">page 1-1-2</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-2-1</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -191,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/search.js?1694470593" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -350,13 +354,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
index 23128884fd..620bbb141b 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="canonical" type="text/html" title="page 1-1-2-1 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-1 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,13 +55,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -70,7 +74,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html"><span itemprop="name">page 1-1-2</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-2-1</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -94,8 +98,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
index f202e46410..ce18c40af1 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-2 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html" rel="alternate" type="text/html" title="page 1-1-2-2 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470592"></script>
-    <script src="../../../../../../js/variant.js?1694470592"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553014"></script>
+    <script src="../../../../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,33 +54,37 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="page 1-1-3 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" title="page 1-1-2-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="page 1-1-3 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" title="page 1-1-2-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -89,7 +93,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html"><span itemprop="name">page 1-1-2</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-2-2</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -191,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../../../../js/search.js?1694470593" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -350,13 +354,13 @@
               }
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
index 6f81e68ec7..f023da8d09 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="canonical" type="text/html" title="page 1-1-2-2 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-2 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,13 +55,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -70,7 +74,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html"><span itemprop="name">page 1-1-2</span></a><meta itemprop="position" content="6">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-2-2</span><meta itemprop="position" content="7"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -94,8 +98,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
index 3f0dddce6e..71cbed5db0 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2 :: Hugo Relearn Theme">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html" rel="alternate" type="text/html" title="page 1-1-2 :: Hugo Relearn Theme">
-    <link href="../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694470592"></script>
-    <script src="../../../../../js/variant.js?1694470592"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694553014"></script>
+    <script src="../../../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,34 +54,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" title="page 1-1-2-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../shortcodes/children/children-1/children-1-1/index.html" title="page 1-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" title="page 1-1-2-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../shortcodes/children/children-1/children-1-1/index.html" title="page 1-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -89,7 +97,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">page 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-2</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -207,12 +215,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../../../js/search.js?1694470593" defer></script>
+        <script src="../../../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -366,13 +374,13 @@
               }
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
index 05e24313b9..5aefd99f86 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="canonical" type="text/html" title="page 1-1-2 :: Hugo Relearn Theme">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2 :: Hugo Relearn Theme">
-    <link href="../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,13 +55,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -69,7 +73,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">page 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-2</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -135,8 +139,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
index d78545f74d..3014dd6ef7 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-3 :: Hugo Relearn Theme">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html" rel="alternate" type="text/html" title="page 1-1-3 :: Hugo Relearn Theme">
-    <link href="../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694470592"></script>
-    <script src="../../../../../js/variant.js?1694470592"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694553014"></script>
+    <script src="../../../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,33 +54,37 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../../shortcodes/children/children-2/index.html" title="page 2 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" title="page 1-1-2-2 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-3/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../../shortcodes/children/children-2/index.html" title="page 2 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" title="page 1-1-2-2 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-3/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -88,7 +92,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">page 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-3</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -190,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../../../js/search.js?1694470593" defer></script>
+        <script src="../../../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -349,13 +353,13 @@
               }
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
index 07c60a700a..c10b8e666f 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="canonical" type="text/html" title="page 1-1-3 :: Hugo Relearn Theme">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-3 :: Hugo Relearn Theme">
-    <link href="../../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694470593"></script>
-    <script src="../../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694553015"></script>
+    <script src="../../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,13 +55,17 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
@@ -69,7 +73,7 @@
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../../shortcodes/children/children-1/children-1-1/index.html"><span itemprop="name">page 1-1</span></a><meta itemprop="position" content="5">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1-3</span><meta itemprop="position" content="6"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -93,8 +97,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/index.html b/shortcodes/children/children-1/children-1-1/index.html
index 8d3f3d4efc..b375b1e5ba 100644
--- a/shortcodes/children/children-1/children-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-1/children-1-1/index.print.html" rel="alternate" type="text/html" title="page 1-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470592"></script>
-    <script src="../../../../js/variant.js?1694470592"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553014"></script>
+    <script src="../../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,41 +54,49 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../shortcodes/children/children-1/index.html" title="page 1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../shortcodes/children/children-1/children-1-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../shortcodes/children/children-1/index.html" title="page 1 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../shortcodes/children/children-1/children-1-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/children-1-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/children/children-1/index.html"><span itemprop="name">page 1</span></a><meta itemprop="position" content="4">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1</span><meta itemprop="position" content="5"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -207,12 +215,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../../js/search.js?1694470593" defer></script>
+        <script src="../../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -366,13 +374,13 @@
               }
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/index.print.html
index 74a1f88308..f785bc2271 100644
--- a/shortcodes/children/children-1/children-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/index.html" rel="canonical" type="text/html" title="page 1-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470593"></script>
-    <script src="../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553015"></script>
+    <script src="../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,20 +55,24 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/children/children-1/index.html"><span itemprop="name">page 1</span></a><meta itemprop="position" content="4">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1-1</span><meta itemprop="position" content="5"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -177,8 +181,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.html b/shortcodes/children/children-1/index.html
index b458623606..30393e8036 100644
--- a/shortcodes/children/children-1/index.html
+++ b/shortcodes/children/children-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-1/index.print.html" rel="alternate" type="text/html" title="page 1 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../js/url.js?1694470592"></script>
-    <script src="../../../js/variant.js?1694470592"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../js/url.js?1694553014"></script>
+    <script src="../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,40 +54,48 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../shortcodes/children/children-1/children-1-1/index.html" title="page 1-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../shortcodes/children/test/index.html" title="page X (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../shortcodes/children/children-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../shortcodes/children/children-1/children-1-1/index.html" title="page 1-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../shortcodes/children/test/index.html" title="page X (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../shortcodes/children/children-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-1/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -204,12 +212,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../js/search.js?1694470593" defer></script>
+        <script src="../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -363,13 +371,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.print.html b/shortcodes/children/children-1/index.print.html
index d3c2ebb86f..dd8f5d3a1b 100644
--- a/shortcodes/children/children-1/index.print.html
+++ b/shortcodes/children/children-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/index.html" rel="canonical" type="text/html" title="page 1 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,19 +55,23 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 1</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -201,8 +205,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.html b/shortcodes/children/children-2/index.html
index 4d55997009..171af60da4 100644
--- a/shortcodes/children/children-2/index.html
+++ b/shortcodes/children/children-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="page 2 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-2/index.print.html" rel="alternate" type="text/html" title="page 2 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../js/url.js?1694470592"></script>
-    <script src="../../../js/variant.js?1694470592"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../js/url.js?1694553014"></script>
+    <script src="../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,43 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../shortcodes/children/children-3/index.html" title="page 3 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="page 1-1-3 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../shortcodes/children/children-2/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-2/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../shortcodes/children/children-3/index.html" title="page 3 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="page 1-1-3 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../shortcodes/children/children-2/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-2/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 2</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -189,12 +193,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../js/search.js?1694470593" defer></script>
+        <script src="../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -348,13 +352,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.print.html b/shortcodes/children/children-2/index.print.html
index c4101e97ca..7035ec3c48 100644
--- a/shortcodes/children/children-2/index.print.html
+++ b/shortcodes/children/children-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-2/index.html" rel="canonical" type="text/html" title="page 2 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="page 2 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,19 +55,23 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 2</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -92,8 +96,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.html b/shortcodes/children/children-3/index.html
index c622aa21c0..13951701c3 100644
--- a/shortcodes/children/children-3/index.html
+++ b/shortcodes/children/children-3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="page 3 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-3/index.print.html" rel="alternate" type="text/html" title="page 3 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../js/url.js?1694470592"></script>
-    <script src="../../../js/variant.js?1694470592"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../js/url.js?1694553014"></script>
+    <script src="../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,40 +54,48 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../shortcodes/children/children-3/test3/index.html" title="page 3-1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../shortcodes/children/children-2/index.html" title="page 2 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../shortcodes/children/children-3/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-3/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../shortcodes/children/children-3/test3/index.html" title="page 3-1 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../shortcodes/children/children-2/index.html" title="page 2 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../shortcodes/children/children-3/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-3/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 3</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -204,12 +212,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../js/search.js?1694470593" defer></script>
+        <script src="../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -363,13 +371,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.print.html b/shortcodes/children/children-3/index.print.html
index e14a81f2a9..c11274e0d5 100644
--- a/shortcodes/children/children-3/index.print.html
+++ b/shortcodes/children/children-3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-3/index.html" rel="canonical" type="text/html" title="page 3 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="page 3 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,19 +55,23 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 3</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -116,8 +120,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/test3/index.html b/shortcodes/children/children-3/test3/index.html
index bff456c348..c6c3e0ab62 100644
--- a/shortcodes/children/children-3/test3/index.html
+++ b/shortcodes/children/children-3/test3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="page 3-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-3/test3/index.print.html" rel="alternate" type="text/html" title="page 3-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470592"></script>
-    <script src="../../../../js/variant.js?1694470592"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553014"></script>
+    <script src="../../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,40 +54,44 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../../shortcodes/expand/index.html" title="Expand (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../../shortcodes/children/children-3/index.html" title="page 3 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../../shortcodes/children/children-3/test3/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-3/test3.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../../shortcodes/expand/index.html" title="Expand (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../../shortcodes/children/children-3/index.html" title="page 3 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../../shortcodes/children/children-3/test3/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-3/test3.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/children/children-3/index.html"><span itemprop="name">page 3</span></a><meta itemprop="position" content="4">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 3-1</span><meta itemprop="position" content="5"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -189,12 +193,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../../../js/search.js?1694470592" defer></script>
+        <script src="../../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -348,13 +352,13 @@
               }
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../../../js/theme.js?1694470592" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/test3/index.print.html b/shortcodes/children/children-3/test3/index.print.html
index 1d50052699..4ef922c1c9 100644
--- a/shortcodes/children/children-3/test3/index.print.html
+++ b/shortcodes/children/children-3/test3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-3/test3/index.html" rel="canonical" type="text/html" title="page 3-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="page 3-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../../js/url.js?1694470593"></script>
-    <script src="../../../../js/variant.js?1694470593"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../../js/url.js?1694553015"></script>
+    <script src="../../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,20 +55,24 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../../shortcodes/children/children-3/index.html"><span itemprop="name">page 3</span></a><meta itemprop="position" content="4">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 3-1</span><meta itemprop="position" content="5"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -92,8 +96,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.html b/shortcodes/children/children-4/index.html
index 311156715e..a700c6bb74 100644
--- a/shortcodes/children/children-4/index.html
+++ b/shortcodes/children/children-4/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../js/url.js?1694470592"></script>
-    <script src="../../../js/variant.js?1694470592"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../js/url.js?1694553014"></script>
+    <script src="../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,39 +53,43 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../shortcodes/expand/index.html" title="Expand (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../shortcodes/children/children-3/test3/index.html" title="page 3-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../shortcodes/children/children-4/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-4/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../shortcodes/expand/index.html" title="Expand (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../shortcodes/children/children-3/test3/index.html" title="page 3-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../shortcodes/children/children-4/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/children-4/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 4 (hidden)</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -187,12 +191,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../../js/search.js?1694470593" defer></script>
+        <script src="../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -347,13 +351,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.print.html b/shortcodes/children/children-4/index.print.html
index b595ca491c..c4e093b4e4 100644
--- a/shortcodes/children/children-4/index.print.html
+++ b/shortcodes/children/children-4/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,19 +54,23 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page 4 (hidden)</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -90,8 +94,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.html b/shortcodes/children/index.html
index 00ea4d0bd1..4d5618c93f 100644
--- a/shortcodes/children/index.html
+++ b/shortcodes/children/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Hugo Relearn Theme">
     <link href="../../shortcodes/children/index.print.html" rel="alternate" type="text/html" title="Children :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/children/test/index.html" title="page X (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/button/index.html" title="Button (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/children/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/children/test/index.html" title="page X (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/button/index.html" title="Button (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/children/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Children</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -399,12 +407,12 @@ So its content is used as description.</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -558,13 +566,13 @@ So its content is used as description.</p>
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.print.html b/shortcodes/children/index.print.html
index f114b6fe1d..4abbffcd2d 100644
--- a/shortcodes/children/index.print.html
+++ b/shortcodes/children/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/index.html" rel="canonical" type="text/html" title="Children :: Hugo Relearn Theme">
     <link href="../../shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Children</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -481,8 +485,8 @@ So its content is used as description.</p>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.html b/shortcodes/children/test/index.html
index a071b10c87..2c3924f0ea 100644
--- a/shortcodes/children/test/index.html
+++ b/shortcodes/children/test/index.html
@@ -14,20 +14,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="page X :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/test/index.print.html" rel="alternate" type="text/html" title="page X :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../../js/url.js?1694470592"></script>
-    <script src="../../../js/variant.js?1694470592"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../../js/url.js?1694553014"></script>
+    <script src="../../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,39 +55,43 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../../shortcodes/children/children-1/index.html" title="page 1 (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../../shortcodes/children/index.html" title="Children (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../../shortcodes/children/test/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/test.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../../shortcodes/children/children-1/index.html" title="page 1 (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../../shortcodes/children/index.html" title="Children (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../../shortcodes/children/test/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/children/test.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page X</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -188,12 +192,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../../js/search.js?1694470592" defer></script>
+        <script src="../../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -347,13 +351,13 @@
               }
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../../js/theme.js?1694470592" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.print.html b/shortcodes/children/test/index.print.html
index 64df5658af..84093f7c82 100644
--- a/shortcodes/children/test/index.print.html
+++ b/shortcodes/children/test/index.print.html
@@ -14,21 +14,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/test/index.html" rel="canonical" type="text/html" title="page X :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="page X :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../../js/url.js?1694470593"></script>
-    <script src="../../../js/variant.js?1694470593"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../../js/url.js?1694553015"></script>
+    <script src="../../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -56,19 +56,23 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../shortcodes/children/index.html"><span itemprop="name">Children</span></a><meta itemprop="position" content="3">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">page X</span><meta itemprop="position" content="4"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -91,8 +95,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../../js/theme.js?1694470593" defer></script>
+    <script src="../../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.html b/shortcodes/expand/index.html
index a7500b911c..23d139512a 100644
--- a/shortcodes/expand/index.html
+++ b/shortcodes/expand/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Hugo Relearn Theme">
     <link href="../../shortcodes/expand/index.print.html" rel="alternate" type="text/html" title="Expand :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/highlight/index.html" title="Highlight (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/children/children-3/test3/index.html" title="page 3-1 (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/expand/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/expand.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/highlight/index.html" title="Highlight (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/children/children-3/test3/index.html" title="page 3-1 (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/expand/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/expand.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Expand</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -119,13 +127,13 @@
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-507a167578ffe20b78f303486dc3591a" aria-controls="expandcontent-507a167578ffe20b78f303486dc3591a" >
-    <label class="expand-label" for="expand-507a167578ffe20b78f303486dc3591a" >
+    <input type="checkbox" id="expand-6daa64c4cc543c00dcaa5337880d2681" aria-controls="expandcontent-6daa64c4cc543c00dcaa5337880d2681" >
+    <label class="expand-label" for="expand-6daa64c4cc543c00dcaa5337880d2681" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-507a167578ffe20b78f303486dc3591a" class="expand-content">
+    <div id="expandcontent-6daa64c4cc543c00dcaa5337880d2681" class="expand-content">
 
 <p>Thank you!</p>
 <p>That&rsquo;s some text with a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -252,26 +260,26 @@
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-7bc1e43d431b2f03634f317fa1781d0b" aria-controls="expandcontent-7bc1e43d431b2f03634f317fa1781d0b" >
-    <label class="expand-label" for="expand-7bc1e43d431b2f03634f317fa1781d0b" >
+    <input type="checkbox" id="expand-4cab21919fdde69422911a1fbb994775" aria-controls="expandcontent-4cab21919fdde69422911a1fbb994775" >
+    <label class="expand-label" for="expand-4cab21919fdde69422911a1fbb994775" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-7bc1e43d431b2f03634f317fa1781d0b" class="expand-content">
+    <div id="expandcontent-4cab21919fdde69422911a1fbb994775" class="expand-content">
 <p>
 Yes, you did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-3a05e66c41443b81cff5b846f40b2321" aria-controls="expandcontent-3a05e66c41443b81cff5b846f40b2321"  checked>
-    <label class="expand-label" for="expand-3a05e66c41443b81cff5b846f40b2321" >
+    <input type="checkbox" id="expand-88953b56a350eadda70c38b7fe79faef" aria-controls="expandcontent-88953b56a350eadda70c38b7fe79faef"  checked>
+    <label class="expand-label" for="expand-88953b56a350eadda70c38b7fe79faef" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-3a05e66c41443b81cff5b846f40b2321" class="expand-content">
+    <div id="expandcontent-88953b56a350eadda70c38b7fe79faef" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -292,13 +300,13 @@ No need to press you!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-4bbb02415dece67aac5a4cd27ae094a8" aria-controls="expandcontent-4bbb02415dece67aac5a4cd27ae094a8" >
-    <label class="expand-label" for="expand-4bbb02415dece67aac5a4cd27ae094a8" >
+    <input type="checkbox" id="expand-26910ee67cd46a47e83d31aaabd4bc37" aria-controls="expandcontent-26910ee67cd46a47e83d31aaabd4bc37" >
+    <label class="expand-label" for="expand-26910ee67cd46a47e83d31aaabd4bc37" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="expandcontent-4bbb02415dece67aac5a4cd27ae094a8" class="expand-content">
+    <div id="expandcontent-26910ee67cd46a47e83d31aaabd4bc37" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -400,12 +408,12 @@ No need to press you!</div>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -559,13 +567,13 @@ No need to press you!</div>
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.print.html b/shortcodes/expand/index.print.html
index f6bd86f56c..17dfe44f24 100644
--- a/shortcodes/expand/index.print.html
+++ b/shortcodes/expand/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/expand/index.html" rel="canonical" type="text/html" title="Expand :: Hugo Relearn Theme">
     <link href="../../shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Expand</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -79,13 +83,13 @@
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-507a167578ffe20b78f303486dc3591a" aria-controls="expandcontent-507a167578ffe20b78f303486dc3591a" >
-    <label class="expand-label" for="expand-507a167578ffe20b78f303486dc3591a" >
+    <input type="checkbox" id="expand-6daa64c4cc543c00dcaa5337880d2681" aria-controls="expandcontent-6daa64c4cc543c00dcaa5337880d2681" >
+    <label class="expand-label" for="expand-6daa64c4cc543c00dcaa5337880d2681" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-507a167578ffe20b78f303486dc3591a" class="expand-content">
+    <div id="expandcontent-6daa64c4cc543c00dcaa5337880d2681" class="expand-content">
 
 <p>Thank you!</p>
 <p>That&rsquo;s some text with a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -212,26 +216,26 @@
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-7bc1e43d431b2f03634f317fa1781d0b" aria-controls="expandcontent-7bc1e43d431b2f03634f317fa1781d0b" >
-    <label class="expand-label" for="expand-7bc1e43d431b2f03634f317fa1781d0b" >
+    <input type="checkbox" id="expand-4cab21919fdde69422911a1fbb994775" aria-controls="expandcontent-4cab21919fdde69422911a1fbb994775" >
+    <label class="expand-label" for="expand-4cab21919fdde69422911a1fbb994775" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-7bc1e43d431b2f03634f317fa1781d0b" class="expand-content">
+    <div id="expandcontent-4cab21919fdde69422911a1fbb994775" class="expand-content">
 <p>
 Yes, you did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-3a05e66c41443b81cff5b846f40b2321" aria-controls="expandcontent-3a05e66c41443b81cff5b846f40b2321"  checked>
-    <label class="expand-label" for="expand-3a05e66c41443b81cff5b846f40b2321" >
+    <input type="checkbox" id="expand-88953b56a350eadda70c38b7fe79faef" aria-controls="expandcontent-88953b56a350eadda70c38b7fe79faef"  checked>
+    <label class="expand-label" for="expand-88953b56a350eadda70c38b7fe79faef" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-3a05e66c41443b81cff5b846f40b2321" class="expand-content">
+    <div id="expandcontent-88953b56a350eadda70c38b7fe79faef" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -252,13 +256,13 @@ No need to press you!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-4bbb02415dece67aac5a4cd27ae094a8" aria-controls="expandcontent-4bbb02415dece67aac5a4cd27ae094a8" >
-    <label class="expand-label" for="expand-4bbb02415dece67aac5a4cd27ae094a8" >
+    <input type="checkbox" id="expand-26910ee67cd46a47e83d31aaabd4bc37" aria-controls="expandcontent-26910ee67cd46a47e83d31aaabd4bc37" >
+    <label class="expand-label" for="expand-26910ee67cd46a47e83d31aaabd4bc37" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="expandcontent-4bbb02415dece67aac5a4cd27ae094a8" class="expand-content">
+    <div id="expandcontent-26910ee67cd46a47e83d31aaabd4bc37" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -282,8 +286,8 @@ No need to press you!</div>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/highlight/index.html b/shortcodes/highlight/index.html
index 0e569c02a0..85b50ba345 100644
--- a/shortcodes/highlight/index.html
+++ b/shortcodes/highlight/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/highlight/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/highlight/index.xml" rel="alternate" type="application/rss+xml" title="Highlight :: Hugo Relearn Theme">
     <link href="../../shortcodes/highlight/index.print.html" rel="alternate" type="text/html" title="Highlight :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/icon/index.html" title="Icon (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/expand/index.html" title="Expand (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/highlight/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/highlight.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/icon/index.html" title="Icon (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/expand/index.html" title="Expand (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/highlight/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/highlight.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Highlight</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -126,13 +134,13 @@
 <p>The <code>highlight</code> shortcode renders your code with a syntax highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="16d01fe05bab251345722223f40d4b25">
+<div class="tab-panel" data-tab-group="71052505527c7171a1c2c669c84af5ef">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('16d01fe05bab251345722223f40d4b25','python')"
+      onclick="switchTab('71052505527c7171a1c2c669c84af5ef','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -355,13 +363,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="fd51bc9290a64e08cf0a9da47b1b940c">
+<div class="tab-panel" data-tab-group="6f6848163b690efd265cbc54821d6350">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('fd51bc9290a64e08cf0a9da47b1b940c','python')"
+      onclick="switchTab('6f6848163b690efd265cbc54821d6350','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -482,12 +490,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -641,13 +649,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/highlight/index.print.html b/shortcodes/highlight/index.print.html
index a1e5dfa73b..1d0ae40b5a 100644
--- a/shortcodes/highlight/index.print.html
+++ b/shortcodes/highlight/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/highlight/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/highlight/index.html" rel="canonical" type="text/html" title="Highlight :: Hugo Relearn Theme">
     <link href="../../shortcodes/highlight/index.xml" rel="alternate" type="application/rss+xml" title="Highlight :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Highlight</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -79,13 +83,13 @@
 <p>The <code>highlight</code> shortcode renders your code with a syntax highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="16d01fe05bab251345722223f40d4b25">
+<div class="tab-panel" data-tab-group="71052505527c7171a1c2c669c84af5ef">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('16d01fe05bab251345722223f40d4b25','python')"
+      onclick="switchTab('71052505527c7171a1c2c669c84af5ef','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -308,13 +312,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="fd51bc9290a64e08cf0a9da47b1b940c">
+<div class="tab-panel" data-tab-group="6f6848163b690efd265cbc54821d6350">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('fd51bc9290a64e08cf0a9da47b1b940c','python')"
+      onclick="switchTab('6f6848163b690efd265cbc54821d6350','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -357,8 +361,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/icon/index.html b/shortcodes/icon/index.html
index aadeb97e63..6ae481b15c 100644
--- a/shortcodes/icon/index.html
+++ b/shortcodes/icon/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Hugo Relearn Theme">
     <link href="../../shortcodes/icon/index.print.html" rel="alternate" type="text/html" title="Icon :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/include/index.html" title="Include (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/highlight/index.html" title="Highlight (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/icon/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/icon.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/include/index.html" title="Include (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/highlight/index.html" title="Highlight (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/icon/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/icon.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Icon</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -323,12 +331,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -482,13 +490,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/icon/index.print.html b/shortcodes/icon/index.print.html
index a2d3a1871d..95683af3bb 100644
--- a/shortcodes/icon/index.print.html
+++ b/shortcodes/icon/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/icon/index.html" rel="canonical" type="text/html" title="Icon :: Hugo Relearn Theme">
     <link href="../../shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Icon</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -204,8 +208,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.html b/shortcodes/include/index.html
index 1e1557d4f2..55487593f7 100644
--- a/shortcodes/include/index.html
+++ b/shortcodes/include/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Hugo Relearn Theme">
     <link href="../../shortcodes/include/index.print.html" rel="alternate" type="text/html" title="Include :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/math/index.html" title="Math (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/icon/index.html" title="Icon (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/include/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/include.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/math/index.html" title="Math (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/icon/index.html" title="Icon (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/include/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/include.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Include</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -313,12 +321,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -472,13 +480,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.print.html b/shortcodes/include/index.print.html
index 9f27fd8899..7ba508bbfd 100644
--- a/shortcodes/include/index.print.html
+++ b/shortcodes/include/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/include/index.html" rel="canonical" type="text/html" title="Include :: Hugo Relearn Theme">
     <link href="../../shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Include</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -197,8 +201,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.html b/shortcodes/include_me/index.html
index e785560c45..0a8739fae8 100644
--- a/shortcodes/include_me/index.html
+++ b/shortcodes/include_me/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title></title>
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -50,38 +50,42 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/attachments/index.html" title="Attachments (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/index.html" title="Shortcodes (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/include_me/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/INCLUDE_ME.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/attachments/index.html" title="Attachments (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/index.html" title="Shortcodes (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/include_me/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/INCLUDE_ME.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Hugo Relearn Theme</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -197,12 +201,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -356,13 +360,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.print.html b/shortcodes/include_me/index.print.html
index 313634410f..7a33abf0c4 100644
--- a/shortcodes/include_me/index.print.html
+++ b/shortcodes/include_me/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title></title>
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -51,18 +51,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Hugo Relearn Theme</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -100,8 +104,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/index.html b/shortcodes/index.html
index 3abf364bd3..bd586f6869 100644
--- a/shortcodes/index.html
+++ b/shortcodes/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="../shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shortcodes :: Hugo Relearn Theme">
     <link href="../shortcodes/index.print.html" rel="alternate" type="text/html" title="Shortcodes :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../js/url.js?1694470592"></script>
-    <script src="../js/variant.js?1694470592"></script>
+    <link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../js/url.js?1694553014"></script>
+    <script src="../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,37 +54,41 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../shortcodes/attachments/index.html" title="Attachments (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../cont/taxonomy/index.html" title="Taxonomy (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../shortcodes/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../shortcodes/attachments/index.html" title="Attachments (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../cont/taxonomy/index.html" title="Taxonomy (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../shortcodes/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Shortcodes</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -205,12 +209,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../js/search.js?1694470593" defer></script>
+        <script src="../js/auto-complete.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -364,13 +368,13 @@
               }
             });
           </script>
-          <script async src="../js/github-buttons.js?1694470593"></script>
+          <script async src="../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../js/theme.js?1694470593" defer></script>
+    <script src="../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/index.print.html b/shortcodes/index.print.html
index 77bc19549e..74200bca53 100644
--- a/shortcodes/index.print.html
+++ b/shortcodes/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/index.html" rel="canonical" type="text/html" title="Shortcodes :: Hugo Relearn Theme">
     <link href="../shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shortcodes :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../js/url.js?1694470593"></script>
-    <script src="../js/variant.js?1694470593"></script>
+    <link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../js/url.js?1694553015"></script>
+    <script src="../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,17 +55,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Shortcodes</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
@@ -1327,13 +1331,13 @@ So its content is used as description.</p>
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-507a167578ffe20b78f303486dc3591a" aria-controls="expandcontent-507a167578ffe20b78f303486dc3591a" >
-    <label class="expand-label" for="expand-507a167578ffe20b78f303486dc3591a" >
+    <input type="checkbox" id="expand-6daa64c4cc543c00dcaa5337880d2681" aria-controls="expandcontent-6daa64c4cc543c00dcaa5337880d2681" >
+    <label class="expand-label" for="expand-6daa64c4cc543c00dcaa5337880d2681" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-507a167578ffe20b78f303486dc3591a" class="expand-content">
+    <div id="expandcontent-6daa64c4cc543c00dcaa5337880d2681" class="expand-content">
 
 <p>Thank you!</p>
 <p>That&rsquo;s some text with a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -1460,26 +1464,26 @@ So its content is used as description.</p>
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-7bc1e43d431b2f03634f317fa1781d0b" aria-controls="expandcontent-7bc1e43d431b2f03634f317fa1781d0b" >
-    <label class="expand-label" for="expand-7bc1e43d431b2f03634f317fa1781d0b" >
+    <input type="checkbox" id="expand-4cab21919fdde69422911a1fbb994775" aria-controls="expandcontent-4cab21919fdde69422911a1fbb994775" >
+    <label class="expand-label" for="expand-4cab21919fdde69422911a1fbb994775" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-7bc1e43d431b2f03634f317fa1781d0b" class="expand-content">
+    <div id="expandcontent-4cab21919fdde69422911a1fbb994775" class="expand-content">
 <p>
 Yes, you did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-3a05e66c41443b81cff5b846f40b2321" aria-controls="expandcontent-3a05e66c41443b81cff5b846f40b2321"  checked>
-    <label class="expand-label" for="expand-3a05e66c41443b81cff5b846f40b2321" >
+    <input type="checkbox" id="expand-88953b56a350eadda70c38b7fe79faef" aria-controls="expandcontent-88953b56a350eadda70c38b7fe79faef"  checked>
+    <label class="expand-label" for="expand-88953b56a350eadda70c38b7fe79faef" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-3a05e66c41443b81cff5b846f40b2321" class="expand-content">
+    <div id="expandcontent-88953b56a350eadda70c38b7fe79faef" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -1500,13 +1504,13 @@ No need to press you!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-4bbb02415dece67aac5a4cd27ae094a8" aria-controls="expandcontent-4bbb02415dece67aac5a4cd27ae094a8" >
-    <label class="expand-label" for="expand-4bbb02415dece67aac5a4cd27ae094a8" >
+    <input type="checkbox" id="expand-26910ee67cd46a47e83d31aaabd4bc37" aria-controls="expandcontent-26910ee67cd46a47e83d31aaabd4bc37" >
+    <label class="expand-label" for="expand-26910ee67cd46a47e83d31aaabd4bc37" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="expandcontent-4bbb02415dece67aac5a4cd27ae094a8" class="expand-content">
+    <div id="expandcontent-26910ee67cd46a47e83d31aaabd4bc37" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -1535,13 +1539,13 @@ No need to press you!</div>
 <p>The <code>highlight</code> shortcode renders your code with a syntax highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="16d01fe05bab251345722223f40d4b25">
+<div class="tab-panel" data-tab-group="71052505527c7171a1c2c669c84af5ef">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('16d01fe05bab251345722223f40d4b25','python')"
+      onclick="switchTab('71052505527c7171a1c2c669c84af5ef','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -1764,13 +1768,13 @@ No need to press you!</div>
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="fd51bc9290a64e08cf0a9da47b1b940c">
+<div class="tab-panel" data-tab-group="6f6848163b690efd265cbc54821d6350">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('fd51bc9290a64e08cf0a9da47b1b940c','python')"
+      onclick="switchTab('6f6848163b690efd265cbc54821d6350','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -3309,7 +3313,7 @@ Electricity grid,H2 conversion,27.14
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-bbabeb264b3c4ca2f77988f973280a31"
+    id="openapi-955e42b69059a31d8b40541b7060a50c"
     openapi-url="../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -3415,13 +3419,13 @@ Electricity grid,H2 conversion,27.14
 <p>To use formatted parameter, add this in your <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="38ab886d5e194af5e5d8c931c163ae44">
+<div class="tab-panel" data-tab-group="7e5135a7fa7b86bcab53ed472737f858">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('38ab886d5e194af5e5d8c931c163ae44','configtoml')"
+      onclick="switchTab('7e5135a7fa7b86bcab53ed472737f858','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -3457,13 +3461,13 @@ Electricity grid,H2 conversion,27.14
 <p>This is especially useful if you want to flag your code example with an explicit language.</p>
 <p>If you want multiple tabs grouped together you can wrap your tabs into the <a href="../shortcodes/tabs/"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="23ccf769244f7bfbb6d24ba50a6eeec5">
+<div class="tab-panel" data-tab-group="83eb6b21d8c459b33d1d4a9861b7d396">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('23ccf769244f7bfbb6d24ba50a6eeec5','c')"
+      onclick="switchTab('83eb6b21d8c459b33d1d4a9861b7d396','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -3577,13 +3581,13 @@ Electricity grid,H2 conversion,27.14
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="9f2f4d93526a8745776273197ad75ada">
+<div class="tab-panel" data-tab-group="fc304256e1ca82da47900f92107df06d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('9f2f4d93526a8745776273197ad75ada','code')"
+      onclick="switchTab('fc304256e1ca82da47900f92107df06d','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -3608,13 +3612,13 @@ Electricity grid,H2 conversion,27.14
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="5bffd88e4320d9398caffddb29bb2a40">
+<div class="tab-panel" data-tab-group="e04a80d5b80bb506370a368c3ab44384">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="emstrongmixedstrongem"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('5bffd88e4320d9398caffddb29bb2a40','emstrongmixedstrongem')"
+      onclick="switchTab('e04a80d5b80bb506370a368c3ab44384','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -3662,13 +3666,13 @@ Electricity grid,H2 conversion,27.14
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">the</span> <span class="nx">background</span> <span class="nx">to</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">of</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">and</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">icon</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="6cd2bf081629e59199d79671d3d7c329">
+<div class="tab-panel" data-tab-group="0ad9dcd84d13f9a19ef9911f674b7a1b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-colored-style')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -3678,7 +3682,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-color')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -3688,7 +3692,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','default-style-and-color')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style and color</div>
@@ -3698,7 +3702,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> just severity style</div>
@@ -3708,7 +3712,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> severity style and color</div>
@@ -3779,13 +3783,13 @@ Electricity grid,H2 conversion,27.14
 <p>This comes in handy eg. for providing code snippets for multiple languages.</p>
 <p>If you just want a single tab you can instead call the <a href="../shortcodes/tab/"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="272877369aa09ff10af68255254afa64">
+<div class="tab-panel" data-tab-group="edd488b627873e84bb9b2ef90d4b3dc0">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','py')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -3795,7 +3799,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','sh')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -3805,7 +3809,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','c')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -3962,13 +3966,13 @@ Electricity grid,H2 conversion,27.14
 <p>See what happens to the tab views while you select different tabs.</p>
 <p>While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.</p>
 
-<div class="tab-panel" data-tab-group="3acabc0ff716d55af20992733586422d">
+<div class="tab-panel" data-tab-group="c738eaf37a63a97d97618ec05d118ec4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-a-tab-view-1')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -3978,7 +3982,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-a-tab-view-2')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -3988,7 +3992,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-b')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -4387,8 +4391,8 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470593" defer></script>
+    <script src="../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553015" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -4417,27 +4421,27 @@ Electricity grid,H2 conversion,27.14
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1694470593"></script>
-    <script src="../js/d3/d3-color.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1694470593" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1694470593" defer></script>
-    <script src="../js/js-yaml.min.js?1694470593" defer></script>
-    <script src="../js/mermaid.min.js?1694470593" defer></script>
+    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1694553015"></script>
+    <script src="../js/d3/d3-color.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1694553015" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1694553015" defer></script>
+    <script src="../js/js-yaml.min.js?1694553015" defer></script>
+    <script src="../js/mermaid.min.js?1694553015" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="../js/swagger-ui/swagger-ui-bundle.js?1694470593" defer></script>
-    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1694470593" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-bundle.js?1694553015" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1694553015" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694470593", assetsBuster:  1694470593  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694553015", assetsBuster:  1694553015  };
     </script>
-    <script src="../js/theme.js?1694470593" defer></script>
+    <script src="../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/math/index.html b/shortcodes/math/index.html
index 8b9d9473c8..f5b439e8db 100644
--- a/shortcodes/math/index.html
+++ b/shortcodes/math/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Hugo Relearn Theme">
     <link href="../../shortcodes/math/index.print.html" rel="alternate" type="text/html" title="Math :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/mermaid/index.html" title="Mermaid (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/include/index.html" title="Include (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/math/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/math.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/mermaid/index.html" title="Mermaid (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/include/index.html" title="Include (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/math/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/math.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Math</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -373,12 +381,12 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -532,13 +540,13 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -567,7 +575,7 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1694470592"></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1694553014"></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/math/index.print.html b/shortcodes/math/index.print.html
index 6114e94bf5..6134ede075 100644
--- a/shortcodes/math/index.print.html
+++ b/shortcodes/math/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/math/index.html" rel="canonical" type="text/html" title="Math :: Hugo Relearn Theme">
     <link href="../../shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Math</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -248,8 +252,8 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -278,7 +282,7 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1694470593"></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1694553015"></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.html b/shortcodes/mermaid/index.html
index 41bb970757..2007b7d66f 100644
--- a/shortcodes/mermaid/index.html
+++ b/shortcodes/mermaid/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Mermaid :: Hugo Relearn Theme">
     <link href="../../shortcodes/mermaid/index.print.html" rel="alternate" type="text/html" title="Mermaid :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/notice/index.html" title="Notice (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/math/index.html" title="Math (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/mermaid/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/mermaid.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/notice/index.html" title="Notice (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/math/index.html" title="Math (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/mermaid/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/mermaid.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Mermaid</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -839,12 +847,12 @@ Electricity grid,H2 conversion,27.14
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -998,27 +1006,27 @@ Electricity grid,H2 conversion,27.14
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694470592" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694470592" defer></script>
-    <script src="../../js/js-yaml.min.js?1694470592" defer></script>
-    <script src="../../js/mermaid.min.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694553014" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694553014" defer></script>
+    <script src="../../js/js-yaml.min.js?1694553014" defer></script>
+    <script src="../../js/mermaid.min.js?1694553014" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.print.html b/shortcodes/mermaid/index.print.html
index ab7928ba50..eb290507d7 100644
--- a/shortcodes/mermaid/index.print.html
+++ b/shortcodes/mermaid/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/mermaid/index.html" rel="canonical" type="text/html" title="Mermaid :: Hugo Relearn Theme">
     <link href="../../shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Mermaid :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Mermaid</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -703,22 +707,22 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694470593" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694470593" defer></script>
-    <script src="../../js/js-yaml.min.js?1694470593" defer></script>
-    <script src="../../js/mermaid.min.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694553015" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694553015" defer></script>
+    <script src="../../js/js-yaml.min.js?1694553015" defer></script>
+    <script src="../../js/mermaid.min.js?1694553015" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.html b/shortcodes/notice/index.html
index 80c58c43f5..428c367c64 100644
--- a/shortcodes/notice/index.html
+++ b/shortcodes/notice/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Hugo Relearn Theme">
     <link href="../../shortcodes/notice/index.print.html" rel="alternate" type="text/html" title="Notice :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/openapi/index.html" title="OpenAPI (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/mermaid/index.html" title="Mermaid (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/notice/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/notice.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/openapi/index.html" title="OpenAPI (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/mermaid/index.html" title="Mermaid (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/notice/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/notice.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Notice</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -544,12 +552,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -703,13 +711,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.print.html b/shortcodes/notice/index.print.html
index 55578e442d..6d6fceab91 100644
--- a/shortcodes/notice/index.print.html
+++ b/shortcodes/notice/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/notice/index.html" rel="canonical" type="text/html" title="Notice :: Hugo Relearn Theme">
     <link href="../../shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Notice</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -424,8 +428,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/openapi/index.html b/shortcodes/openapi/index.html
index 70b377c274..cc20753acc 100644
--- a/shortcodes/openapi/index.html
+++ b/shortcodes/openapi/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/openapi/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/openapi/index.xml" rel="alternate" type="application/rss+xml" title="OpenAPI :: Hugo Relearn Theme">
     <link href="../../shortcodes/openapi/index.print.html" rel="alternate" type="text/html" title="OpenAPI :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/siteparam/index.html" title="SiteParam (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/notice/index.html" title="Notice (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/openapi/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/openapi/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/siteparam/index.html" title="SiteParam (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/notice/index.html" title="Notice (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/openapi/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/openapi/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">OpenAPI</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -202,7 +210,7 @@
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-bbabeb264b3c4ca2f77988f973280a31"
+    id="openapi-955e42b69059a31d8b40541b7060a50c"
     openapi-url="../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -293,12 +301,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -452,19 +460,19 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694470593" defer></script>
-    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694470593" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694553015" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694553015" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694470593", assetsBuster:  1694470593  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694553015", assetsBuster:  1694553015  };
     </script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/openapi/index.print.html b/shortcodes/openapi/index.print.html
index e207b54ffb..feb170db35 100644
--- a/shortcodes/openapi/index.print.html
+++ b/shortcodes/openapi/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/openapi/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/openapi/index.html" rel="canonical" type="text/html" title="OpenAPI :: Hugo Relearn Theme">
     <link href="../../shortcodes/openapi/index.xml" rel="alternate" type="application/rss+xml" title="OpenAPI :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">OpenAPI</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -164,7 +168,7 @@
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-bbabeb264b3c4ca2f77988f973280a31"
+    id="openapi-955e42b69059a31d8b40541b7060a50c"
     openapi-url="../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -177,14 +181,14 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694470593" defer></script>
-    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694470593" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694553015" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694553015" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694470593", assetsBuster:  1694470593  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694553015", assetsBuster:  1694553015  };
     </script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.html b/shortcodes/siteparam/index.html
index eeda2ae730..93728a5b0b 100644
--- a/shortcodes/siteparam/index.html
+++ b/shortcodes/siteparam/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="SiteParam :: Hugo Relearn Theme">
     <link href="../../shortcodes/siteparam/index.print.html" rel="alternate" type="text/html" title="SiteParam :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/tab/index.html" title="Tab (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/openapi/index.html" title="OpenAPI (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/siteparam/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/siteparam.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/tab/index.html" title="Tab (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/openapi/index.html" title="OpenAPI (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/siteparam/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/siteparam.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">SiteParam</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -206,13 +214,13 @@
 <p>To use formatted parameter, add this in your <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="38ab886d5e194af5e5d8c931c163ae44">
+<div class="tab-panel" data-tab-group="7e5135a7fa7b86bcab53ed472737f858">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('38ab886d5e194af5e5d8c931c163ae44','configtoml')"
+      onclick="switchTab('7e5135a7fa7b86bcab53ed472737f858','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -320,12 +328,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -479,13 +487,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.print.html b/shortcodes/siteparam/index.print.html
index b8c961a73f..f9896e2729 100644
--- a/shortcodes/siteparam/index.print.html
+++ b/shortcodes/siteparam/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/siteparam/index.html" rel="canonical" type="text/html" title="SiteParam :: Hugo Relearn Theme">
     <link href="../../shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="SiteParam :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">SiteParam</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -167,13 +171,13 @@
 <p>To use formatted parameter, add this in your <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="38ab886d5e194af5e5d8c931c163ae44">
+<div class="tab-panel" data-tab-group="7e5135a7fa7b86bcab53ed472737f858">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('38ab886d5e194af5e5d8c931c163ae44','configtoml')"
+      onclick="switchTab('7e5135a7fa7b86bcab53ed472737f858','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -203,8 +207,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tab/index.html b/shortcodes/tab/index.html
index de339a2a7d..b0112a51dc 100644
--- a/shortcodes/tab/index.html
+++ b/shortcodes/tab/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tab/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/tab/index.xml" rel="alternate" type="application/rss+xml" title="Tab :: Hugo Relearn Theme">
     <link href="../../shortcodes/tab/index.print.html" rel="alternate" type="text/html" title="Tab :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
-	<a href="../../shortcodes/tabs/index.html" title="Tabs (🡒)">
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/siteparam/index.html" title="SiteParam (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/tab/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/tab.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
+              <a href="../../shortcodes/tabs/index.html" title="Tabs (🡒)">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/siteparam/index.html" title="SiteParam (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/tab/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/tab.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tab</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -120,13 +128,13 @@
 <p>This is especially useful if you want to flag your code example with an explicit language.</p>
 <p>If you want multiple tabs grouped together you can wrap your tabs into the <a href="../../shortcodes/tabs/"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="23ccf769244f7bfbb6d24ba50a6eeec5">
+<div class="tab-panel" data-tab-group="83eb6b21d8c459b33d1d4a9861b7d396">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('23ccf769244f7bfbb6d24ba50a6eeec5','c')"
+      onclick="switchTab('83eb6b21d8c459b33d1d4a9861b7d396','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -240,13 +248,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="9f2f4d93526a8745776273197ad75ada">
+<div class="tab-panel" data-tab-group="fc304256e1ca82da47900f92107df06d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('9f2f4d93526a8745776273197ad75ada','code')"
+      onclick="switchTab('fc304256e1ca82da47900f92107df06d','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -271,13 +279,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="5bffd88e4320d9398caffddb29bb2a40">
+<div class="tab-panel" data-tab-group="e04a80d5b80bb506370a368c3ab44384">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="emstrongmixedstrongem"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('5bffd88e4320d9398caffddb29bb2a40','emstrongmixedstrongem')"
+      onclick="switchTab('e04a80d5b80bb506370a368c3ab44384','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -325,13 +333,13 @@
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">the</span> <span class="nx">background</span> <span class="nx">to</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">of</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">and</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">icon</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="6cd2bf081629e59199d79671d3d7c329">
+<div class="tab-panel" data-tab-group="0ad9dcd84d13f9a19ef9911f674b7a1b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-colored-style')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -341,7 +349,7 @@
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-color')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -351,7 +359,7 @@
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','default-style-and-color')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style and color</div>
@@ -361,7 +369,7 @@
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> just severity style</div>
@@ -371,7 +379,7 @@
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> severity style and color</div>
@@ -514,12 +522,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -673,13 +681,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tab/index.print.html b/shortcodes/tab/index.print.html
index 887cb5740d..9338914ef3 100644
--- a/shortcodes/tab/index.print.html
+++ b/shortcodes/tab/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tab/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/tab/index.html" rel="canonical" type="text/html" title="Tab :: Hugo Relearn Theme">
     <link href="../../shortcodes/tab/index.xml" rel="alternate" type="application/rss+xml" title="Tab :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tab</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -80,13 +84,13 @@
 <p>This is especially useful if you want to flag your code example with an explicit language.</p>
 <p>If you want multiple tabs grouped together you can wrap your tabs into the <a href="../../shortcodes/tabs/"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="23ccf769244f7bfbb6d24ba50a6eeec5">
+<div class="tab-panel" data-tab-group="83eb6b21d8c459b33d1d4a9861b7d396">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('23ccf769244f7bfbb6d24ba50a6eeec5','c')"
+      onclick="switchTab('83eb6b21d8c459b33d1d4a9861b7d396','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -200,13 +204,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="9f2f4d93526a8745776273197ad75ada">
+<div class="tab-panel" data-tab-group="fc304256e1ca82da47900f92107df06d">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('9f2f4d93526a8745776273197ad75ada','code')"
+      onclick="switchTab('fc304256e1ca82da47900f92107df06d','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -231,13 +235,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="5bffd88e4320d9398caffddb29bb2a40">
+<div class="tab-panel" data-tab-group="e04a80d5b80bb506370a368c3ab44384">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="emstrongmixedstrongem"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('5bffd88e4320d9398caffddb29bb2a40','emstrongmixedstrongem')"
+      onclick="switchTab('e04a80d5b80bb506370a368c3ab44384','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -285,13 +289,13 @@
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">the</span> <span class="nx">background</span> <span class="nx">to</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">of</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">and</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">icon</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="6cd2bf081629e59199d79671d3d7c329">
+<div class="tab-panel" data-tab-group="0ad9dcd84d13f9a19ef9911f674b7a1b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-colored-style')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -301,7 +305,7 @@
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-color')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -311,7 +315,7 @@
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','default-style-and-color')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style and color</div>
@@ -321,7 +325,7 @@
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> just severity style</div>
@@ -331,7 +335,7 @@
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('6cd2bf081629e59199d79671d3d7c329','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('0ad9dcd84d13f9a19ef9911f674b7a1b','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <div>
         <div class="tab-nav-hidden"><i class="fa-fw fas fa-info-circle"></i> severity style and color</div>
@@ -396,8 +400,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.html b/shortcodes/tabs/index.html
index 905ac5359d..47293509f5 100644
--- a/shortcodes/tabs/index.html
+++ b/shortcodes/tabs/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Hugo Relearn Theme">
     <link href="../../shortcodes/tabs/index.print.html" rel="alternate" type="text/html" title="Tabs :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,39 +54,47 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../shortcodes/tab/index.html" title="Tab (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../../shortcodes/tabs/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/tabs.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../shortcodes/tab/index.html" title="Tab (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../../shortcodes/tabs/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/tabs.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tabs</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -119,13 +127,13 @@
 <p>This comes in handy eg. for providing code snippets for multiple languages.</p>
 <p>If you just want a single tab you can instead call the <a href="../../shortcodes/tab/"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="272877369aa09ff10af68255254afa64">
+<div class="tab-panel" data-tab-group="edd488b627873e84bb9b2ef90d4b3dc0">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','py')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -135,7 +143,7 @@
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','sh')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -145,7 +153,7 @@
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','c')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -302,13 +310,13 @@
 <p>See what happens to the tab views while you select different tabs.</p>
 <p>While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.</p>
 
-<div class="tab-panel" data-tab-group="3acabc0ff716d55af20992733586422d">
+<div class="tab-panel" data-tab-group="c738eaf37a63a97d97618ec05d118ec4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-a-tab-view-1')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -318,7 +326,7 @@
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-a-tab-view-2')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -328,7 +336,7 @@
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-b')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -804,12 +812,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470592" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470592" defer></script>
-        <script src="../../js/search.js?1694470592" defer></script>
+        <script src="../../js/auto-complete.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553014" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553014" defer></script>
+        <script src="../../js/search.js?1694553014" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -963,13 +971,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470592"></script>
+          <script async src="../../js/github-buttons.js?1694553014"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470592" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470592" defer></script>
-    <script src="../../js/theme.js?1694470592" defer></script>
+    <script src="../../js/clipboard.min.js?1694553014" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553014" defer></script>
+    <script src="../../js/theme.js?1694553014" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.print.html b/shortcodes/tabs/index.print.html
index feb4afe5f8..0ec5d0654f 100644
--- a/shortcodes/tabs/index.print.html
+++ b/shortcodes/tabs/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/tabs/index.html" rel="canonical" type="text/html" title="Tabs :: Hugo Relearn Theme">
     <link href="../../shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../../js/url.js?1694470593"></script>
-    <script src="../../js/variant.js?1694470593"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../../js/url.js?1694553015"></script>
+    <script src="../../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,18 +55,22 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tabs</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -80,13 +84,13 @@
 <p>This comes in handy eg. for providing code snippets for multiple languages.</p>
 <p>If you just want a single tab you can instead call the <a href="../../shortcodes/tab/"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="272877369aa09ff10af68255254afa64">
+<div class="tab-panel" data-tab-group="edd488b627873e84bb9b2ef90d4b3dc0">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','py')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -96,7 +100,7 @@
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','sh')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -106,7 +110,7 @@
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('272877369aa09ff10af68255254afa64','c')"
+      onclick="switchTab('edd488b627873e84bb9b2ef90d4b3dc0','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -263,13 +267,13 @@
 <p>See what happens to the tab views while you select different tabs.</p>
 <p>While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.</p>
 
-<div class="tab-panel" data-tab-group="3acabc0ff716d55af20992733586422d">
+<div class="tab-panel" data-tab-group="c738eaf37a63a97d97618ec05d118ec4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-a-tab-view-1')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -279,7 +283,7 @@
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-a-tab-view-2')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -289,7 +293,7 @@
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('3acabc0ff716d55af20992733586422d','group-b')"
+      onclick="switchTab('c738eaf37a63a97d97618ec05d118ec4','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -687,8 +691,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/showcase/index.html b/showcase/index.html
index d895785049..b0730b3292 100644
--- a/showcase/index.html
+++ b/showcase/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="../showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Hugo Relearn Theme">
     <link href="../showcase/index.print.html" rel="alternate" type="text/html" title="Showcase :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../js/url.js?1694470592"></script>
-    <script src="../js/variant.js?1694470592"></script>
+    <link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../js/url.js?1694553014"></script>
+    <script src="../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,38 +54,46 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../shortcodes/tabs/index.html" title="Tabs (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-print">
-	<a href="../showcase/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
-	  	<i class="fa-fw fas fa-print"></i>
-	</a>
-</div>
-<div class="topbar-button topbar-edit">
-	<a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/showcase/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
-	  	<i class="fa-fw fas fa-pen"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../shortcodes/tabs/index.html" title="Tabs (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-print">
+              <a href="../showcase/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+                <i class="fa-fw fas fa-print"></i>
+              </a>
+            </div>
+            <div class="topbar-button topbar-edit">
+              <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/showcase/_index.en.md" target="_blank" title="Edit (CTRL&#43;ALT&#43;w)">
+                <i class="fa-fw fas fa-pen"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Showcase</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -107,14 +115,14 @@
 <h1 id="showcase">Showcase</h1>
 
 <h2 id="gobolinux-wikihttpswikigobolinuxorg-by-neonsysorg"><a href="https://wiki.gobolinux.org/" target="_blank">GoboLinux Wiki</a> by NEONsys.org</h2>
-<p><a href="#image-00af1ef831f0bfc12930cc170cdb2102" class="lightbox-link"><img src="../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-00af1ef831f0bfc12930cc170cdb2102"><img src="../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-b3cd93202dfbfe7ca351df85e846056d" class="lightbox-link"><img src="../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-b3cd93202dfbfe7ca351df85e846056d"><img src="../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="bitshttpsbits-trainingdetraining-by-dr-lutz-gollan"><a href="https://bits-training.de/training/" target="_blank">BITS</a> by Dr. Lutz Gollan</h2>
-<p><a href="#image-c4e2935ae1c248c32506b39ef5b22b7b" class="lightbox-link"><img src="../showcase/bits-train.png?width=60pc" alt="BITS image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-c4e2935ae1c248c32506b39ef5b22b7b"><img src="../showcase/bits-train.png?width=60pc" alt="BITS image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-f40b2af7024377fe858dc0d05788f5d5" class="lightbox-link"><img src="../showcase/bits-train.png?width=60pc" alt="BITS image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-f40b2af7024377fe858dc0d05788f5d5"><img src="../showcase/bits-train.png?width=60pc" alt="BITS image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="pamasol-electricshttpspamasolgithubiode-by-pamasol"><a href="https://pamasol.github.io/de/" target="_blank">Pamasol Electrics</a> by Pamasol</h2>
-<p><a href="#image-7357fa3669aa842cda98da7370d745c4" class="lightbox-link"><img src="../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-7357fa3669aa842cda98da7370d745c4"><img src="../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-1ed2f14f3cbf6c4846636a9c7cc12379" class="lightbox-link"><img src="../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-1ed2f14f3cbf6c4846636a9c7cc12379"><img src="../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 
@@ -202,12 +210,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../js/search.js?1694470593" defer></script>
+        <script src="../js/auto-complete.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -361,13 +369,13 @@
               }
             });
           </script>
-          <script async src="../js/github-buttons.js?1694470593"></script>
+          <script async src="../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../js/theme.js?1694470593" defer></script>
+    <script src="../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/showcase/index.print.html b/showcase/index.print.html
index cfe1cda112..594b8eb8b0 100644
--- a/showcase/index.print.html
+++ b/showcase/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/showcase/index.html" rel="canonical" type="text/html" title="Showcase :: Hugo Relearn Theme">
     <link href="../showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470593" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470593" rel="stylesheet">
-    <link href="../css/fonts.css?1694470593" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470593" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470593" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470593" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470593" rel="stylesheet">
-    <link href="../css/print.css?1694470593" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694470593" rel="stylesheet">
-    <link href="../css/ie.css?1694470593" rel="stylesheet">
-    <script src="../js/url.js?1694470593"></script>
-    <script src="../js/variant.js?1694470593"></script>
+    <link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553015" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553015" rel="stylesheet">
+    <link href="../css/fonts.css?1694553015" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553015" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553015" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553015" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553015" rel="stylesheet">
+    <link href="../css/print.css?1694553015" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694553015" rel="stylesheet">
+    <link href="../css/ie.css?1694553015" rel="stylesheet">
+    <script src="../js/url.js?1694553015"></script>
+    <script src="../js/variant.js?1694553015"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,17 +55,21 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Showcase</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -76,14 +80,14 @@
 <h1 id="showcase">Showcase</h1>
 
 <h2 id="gobolinux-wikihttpswikigobolinuxorg-by-neonsysorg"><a href="https://wiki.gobolinux.org/" target="_blank">GoboLinux Wiki</a> by NEONsys.org</h2>
-<p><a href="#image-00af1ef831f0bfc12930cc170cdb2102" class="lightbox-link"><img src="../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-00af1ef831f0bfc12930cc170cdb2102"><img src="../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-b3cd93202dfbfe7ca351df85e846056d" class="lightbox-link"><img src="../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-b3cd93202dfbfe7ca351df85e846056d"><img src="../showcase/gobolinux.png?width=60pc" alt="GoboLinux image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="bitshttpsbits-trainingdetraining-by-dr-lutz-gollan"><a href="https://bits-training.de/training/" target="_blank">BITS</a> by Dr. Lutz Gollan</h2>
-<p><a href="#image-c4e2935ae1c248c32506b39ef5b22b7b" class="lightbox-link"><img src="../showcase/bits-train.png?width=60pc" alt="BITS image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-c4e2935ae1c248c32506b39ef5b22b7b"><img src="../showcase/bits-train.png?width=60pc" alt="BITS image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-f40b2af7024377fe858dc0d05788f5d5" class="lightbox-link"><img src="../showcase/bits-train.png?width=60pc" alt="BITS image" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-f40b2af7024377fe858dc0d05788f5d5"><img src="../showcase/bits-train.png?width=60pc" alt="BITS image" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="pamasol-electricshttpspamasolgithubiode-by-pamasol"><a href="https://pamasol.github.io/de/" target="_blank">Pamasol Electrics</a> by Pamasol</h2>
-<p><a href="#image-7357fa3669aa842cda98da7370d745c4" class="lightbox-link"><img src="../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-7357fa3669aa842cda98da7370d745c4"><img src="../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-1ed2f14f3cbf6c4846636a9c7cc12379" class="lightbox-link"><img src="../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-1ed2f14f3cbf6c4846636a9c7cc12379"><img src="../showcase/pamasol-electrics-portal.png?width=60pc" alt="Pamasol Electrics" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 
@@ -93,8 +97,8 @@
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../js/theme.js?1694470593" defer></script>
+    <script src="../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/tags/children/index.html b/tags/children/index.html
index b414733e2c..60aac20aaa 100644
--- a/tags/children/index.html
+++ b/tags/children/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/children/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../tags/index.html"><span itemprop="name">Tags</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tag :: Children</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -185,12 +189,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -344,13 +348,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/tags/config/index.html b/tags/config/index.html
index a7cb8f42f5..d977ec9886 100644
--- a/tags/config/index.html
+++ b/tags/config/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/config/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/config/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/config/index.xml" rel="alternate" type="application/rss+xml" title="config :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../tags/index.html"><span itemprop="name">Tags</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tag :: config</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/tags/content/index.html b/tags/content/index.html
index 16dddba526..3f7ce22daf 100644
--- a/tags/content/index.html
+++ b/tags/content/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/content/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/content/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/content/index.xml" rel="alternate" type="application/rss+xml" title="Content :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../tags/index.html"><span itemprop="name">Tags</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tag :: Content</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -171,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -330,13 +334,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/tags/documentation/index.html b/tags/documentation/index.html
index de642c6d26..911e29fc1d 100644
--- a/tags/documentation/index.html
+++ b/tags/documentation/index.html
@@ -9,20 +9,20 @@
     <meta name="author" content="Sören Weber">
     <title>documentation :: Tag :: Hugo Relearn Theme</title>
     <link href="../../tags/documentation/index.xml" rel="alternate" type="application/rss+xml" title="documentation :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -50,28 +50,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../tags/index.html"><span itemprop="name">Tags</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tag :: documentation</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -168,12 +172,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -326,13 +330,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/tags/hidden/index.html b/tags/hidden/index.html
index 1457fc7bf7..4d45cfb739 100644
--- a/tags/hidden/index.html
+++ b/tags/hidden/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/hidden/index.xml" rel="alternate" type="application/rss+xml" title="hidden :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../tags/index.html"><span itemprop="name">Tags</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tag :: hidden</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -175,12 +179,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -334,13 +338,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/tags/index.html b/tags/index.html
index a14d69092c..f0dc060c36 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/index.html" rel="alternate" hreflang="pir">
     <link href="../tags/index.xml" rel="alternate" type="application/rss+xml" title="Tags :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../js/url.js?1694470592"></script>
-    <script src="../js/variant.js?1694470592"></script>
+    <link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../js/url.js?1694553014"></script>
+    <script src="../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,36 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <span id="toc-menu" title='Table of Contents (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <div class="topbar-button topbar-toc">
+              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+                <i class="fa-fw fas fa-list-alt"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tags</span><meta itemprop="position" content="2"></li>
             </ol>
-          </div>
+          </span>
           <div class="default-animation progress">
             <div class="toc-wrapper">
 <nav id="TableOfContents">
@@ -203,12 +211,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../js/search.js?1694470593" defer></script>
+        <script src="../js/auto-complete.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -362,13 +370,13 @@
               }
             });
           </script>
-          <script async src="../js/github-buttons.js?1694470593"></script>
+          <script async src="../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../js/theme.js?1694470593" defer></script>
+    <script src="../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/tags/non-hidden/index.html b/tags/non-hidden/index.html
index 1503762e05..ac82209583 100644
--- a/tags/non-hidden/index.html
+++ b/tags/non-hidden/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/non-hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/non-hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/non-hidden/index.xml" rel="alternate" type="application/rss+xml" title="non-hidden :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,28 +53,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../tags/index.html"><span itemprop="name">Tags</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tag :: non-hidden</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -179,12 +183,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -338,13 +342,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>
diff --git a/tags/tutorial/index.html b/tags/tutorial/index.html
index bb38838131..961f28b978 100644
--- a/tags/tutorial/index.html
+++ b/tags/tutorial/index.html
@@ -9,20 +9,20 @@
     <meta name="author" content="Sören Weber">
     <title>tutorial :: Tag :: Hugo Relearn Theme</title>
     <link href="../../tags/tutorial/index.xml" rel="alternate" type="application/rss+xml" title="tutorial :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1694470592" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694553014" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694470592" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694470592" rel="stylesheet">
-    <link href="../../css/fonts.css?1694470592" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694470592" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694470592" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694470592" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694470592" rel="stylesheet">
-    <link href="../../css/print.css?1694470592" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694470592" rel="stylesheet">
-    <script src="../../js/url.js?1694470592"></script>
-    <script src="../../js/variant.js?1694470592"></script>
+    <link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694553014" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694553014" rel="stylesheet">
+    <link href="../../css/fonts.css?1694553014" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694553014" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694553014" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694553014" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694553014" rel="stylesheet">
+    <link href="../../css/print.css?1694553014" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694553014" rel="stylesheet">
+    <script src="../../js/url.js?1694553014"></script>
+    <script src="../../js/variant.js?1694553014"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -50,28 +50,32 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-<div class="topbar-button topbar-next">
+          <span class="topbar-right">
+            <div class="topbar-button topbar-next">
 	<span>
-	  	<i class="fa-fw fas fa-chevron-right"></i>
-	</span>
-</div>
-<div class="topbar-button topbar-prev">
-	<a href="../../index.html" title="Hugo Relearn Theme (🡐)">
-	  	<i class="fa-fw fas fa-chevron-left"></i>
-	</a>
-</div>
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+                <i class="fa-fw fas fa-chevron-right"></i>
+              </span>
+            </div>
+            <div class="topbar-button topbar-prev">
+              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+                <i class="fa-fw fas fa-chevron-left"></i>
+              </a>
+            </div>
+          </span>
+          <span class="topbar-left">
+            <div class="topbar-button topbar-sidebar">
+              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+                <i class="fa-fw fas fa-bars"></i>
+              </button>
+            </div>
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../tags/index.html"><span itemprop="name">Tags</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
               <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Tag :: tutorial</span><meta itemprop="position" content="3"></li>
             </ol>
-          </div>
+          </span>
         </div>
       </nav>
       <main id="body-inner" class="highlightable default" tabindex="-1">
@@ -168,12 +172,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694470593" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694470593" defer></script>
-        <script src="../../js/search.js?1694470593" defer></script>
+        <script src="../../js/auto-complete.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694553015" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694553015" defer></script>
+        <script src="../../js/search.js?1694553015" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -326,13 +330,13 @@
               }
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694470593"></script>
+          <script async src="../../js/github-buttons.js?1694553015"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694470593" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694470593" defer></script>
-    <script src="../../js/theme.js?1694470593" defer></script>
+    <script src="../../js/clipboard.min.js?1694553015" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694553015" defer></script>
+    <script src="../../js/theme.js?1694553015" defer></script>
   </body>
 </html>