diff --git a/404.html b/404.html
index 4177da8d19..e12b73017b 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="./css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="./css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1694640597" rel="stylesheet">
-    <link href="./css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="./css/variant.css?1694640597" rel="stylesheet">
-    <link href="./css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="./css/ie.css?1694640597" rel="stylesheet">
-    <script src="./js/url.js?1694640597"></script>
-    <script src="./js/variant.js?1694640597"></script>
+    <link href="./css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="./css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="./css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1694730287" rel="stylesheet">
+    <link href="./css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="./css/variant.css?1694730287" rel="stylesheet">
+    <link href="./css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="./css/ie.css?1694730287" rel="stylesheet">
+    <script src="./js/url.js?1694730287"></script>
+    <script src="./js/variant.js?1694730287"></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 038d01fe50..e980a3a463 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -48,24 +48,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../basics/changelog/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#5200-2023-08-26">5.20.0 (2023-08-26)</a>
       <ul>
@@ -736,9 +735,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -747,28 +746,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../basics/changelog/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../basics/history/index.html" title="History (🡐)">
+              <a class="topbar-button-control" href="../../basics/history/index.html" title="History (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../cont/index.html" title="Content (🡒)">
+              <a class="topbar-button-control" href="../../cont/index.html" title="Content (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -2078,12 +2078,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -2239,13 +2239,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/basics/changelog/index.print.html b/basics/changelog/index.print.html
index 1d8fa7049a..07025071f0 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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
@@ -49,16 +49,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../basics/changelog/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,6 +69,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -1300,8 +1301,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/basics/configuration/index.html b/basics/configuration/index.html
index b645d34738..072329c405 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../basics/configuration/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#global-site-parameters">Global site parameters</a></li>
     <li><a href="#serving-your-page-from-a-subfolder">Serving your page from a subfolder</a></li>
@@ -93,9 +92,9 @@
     <li><a href="#home-button-configuration">Home Button Configuration</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -104,28 +103,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../basics/configuration/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../basics/installation/index.html" title="Installation (🡐)">
+              <a class="topbar-button-control" href="../../basics/installation/index.html" title="Installation (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../basics/customization/index.html" title="Customization (🡒)">
+              <a class="topbar-button-control" href="../../basics/customization/index.html" title="Customization (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -248,8 +248,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-c477776952eeec55ae6c58e242ea5b55" 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-c477776952eeec55ae6c58e242ea5b55"><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-045fca269eb1bb8386a09c23d29d7f6c" 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-045fca269eb1bb8386a09c23d29d7f6c"><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>
@@ -294,8 +294,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-954519fdb381ed92e775fabe377deaa5" 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-954519fdb381ed92e775fabe377deaa5"><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-5f6746de22dfd3a86aa718845b87336d" 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-5f6746de22dfd3a86aa718845b87336d"><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">
 
@@ -383,12 +383,12 @@ default values:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -544,13 +544,13 @@ default values:</p>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/basics/configuration/index.print.html b/basics/configuration/index.print.html
index 94369f7647..f363fb3277 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../basics/configuration/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -195,8 +196,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-c477776952eeec55ae6c58e242ea5b55" 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-c477776952eeec55ae6c58e242ea5b55"><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-045fca269eb1bb8386a09c23d29d7f6c" 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-045fca269eb1bb8386a09c23d29d7f6c"><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>
@@ -241,8 +242,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-954519fdb381ed92e775fabe377deaa5" 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-954519fdb381ed92e775fabe377deaa5"><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-5f6746de22dfd3a86aa718845b87336d" 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-5f6746de22dfd3a86aa718845b87336d"><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">
 
@@ -252,8 +253,8 @@ default values:</p>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/basics/customization/index.html b/basics/customization/index.html
index 2018542947..67ff1f45b9 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../basics/customization/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#change-the-logo">Change the logo</a></li>
     <li><a href="#change-the-favicon">Change the favicon</a></li>
@@ -85,9 +84,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -96,28 +95,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../basics/customization/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../basics/configuration/index.html" title="Configuration (🡐)">
+              <a class="topbar-button-control" href="../../basics/configuration/index.html" title="Configuration (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../basics/generator/index.html" title="Stylesheet generator (🡒)">
+              <a class="topbar-button-control" href="../../basics/generator/index.html" title="Stylesheet generator (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -307,12 +307,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?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -468,13 +468,13 @@ If you have requirements to support IE and/or older browser versions, use one of
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/basics/customization/index.print.html b/basics/customization/index.print.html
index 36b21e6748..5ed70f7b67 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../basics/customization/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -184,8 +185,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?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/basics/generator/index.html b/basics/generator/index.html
index 7ab053dbf6..1f95e6048a 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../basics/generator/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -70,28 +70,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../basics/generator/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../basics/customization/index.html" title="Customization (🡐)">
+              <a class="topbar-button-control" href="../../basics/customization/index.html" title="Customization (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../basics/history/index.html" title="History (🡒)">
+              <a class="topbar-button-control" href="../../basics/history/index.html" title="History (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -102,13 +103,13 @@
 <p>This interactive tool may help you to generate your own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-adf1950d789d087cf02746421e452f5a" aria-controls="expandcontent-adf1950d789d087cf02746421e452f5a" >
-    <label class="expand-label" for="expand-adf1950d789d087cf02746421e452f5a" >
+    <input type="checkbox" id="expand-d02144f40dfd226beb894d16cdc8428f" aria-controls="expandcontent-d02144f40dfd226beb894d16cdc8428f" >
+    <label class="expand-label" for="expand-d02144f40dfd226beb894d16cdc8428f" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="expandcontent-adf1950d789d087cf02746421e452f5a" class="expand-content">
+    <div id="expandcontent-d02144f40dfd226beb894d16cdc8428f" 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>
@@ -240,12 +241,12 @@ window.variants && variants.generator( '#vargenerator' );
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -401,27 +402,27 @@ window.variants && variants.generator( '#vargenerator' );
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694640597" defer></script>
-    <script src="../../js/js-yaml.min.js?1694640597" defer></script>
-    <script src="../../js/mermaid.min.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694730287" defer></script>
+    <script src="../../js/js-yaml.min.js?1694730287" defer></script>
+    <script src="../../js/mermaid.min.js?1694730287" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/basics/generator/index.print.html b/basics/generator/index.print.html
index 2900bf6d4b..24fef7950e 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../basics/generator/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -83,13 +84,13 @@
 <p>This interactive tool may help you to generate your own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-adf1950d789d087cf02746421e452f5a" aria-controls="expandcontent-adf1950d789d087cf02746421e452f5a" >
-    <label class="expand-label" for="expand-adf1950d789d087cf02746421e452f5a" >
+    <input type="checkbox" id="expand-d02144f40dfd226beb894d16cdc8428f" aria-controls="expandcontent-d02144f40dfd226beb894d16cdc8428f" >
+    <label class="expand-label" for="expand-d02144f40dfd226beb894d16cdc8428f" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="expandcontent-adf1950d789d087cf02746421e452f5a" class="expand-content">
+    <div id="expandcontent-d02144f40dfd226beb894d16cdc8428f" 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>
@@ -143,22 +144,22 @@ window.variants && variants.generator( '#vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694640598" defer></script>
-    <script src="../../js/js-yaml.min.js?1694640598" defer></script>
-    <script src="../../js/mermaid.min.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694730288" defer></script>
+    <script src="../../js/js-yaml.min.js?1694730288" defer></script>
+    <script src="../../js/mermaid.min.js?1694730288" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/basics/history/index.html b/basics/history/index.html
index 1e2f26ef81..ca713f9129 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../basics/history/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#5200-2023-08-26">5.20.0 (2023-08-26)</a>
       <ul>
@@ -740,9 +739,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -751,28 +750,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../basics/history/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../basics/generator/index.html" title="Stylesheet generator (🡐)">
+              <a class="topbar-button-control" href="../../basics/generator/index.html" title="Stylesheet generator (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../cont/index.html" title="Content (🡒)">
+              <a class="topbar-button-control" href="../../cont/index.html" title="Content (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -2084,12 +2084,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -2245,13 +2245,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/basics/history/index.print.html b/basics/history/index.print.html
index c0d5782c2d..c56c9ea459 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../basics/history/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -1306,8 +1307,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/basics/index.html b/basics/index.html
index acddf685ad..56df00791d 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../js/url.js?1694640597"></script>
-    <script src="../js/variant.js?1694640597"></script>
+    <link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../js/url.js?1694730287"></script>
+    <script src="../js/variant.js?1694730287"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../basics/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,28 +69,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../basics/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../basics/migration/index.html" title="What&#39;s New (🡒)">
+              <a class="topbar-button-control" href="../basics/migration/index.html" title="What&#39;s New (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -187,12 +188,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694640597" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../js/search.js?1694640597" defer></script>
+        <script src="../js/auto-complete.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -348,13 +349,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1694640597"></script>
+          <script async src="../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../js/theme.js?1694640597" defer></script>
+    <script src="../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/basics/index.print.html b/basics/index.print.html
index b6f5cd8d02..9b54033a9b 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../js/url.js?1694640598"></script>
-    <script src="../js/variant.js?1694640598"></script>
+    <link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../js/url.js?1694730288"></script>
+    <script src="../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../basics/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -838,8 +839,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-25a0be68d604851fd59780db994732b2" 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-25a0be68d604851fd59780db994732b2"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0dbcb5cd9c2a82afe3ebd8a8abea1946" 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-0dbcb5cd9c2a82afe3ebd8a8abea1946"><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>
@@ -882,8 +883,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-b9af266ca04f489101ae80cf6ecbaf4b" 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-b9af266ca04f489101ae80cf6ecbaf4b"><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-f0ec9ddf73e2fe14190579f4ecf085d4" 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-f0ec9ddf73e2fe14190579f4ecf085d4"><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>
@@ -1037,8 +1038,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-c477776952eeec55ae6c58e242ea5b55" 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-c477776952eeec55ae6c58e242ea5b55"><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-045fca269eb1bb8386a09c23d29d7f6c" 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-045fca269eb1bb8386a09c23d29d7f6c"><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>
@@ -1083,8 +1084,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-954519fdb381ed92e775fabe377deaa5" 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-954519fdb381ed92e775fabe377deaa5"><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-5f6746de22dfd3a86aa718845b87336d" 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-5f6746de22dfd3a86aa718845b87336d"><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">
 
@@ -1205,13 +1206,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-adf1950d789d087cf02746421e452f5a" aria-controls="expandcontent-adf1950d789d087cf02746421e452f5a" >
-    <label class="expand-label" for="expand-adf1950d789d087cf02746421e452f5a" >
+    <input type="checkbox" id="expand-d02144f40dfd226beb894d16cdc8428f" aria-controls="expandcontent-d02144f40dfd226beb894d16cdc8428f" >
+    <label class="expand-label" for="expand-d02144f40dfd226beb894d16cdc8428f" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="expandcontent-adf1950d789d087cf02746421e452f5a" class="expand-content">
+    <div id="expandcontent-d02144f40dfd226beb894d16cdc8428f" 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>
@@ -2494,22 +2495,22 @@ window.variants && variants.generator( '#vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-color.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1694640598" defer></script>
-    <script src="../js/js-yaml.min.js?1694640598" defer></script>
-    <script src="../js/mermaid.min.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-color.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1694730288" defer></script>
+    <script src="../js/js-yaml.min.js?1694730288" defer></script>
+    <script src="../js/mermaid.min.js?1694730288" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/basics/installation/index.html b/basics/installation/index.html
index 666fcedce8..5b32f273a3 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../basics/installation/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#create-your-project">Create your project</a></li>
     <li><a href="#install-the-theme">Install the theme</a>
@@ -84,9 +83,9 @@
     <li><a href="#build-the-website">Build the website</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -95,28 +94,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../basics/installation/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../basics/requirements/index.html" title="Requirements (🡐)">
+              <a class="topbar-button-control" href="../../basics/requirements/index.html" title="Requirements (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../basics/configuration/index.html" title="Configuration (🡒)">
+              <a class="topbar-button-control" href="../../basics/configuration/index.html" title="Configuration (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -153,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 Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#image-b9af266ca04f489101ae80cf6ecbaf4b" 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-b9af266ca04f489101ae80cf6ecbaf4b"><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-f0ec9ddf73e2fe14190579f4ecf085d4" 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-f0ec9ddf73e2fe14190579f4ecf085d4"><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>
@@ -269,12 +269,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -430,13 +430,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/basics/installation/index.print.html b/basics/installation/index.print.html
index 3577e3949e..4b958efc95 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../basics/installation/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -109,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 Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#image-b9af266ca04f489101ae80cf6ecbaf4b" 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-b9af266ca04f489101ae80cf6ecbaf4b"><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-f0ec9ddf73e2fe14190579f4ecf085d4" 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-f0ec9ddf73e2fe14190579f4ecf085d4"><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>
@@ -147,8 +148,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/basics/migration/index.html b/basics/migration/index.html
index 203df40aee..d912ef64f5 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../basics/migration/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#5210">5.21.0 (2023-09-03)</a></li>
     <li><a href="#5200">5.20.0 (2023-08-26)</a></li>
@@ -116,9 +115,9 @@
     <li><a href="#100">1.0.0 (2021-07-01)</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -127,28 +126,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../basics/migration/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../basics/index.html" title="Basics (🡐)">
+              <a class="topbar-button-control" href="../../basics/index.html" title="Basics (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../basics/requirements/index.html" title="Requirements (🡒)">
+              <a class="topbar-button-control" href="../../basics/requirements/index.html" title="Requirements (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -974,12 +974,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1135,13 +1135,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/basics/migration/index.print.html b/basics/migration/index.print.html
index cb8e1d28a5..28cef43952 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../basics/migration/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -820,8 +821,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/basics/requirements/index.html b/basics/requirements/index.html
index 026f5eda1e..99555ca015 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../basics/requirements/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -70,28 +70,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../basics/requirements/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../basics/migration/index.html" title="What&#39;s New (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../basics/installation/index.html" title="Installation (🡒)">
+              <a class="topbar-button-control" href="../../basics/installation/index.html" title="Installation (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -101,8 +102,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-25a0be68d604851fd59780db994732b2" 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-25a0be68d604851fd59780db994732b2"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0dbcb5cd9c2a82afe3ebd8a8abea1946" 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-0dbcb5cd9c2a82afe3ebd8a8abea1946"><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>
@@ -192,12 +193,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -353,13 +354,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/basics/requirements/index.print.html b/basics/requirements/index.print.html
index 72dadd33b3..b42d8172bf 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../basics/requirements/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -82,8 +83,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-25a0be68d604851fd59780db994732b2" 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-25a0be68d604851fd59780db994732b2"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0dbcb5cd9c2a82afe3ebd8a8abea1946" 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-0dbcb5cd9c2a82afe3ebd8a8abea1946"><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>
@@ -95,8 +96,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/categories/basic/index.html b/categories/basic/index.html
index 33671dca9a..cc000d339d 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../categories/basic/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/categories/content/index.html b/categories/content/index.html
index 70bd5002d8..2fdd933b1d 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../categories/content/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/categories/custom/index.html b/categories/custom/index.html
index ae9ff340fa..978c31e112 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../categories/custom/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/categories/index.html b/categories/index.html
index 82adadb189..e2039cb7f6 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../js/url.js?1694640597"></script>
-    <script src="../js/variant.js?1694640597"></script>
+    <link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../js/url.js?1694730287"></script>
+    <script src="../js/variant.js?1694730287"></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,33 +51,32 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../categories/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#b">B</a></li>
     <li><a href="#c">C</a></li>
     <li><a href="#t">T</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -85,18 +84,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -202,12 +202,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../js/search.js?1694640598" defer></script>
+        <script src="../js/auto-complete.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -363,13 +363,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1694640598"></script>
+          <script async src="../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/categories/taxonomy/index.html b/categories/taxonomy/index.html
index 781b03c014..a7fcc31acf 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../categories/taxonomy/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/categories/theming/index.html b/categories/theming/index.html
index 9bc923b2b3..d86119e9ed 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../categories/theming/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -176,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -337,13 +338,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/cont/archetypes/index.html b/cont/archetypes/index.html
index 64a16593a9..900462e71e 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../cont/archetypes/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#predefined-archetypes">Predefined Archetypes</a>
       <ul>
@@ -86,9 +85,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -97,28 +96,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../cont/archetypes/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../cont/pages/index.html" title="Pages organization (🡐)">
+              <a class="topbar-button-control" href="../../cont/pages/index.html" title="Pages organization (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../cont/markdown/index.html" title="Markdown syntax (🡒)">
+              <a class="topbar-button-control" href="../../cont/markdown/index.html" title="Markdown syntax (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -131,8 +131,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-a124cd7023529462a22f79a5586533fa" 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-a124cd7023529462a22f79a5586533fa"><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-1c23510109f85bfcfb4c8088df635a42" 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-1c23510109f85bfcfb4c8088df635a42"><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">+++
@@ -142,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 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-83b647dab286e74734903bd68e1529aa" 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-83b647dab286e74734903bd68e1529aa"><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-44db36c1320b9648c6fb3bec12ddb6c3" 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-44db36c1320b9648c6fb3bec12ddb6c3"><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">+++
@@ -155,8 +155,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-28349303b178e27d73021c4f99a54a4d" 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-28349303b178e27d73021c4f99a54a4d"><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-2c44408147e63ee94567b72363cc37db" 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-2c44408147e63ee94567b72363cc37db"><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>
@@ -286,12 +286,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -447,13 +447,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/cont/archetypes/index.print.html b/cont/archetypes/index.print.html
index c5dedd204d..ee91c78aec 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../cont/archetypes/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -85,8 +86,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-a124cd7023529462a22f79a5586533fa" 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-a124cd7023529462a22f79a5586533fa"><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-1c23510109f85bfcfb4c8088df635a42" 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-1c23510109f85bfcfb4c8088df635a42"><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">+++
@@ -96,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 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-83b647dab286e74734903bd68e1529aa" 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-83b647dab286e74734903bd68e1529aa"><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-44db36c1320b9648c6fb3bec12ddb6c3" 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-44db36c1320b9648c6fb3bec12ddb6c3"><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">+++
@@ -109,8 +110,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-28349303b178e27d73021c4f99a54a4d" 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-28349303b178e27d73021c4f99a54a4d"><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-2c44408147e63ee94567b72363cc37db" 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-2c44408147e63ee94567b72363cc37db"><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>
@@ -162,8 +163,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/cont/i18n/index.html b/cont/i18n/index.html
index 1e1f38ada7..ab5c67cf24 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../cont/i18n/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#basic-configuration">Basic configuration</a></li>
     <li><a href="#search">Search</a>
@@ -81,9 +80,9 @@
     <li><a href="#disable-language-switching">Disable language switching</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -92,28 +91,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../cont/i18n/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../cont/menushortcuts/index.html" title="Menu extra shortcuts (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../cont/taxonomy/index.html" title="Taxonomy (🡒)">
+              <a class="topbar-button-control" href="../../cont/taxonomy/index.html" title="Taxonomy (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -128,8 +128,8 @@
 <li>Automatic menu generation from multilingual content</li>
 <li>In-browser language switching</li>
 </ul>
-<p><a href="#image-fb768b65aff9072b15ab6b1f11c51c85" 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-fb768b65aff9072b15ab6b1f11c51c85"><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-c9499f182883cf1165643b848fc4ae66" 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-c9499f182883cf1165643b848fc4ae66"><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>
@@ -307,12 +307,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?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -468,13 +468,13 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/cont/i18n/index.print.html b/cont/i18n/index.print.html
index 5e0f017820..120b8a5751 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../cont/i18n/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -87,8 +88,8 @@
 <li>Automatic menu generation from multilingual content</li>
 <li>In-browser language switching</li>
 </ul>
-<p><a href="#image-fb768b65aff9072b15ab6b1f11c51c85" 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-fb768b65aff9072b15ab6b1f11c51c85"><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-c9499f182883cf1165643b848fc4ae66" 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-c9499f182883cf1165643b848fc4ae66"><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>
@@ -188,8 +189,8 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/cont/imageeffects/index.html b/cont/imageeffects/index.html
index 0e34b03d1c..efe26bc5d7 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,31 +52,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../cont/imageeffects/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#extending">Extending</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -85,28 +84,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../cont/imageeffects/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../cont/markdown/index.html" title="Markdown syntax (🡐)">
+              <a class="topbar-button-control" href="../../cont/markdown/index.html" title="Markdown syntax (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../cont/menushortcuts/index.html" title="Menu extra shortcuts (🡒)">
+              <a class="topbar-button-control" href="../../cont/menushortcuts/index.html" title="Menu extra shortcuts (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -121,13 +121,13 @@
 <p>Without any settings in your <code>config.toml</code> this defaults to</p>
 
   
-<div class="tab-panel" data-tab-group="705ff8406b18693241f688e90b399120">
+<div class="tab-panel" data-tab-group="a08c8db08960f0ffd65ed53e8b2a6edf">
   <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('705ff8406b18693241f688e90b399120','configtoml')"
+      onclick="switchTab('a08c8db08960f0ffd65ed53e8b2a6edf','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -151,13 +151,13 @@
 </div><p>This can be overridden in a pages frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="6e75f060ee3d25b028c0c192186f26fe">
+<div class="tab-panel" data-tab-group="f67e5cda8346efac0e1e2aa39286ea97">
   <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('6e75f060ee3d25b028c0c192186f26fe','frontmatter')"
+      onclick="switchTab('f67e5cda8346efac0e1e2aa39286ea97','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -180,13 +180,13 @@
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="112879dcdcef60ca1c110f7ab3e4bb23">
+<div class="tab-panel" data-tab-group="f462f72deb6219a6c7ad489b7aa6c52e">
   <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('112879dcdcef60ca1c110f7ab3e4bb23','url')"
+      onclick="switchTab('f462f72deb6219a6c7ad489b7aa6c52e','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -206,13 +206,13 @@
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="0be858934eb5a7eb62f4fa802eb7fd95">
+<div class="tab-panel" data-tab-group="17b621c850b2fd5d0cf07d41da2ff772">
   <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('0be858934eb5a7eb62f4fa802eb7fd95','result')"
+      onclick="switchTab('17b621c850b2fd5d0cf07d41da2ff772','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -235,13 +235,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="7605f0a4b4d91454499548abb26e2d26">
+<div class="tab-panel" data-tab-group="98ceb028a4c8cd3cba946bff2fa33ab5">
   <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('7605f0a4b4d91454499548abb26e2d26','html')"
+      onclick="switchTab('98ceb028a4c8cd3cba946bff2fa33ab5','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -355,12 +355,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -516,13 +516,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/cont/imageeffects/index.print.html b/cont/imageeffects/index.print.html
index 26e6abe793..58caee2b73 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../cont/imageeffects/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -87,13 +88,13 @@
 <p>Without any settings in your <code>config.toml</code> this defaults to</p>
 
   
-<div class="tab-panel" data-tab-group="705ff8406b18693241f688e90b399120">
+<div class="tab-panel" data-tab-group="a08c8db08960f0ffd65ed53e8b2a6edf">
   <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('705ff8406b18693241f688e90b399120','configtoml')"
+      onclick="switchTab('a08c8db08960f0ffd65ed53e8b2a6edf','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -117,13 +118,13 @@
 </div><p>This can be overridden in a pages frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="6e75f060ee3d25b028c0c192186f26fe">
+<div class="tab-panel" data-tab-group="f67e5cda8346efac0e1e2aa39286ea97">
   <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('6e75f060ee3d25b028c0c192186f26fe','frontmatter')"
+      onclick="switchTab('f67e5cda8346efac0e1e2aa39286ea97','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -146,13 +147,13 @@
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="112879dcdcef60ca1c110f7ab3e4bb23">
+<div class="tab-panel" data-tab-group="f462f72deb6219a6c7ad489b7aa6c52e">
   <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('112879dcdcef60ca1c110f7ab3e4bb23','url')"
+      onclick="switchTab('f462f72deb6219a6c7ad489b7aa6c52e','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -172,13 +173,13 @@
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="0be858934eb5a7eb62f4fa802eb7fd95">
+<div class="tab-panel" data-tab-group="17b621c850b2fd5d0cf07d41da2ff772">
   <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('0be858934eb5a7eb62f4fa802eb7fd95','result')"
+      onclick="switchTab('17b621c850b2fd5d0cf07d41da2ff772','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -201,13 +202,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="7605f0a4b4d91454499548abb26e2d26">
+<div class="tab-panel" data-tab-group="98ceb028a4c8cd3cba946bff2fa33ab5">
   <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('7605f0a4b4d91454499548abb26e2d26','html')"
+      onclick="switchTab('98ceb028a4c8cd3cba946bff2fa33ab5','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -243,8 +244,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/cont/index.html b/cont/index.html
index 2113184e41..ef85a9b9dd 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../js/url.js?1694640597"></script>
-    <script src="../js/variant.js?1694640597"></script>
+    <link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../js/url.js?1694730287"></script>
+    <script src="../js/variant.js?1694730287"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../cont/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,28 +69,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../cont/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../basics/history/index.html" title="History (🡐)">
+              <a class="topbar-button-control" href="../basics/history/index.html" title="History (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../cont/pages/index.html" title="Pages organization (🡒)">
+              <a class="topbar-button-control" href="../cont/pages/index.html" title="Pages organization (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -187,12 +188,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../js/search.js?1694640598" defer></script>
+        <script src="../js/auto-complete.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -348,13 +349,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1694640598"></script>
+          <script async src="../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/cont/index.print.html b/cont/index.print.html
index f57de47a2e..4c24711763 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../js/url.js?1694640598"></script>
-    <script src="../js/variant.js?1694640598"></script>
+    <link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../js/url.js?1694730288"></script>
+    <script src="../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../cont/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -168,8 +169,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-15dcefc5bfa14fcf22c1132a48f584fc" 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-15dcefc5bfa14fcf22c1132a48f584fc"><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-4b3168155e96d15952dd376027f2126a" 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-4b3168155e96d15952dd376027f2126a"><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>
@@ -212,8 +213,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-a124cd7023529462a22f79a5586533fa" 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-a124cd7023529462a22f79a5586533fa"><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-1c23510109f85bfcfb4c8088df635a42" 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-1c23510109f85bfcfb4c8088df635a42"><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">+++
@@ -223,8 +224,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-83b647dab286e74734903bd68e1529aa" 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-83b647dab286e74734903bd68e1529aa"><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-44db36c1320b9648c6fb3bec12ddb6c3" 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-44db36c1320b9648c6fb3bec12ddb6c3"><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">+++
@@ -236,8 +237,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-28349303b178e27d73021c4f99a54a4d" 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-28349303b178e27d73021c4f99a54a4d"><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-2c44408147e63ee94567b72363cc37db" 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-2c44408147e63ee94567b72363cc37db"><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>
@@ -808,8 +809,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-24fe53473defdde3bbf63b1db604cd8c" 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-24fe53473defdde3bbf63b1db604cd8c"><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-b66f0d1880554ac44b54b6c26a033b7f" 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-b66f0d1880554ac44b54b6c26a033b7f"><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>
@@ -819,8 +820,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-4311573b9fb8ac86dd807ee3e12bc8fe" 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-4311573b9fb8ac86dd807ee3e12bc8fe"><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-5addfa4b62cf4764e3ad80e28f8ab719" 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-5addfa4b62cf4764e3ad80e28f8ab719"><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>
@@ -832,8 +833,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-dee7bd045397b966dd689b3e5c8f5639" 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-dee7bd045397b966dd689b3e5c8f5639"><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-cce934dca86b360cd1c6c9b765c8af03" 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-cce934dca86b360cd1c6c9b765c8af03"><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>
@@ -845,8 +846,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-edbdbf731b3b3151f10fa21f7ce1d188" 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-edbdbf731b3b3151f10fa21f7ce1d188"><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-3ddd23dfcac9d29f6b2ebef3900bf01a" 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-3ddd23dfcac9d29f6b2ebef3900bf01a"><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>
@@ -854,8 +855,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-26b5f529bcb800192e9792f29d211e61" 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-26b5f529bcb800192e9792f29d211e61"><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-d7a1b8f8a4055d55be413539213ff25a" 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-d7a1b8f8a4055d55be413539213ff25a"><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>
@@ -863,8 +864,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-a141a4ea1216923df5d9f494b0511cf4" 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-a141a4ea1216923df5d9f494b0511cf4"><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-ac8c384e5afd8f74f37c48f1066c64e9" 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-ac8c384e5afd8f74f37c48f1066c64e9"><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>
@@ -875,8 +876,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-631cb039a6a33e7938519299f3ad8f0a" 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-631cb039a6a33e7938519299f3ad8f0a"><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-8229727f93622c4d7884982a06671860" 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-8229727f93622c4d7884982a06671860"><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>
@@ -885,8 +886,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-7a8a638dfdb08617ef91fc722bf5fdbb" 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-7a8a638dfdb08617ef91fc722bf5fdbb"><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-0ec51547af7ccbeb46827319eb656cc2" 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-0ec51547af7ccbeb46827319eb656cc2"><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>
@@ -895,8 +896,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-8df89adb76b91daeeecb2d0191d3e491" 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-8df89adb76b91daeeecb2d0191d3e491"><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-ad3e887befc3f24978fcc04a1b52bbad" 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-ad3e887befc3f24978fcc04a1b52bbad"><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>
@@ -905,8 +906,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-19e4d74b9f31d7733fd880feda8e1651" 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-19e4d74b9f31d7733fd880feda8e1651"><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-8c7addc991f235b64e95cee02c22f74f" 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-8c7addc991f235b64e95cee02c22f74f"><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>
@@ -918,14 +919,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-08c553456896b870b6632a02d259f27e" 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-08c553456896b870b6632a02d259f27e"><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-f035942f6b22e64dde1bb22850d1d3cf" 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-f035942f6b22e64dde1bb22850d1d3cf"><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-a17db850ec4dcbf9d4dc8b6a3169593f" 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-a17db850ec4dcbf9d4dc8b6a3169593f"><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-1d3fd0c74d33083c37504d1261779f12" 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-1d3fd0c74d33083c37504d1261779f12"><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-adfd2faf2ae752d222e5bfa8f62494ac" 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-adfd2faf2ae752d222e5bfa8f62494ac"><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-767fd53347d3389333611c6b670da058" 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-767fd53347d3389333611c6b670da058"><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-931cc9fb5857bb79fb19c08f1ebf82f4" 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-931cc9fb5857bb79fb19c08f1ebf82f4"><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-504e9fb99e8535584cb22a540666144a" 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-504e9fb99e8535584cb22a540666144a"><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>
@@ -934,8 +935,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-4322c39745881733f2d1d0244bf3eccf" 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-4322c39745881733f2d1d0244bf3eccf"><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-85027e905c9c557abed6cac81f24e3ad" 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-85027e905c9c557abed6cac81f24e3ad"><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>
@@ -975,13 +976,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="705ff8406b18693241f688e90b399120">
+<div class="tab-panel" data-tab-group="a08c8db08960f0ffd65ed53e8b2a6edf">
   <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('705ff8406b18693241f688e90b399120','configtoml')"
+      onclick="switchTab('a08c8db08960f0ffd65ed53e8b2a6edf','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -1005,13 +1006,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="6e75f060ee3d25b028c0c192186f26fe">
+<div class="tab-panel" data-tab-group="f67e5cda8346efac0e1e2aa39286ea97">
   <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('6e75f060ee3d25b028c0c192186f26fe','frontmatter')"
+      onclick="switchTab('f67e5cda8346efac0e1e2aa39286ea97','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -1034,13 +1035,13 @@ line 3 of code
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="112879dcdcef60ca1c110f7ab3e4bb23">
+<div class="tab-panel" data-tab-group="f462f72deb6219a6c7ad489b7aa6c52e">
   <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('112879dcdcef60ca1c110f7ab3e4bb23','url')"
+      onclick="switchTab('f462f72deb6219a6c7ad489b7aa6c52e','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -1060,13 +1061,13 @@ line 3 of code
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="0be858934eb5a7eb62f4fa802eb7fd95">
+<div class="tab-panel" data-tab-group="17b621c850b2fd5d0cf07d41da2ff772">
   <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('0be858934eb5a7eb62f4fa802eb7fd95','result')"
+      onclick="switchTab('17b621c850b2fd5d0cf07d41da2ff772','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -1089,13 +1090,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="7605f0a4b4d91454499548abb26e2d26">
+<div class="tab-panel" data-tab-group="98ceb028a4c8cd3cba946bff2fa33ab5">
   <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('7605f0a4b4d91454499548abb26e2d26','html')"
+      onclick="switchTab('98ceb028a4c8cd3cba946bff2fa33ab5','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -1272,8 +1273,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-fb768b65aff9072b15ab6b1f11c51c85" 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-fb768b65aff9072b15ab6b1f11c51c85"><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-c9499f182883cf1165643b848fc4ae66" 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-c9499f182883cf1165643b848fc4ae66"><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>
@@ -1410,8 +1411,8 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/cont/markdown/index.html b/cont/markdown/index.html
index f59ab95788..99fc09a15a 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../cont/markdown/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#paragraphs">Paragraphs</a></li>
     <li><a href="#headings">Headings</a></li>
@@ -122,9 +121,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -133,28 +132,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../cont/markdown/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../cont/archetypes/index.html" title="Archetypes (🡐)">
+              <a class="topbar-button-control" href="../../cont/archetypes/index.html" title="Archetypes (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../cont/imageeffects/index.html" title="Image Effects (🡒)">
+              <a class="topbar-button-control" href="../../cont/imageeffects/index.html" title="Image Effects (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -679,8 +679,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-24fe53473defdde3bbf63b1db604cd8c" 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-24fe53473defdde3bbf63b1db604cd8c"><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-b66f0d1880554ac44b54b6c26a033b7f" 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-b66f0d1880554ac44b54b6c26a033b7f"><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>
@@ -690,8 +690,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-4311573b9fb8ac86dd807ee3e12bc8fe" 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-4311573b9fb8ac86dd807ee3e12bc8fe"><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-5addfa4b62cf4764e3ad80e28f8ab719" 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-5addfa4b62cf4764e3ad80e28f8ab719"><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>
@@ -703,8 +703,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-dee7bd045397b966dd689b3e5c8f5639" 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-dee7bd045397b966dd689b3e5c8f5639"><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-cce934dca86b360cd1c6c9b765c8af03" 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-cce934dca86b360cd1c6c9b765c8af03"><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>
@@ -716,8 +716,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-edbdbf731b3b3151f10fa21f7ce1d188" 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-edbdbf731b3b3151f10fa21f7ce1d188"><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-3ddd23dfcac9d29f6b2ebef3900bf01a" 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-3ddd23dfcac9d29f6b2ebef3900bf01a"><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>
@@ -725,8 +725,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-26b5f529bcb800192e9792f29d211e61" 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-26b5f529bcb800192e9792f29d211e61"><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-d7a1b8f8a4055d55be413539213ff25a" 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-d7a1b8f8a4055d55be413539213ff25a"><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>
@@ -734,8 +734,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-a141a4ea1216923df5d9f494b0511cf4" 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-a141a4ea1216923df5d9f494b0511cf4"><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-ac8c384e5afd8f74f37c48f1066c64e9" 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-ac8c384e5afd8f74f37c48f1066c64e9"><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>
@@ -746,8 +746,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-631cb039a6a33e7938519299f3ad8f0a" 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-631cb039a6a33e7938519299f3ad8f0a"><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-8229727f93622c4d7884982a06671860" 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-8229727f93622c4d7884982a06671860"><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>
@@ -756,8 +756,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-7a8a638dfdb08617ef91fc722bf5fdbb" 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-7a8a638dfdb08617ef91fc722bf5fdbb"><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-0ec51547af7ccbeb46827319eb656cc2" 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-0ec51547af7ccbeb46827319eb656cc2"><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>
@@ -766,8 +766,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-8df89adb76b91daeeecb2d0191d3e491" 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-8df89adb76b91daeeecb2d0191d3e491"><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-ad3e887befc3f24978fcc04a1b52bbad" 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-ad3e887befc3f24978fcc04a1b52bbad"><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>
@@ -776,8 +776,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-19e4d74b9f31d7733fd880feda8e1651" 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-19e4d74b9f31d7733fd880feda8e1651"><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-8c7addc991f235b64e95cee02c22f74f" 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-8c7addc991f235b64e95cee02c22f74f"><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>
@@ -789,14 +789,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-08c553456896b870b6632a02d259f27e" 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-08c553456896b870b6632a02d259f27e"><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-f035942f6b22e64dde1bb22850d1d3cf" 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-f035942f6b22e64dde1bb22850d1d3cf"><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-a17db850ec4dcbf9d4dc8b6a3169593f" 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-a17db850ec4dcbf9d4dc8b6a3169593f"><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-1d3fd0c74d33083c37504d1261779f12" 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-1d3fd0c74d33083c37504d1261779f12"><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-adfd2faf2ae752d222e5bfa8f62494ac" 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-adfd2faf2ae752d222e5bfa8f62494ac"><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-767fd53347d3389333611c6b670da058" 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-767fd53347d3389333611c6b670da058"><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-931cc9fb5857bb79fb19c08f1ebf82f4" 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-931cc9fb5857bb79fb19c08f1ebf82f4"><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-504e9fb99e8535584cb22a540666144a" 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-504e9fb99e8535584cb22a540666144a"><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>
@@ -805,8 +805,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-4322c39745881733f2d1d0244bf3eccf" 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-4322c39745881733f2d1d0244bf3eccf"><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-85027e905c9c557abed6cac81f24e3ad" 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-85027e905c9c557abed6cac81f24e3ad"><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>
@@ -915,12 +915,12 @@ line 3 of code
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1076,13 +1076,13 @@ line 3 of code
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/cont/markdown/index.print.html b/cont/markdown/index.print.html
index 4f9287433b..b1ba1685a6 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../cont/markdown/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -597,8 +598,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-24fe53473defdde3bbf63b1db604cd8c" 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-24fe53473defdde3bbf63b1db604cd8c"><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-b66f0d1880554ac44b54b6c26a033b7f" 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-b66f0d1880554ac44b54b6c26a033b7f"><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>
@@ -608,8 +609,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-4311573b9fb8ac86dd807ee3e12bc8fe" 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-4311573b9fb8ac86dd807ee3e12bc8fe"><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-5addfa4b62cf4764e3ad80e28f8ab719" 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-5addfa4b62cf4764e3ad80e28f8ab719"><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>
@@ -621,8 +622,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-dee7bd045397b966dd689b3e5c8f5639" 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-dee7bd045397b966dd689b3e5c8f5639"><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-cce934dca86b360cd1c6c9b765c8af03" 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-cce934dca86b360cd1c6c9b765c8af03"><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>
@@ -634,8 +635,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-edbdbf731b3b3151f10fa21f7ce1d188" 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-edbdbf731b3b3151f10fa21f7ce1d188"><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-3ddd23dfcac9d29f6b2ebef3900bf01a" 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-3ddd23dfcac9d29f6b2ebef3900bf01a"><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>
@@ -643,8 +644,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-26b5f529bcb800192e9792f29d211e61" 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-26b5f529bcb800192e9792f29d211e61"><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-d7a1b8f8a4055d55be413539213ff25a" 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-d7a1b8f8a4055d55be413539213ff25a"><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>
@@ -652,8 +653,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-a141a4ea1216923df5d9f494b0511cf4" 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-a141a4ea1216923df5d9f494b0511cf4"><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-ac8c384e5afd8f74f37c48f1066c64e9" 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-ac8c384e5afd8f74f37c48f1066c64e9"><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>
@@ -664,8 +665,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-631cb039a6a33e7938519299f3ad8f0a" 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-631cb039a6a33e7938519299f3ad8f0a"><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-8229727f93622c4d7884982a06671860" 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-8229727f93622c4d7884982a06671860"><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>
@@ -674,8 +675,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-7a8a638dfdb08617ef91fc722bf5fdbb" 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-7a8a638dfdb08617ef91fc722bf5fdbb"><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-0ec51547af7ccbeb46827319eb656cc2" 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-0ec51547af7ccbeb46827319eb656cc2"><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>
@@ -684,8 +685,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-8df89adb76b91daeeecb2d0191d3e491" 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-8df89adb76b91daeeecb2d0191d3e491"><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-ad3e887befc3f24978fcc04a1b52bbad" 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-ad3e887befc3f24978fcc04a1b52bbad"><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>
@@ -694,8 +695,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-19e4d74b9f31d7733fd880feda8e1651" 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-19e4d74b9f31d7733fd880feda8e1651"><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-8c7addc991f235b64e95cee02c22f74f" 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-8c7addc991f235b64e95cee02c22f74f"><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>
@@ -707,14 +708,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-08c553456896b870b6632a02d259f27e" 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-08c553456896b870b6632a02d259f27e"><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-f035942f6b22e64dde1bb22850d1d3cf" 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-f035942f6b22e64dde1bb22850d1d3cf"><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-a17db850ec4dcbf9d4dc8b6a3169593f" 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-a17db850ec4dcbf9d4dc8b6a3169593f"><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-1d3fd0c74d33083c37504d1261779f12" 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-1d3fd0c74d33083c37504d1261779f12"><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-adfd2faf2ae752d222e5bfa8f62494ac" 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-adfd2faf2ae752d222e5bfa8f62494ac"><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-767fd53347d3389333611c6b670da058" 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-767fd53347d3389333611c6b670da058"><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-931cc9fb5857bb79fb19c08f1ebf82f4" 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-931cc9fb5857bb79fb19c08f1ebf82f4"><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-504e9fb99e8535584cb22a540666144a" 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-504e9fb99e8535584cb22a540666144a"><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>
@@ -723,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-4322c39745881733f2d1d0244bf3eccf" 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-4322c39745881733f2d1d0244bf3eccf"><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-85027e905c9c557abed6cac81f24e3ad" 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-85027e905c9c557abed6cac81f24e3ad"><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>
@@ -755,8 +756,8 @@ line 3 of code
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.html b/cont/menushortcuts/index.html
index 40fae77825..fcc9697105 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,33 +52,32 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../cont/menushortcuts/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#basic-configuration">Basic configuration</a></li>
     <li><a href="#i18n">Configuration for Multilingual mode</a></li>
     <li><a href="#shortcuts-to-pages-inside-of-your-project">Shortcuts to pages inside of your project</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,28 +86,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../cont/menushortcuts/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../cont/imageeffects/index.html" title="Image Effects (🡐)">
+              <a class="topbar-button-control" href="../../cont/imageeffects/index.html" title="Image Effects (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../cont/i18n/index.html" title="Multilingual and i18n (🡒)">
+              <a class="topbar-button-control" href="../../cont/i18n/index.html" title="Multilingual and i18n (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -324,12 +324,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?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -485,13 +485,13 @@ However, if you want to keep the title but change its value, it can be overridde
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.print.html b/cont/menushortcuts/index.print.html
index 6c64fe6ad9..45566b6343 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../cont/menushortcuts/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -210,8 +211,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?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/cont/pages/index.html b/cont/pages/index.html
index dbc3a2be9b..70a552a390 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../cont/pages/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#folders">Folders</a></li>
     <li><a href="#create-your-project">Create your project</a></li>
@@ -83,9 +82,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -94,28 +93,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../cont/pages/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../cont/index.html" title="Content (🡐)">
+              <a class="topbar-button-control" href="../../cont/index.html" title="Content (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../cont/archetypes/index.html" title="Archetypes (🡒)">
+              <a class="topbar-button-control" href="../../cont/archetypes/index.html" title="Archetypes (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -197,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-15dcefc5bfa14fcf22c1132a48f584fc" 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-15dcefc5bfa14fcf22c1132a48f584fc"><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-4b3168155e96d15952dd376027f2126a" 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-4b3168155e96d15952dd376027f2126a"><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>
@@ -312,12 +312,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?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -473,13 +473,13 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/cont/pages/index.print.html b/cont/pages/index.print.html
index 67d8339a36..5206596fa8 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../cont/pages/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -154,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-15dcefc5bfa14fcf22c1132a48f584fc" 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-15dcefc5bfa14fcf22c1132a48f584fc"><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-4b3168155e96d15952dd376027f2126a" 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-4b3168155e96d15952dd376027f2126a"><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>
@@ -191,8 +192,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/cont/taxonomy/index.html b/cont/taxonomy/index.html
index 431af98e90..cbd696cab1 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,33 +52,32 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../cont/taxonomy/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#configuration">Configuration</a></li>
     <li><a href="#behavior">Behavior</a></li>
     <li><a href="#list-all-the-tags">List all the tags</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,28 +86,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../cont/taxonomy/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../cont/i18n/index.html" title="Multilingual and i18n (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../shortcodes/index.html" title="Shortcodes (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/index.html" title="Shortcodes (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -228,12 +228,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -389,13 +389,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/cont/taxonomy/index.print.html b/cont/taxonomy/index.print.html
index 354bc65a89..f123b310b9 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../cont/taxonomy/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -114,8 +115,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/css/ie.css b/css/ie.css
index 4fe4bb72ee..57134f86b5 100644
--- a/css/ie.css
+++ b/css/ie.css
@@ -70,10 +70,10 @@
 		border-top-right-radius: 0;
 		border-right-width: 0;
 	}
-	.topbar-left .topbar-button > * {
+	.topbar-left .topbar-button > .topbar-button-control {
 		border-right: 1px solid rgba( 134, 134, 134, .333 );
 	}
-	.topbar-right .topbar-button > * {
+	.topbar-right .topbar-button > .topbar-button-control {
 		border-left: 1px solid rgba( 134, 134, 134, .333 );
 	}
 	#body .topbar-sidebar-divider {
@@ -85,14 +85,9 @@
 	html[dir="rtl"] .topbar-next i {
 		transform: scaleX(1);
 	}
-	.progress {
+	.topbar-button-flyout {
 		left: 1rem;
 	}
-	@media screen and (max-width: 48rem) {
-		.progress {
-			left: 4.25rem;
-		}
-	}
 	@media screen and (max-width: 60rem) {
 		#body {
 			margin-left: 14.375rem;
@@ -572,7 +567,7 @@
 		border-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-SEPARATOR-color) */
 	}
 
-	.progress {
+	.topbar-button-flyout {
 		background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
 	}
 
diff --git a/css/theme.css b/css/theme.css
index 21f6660adc..425c09cb8d 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -401,9 +401,9 @@ dd {
 .topbar-breadcrumbs a:hover *,
 .topbar-breadcrumbs a:active *,
 .topbar-breadcrumbs a:focus *,
-.toc-wrapper a:hover,
-.toc-wrapper a:active,
-.toc-wrapper a:focus,
+.topbar-button-flyout a:hover,
+.topbar-button-flyout a:active,
+.topbar-button-flyout a:focus,
 article a:hover,
 article a:active,
 article a:focus {
@@ -989,15 +989,15 @@ td {
     position: relative;
 }
 
-.topbar-button > * {
+.topbar-button > .topbar-button-control {
     display: inline-block;
     padding-left: 1rem;
     padding-right: 1rem;
 }
-.topbar-left .topbar-button > * {
+.topbar-left .topbar-button > .topbar-button-control {
     border-inline-end: 1px solid rgba( 134, 134, 134, .333 );
 }
-.topbar-right .topbar-button > * {
+.topbar-right .topbar-button > .topbar-button-control {
     border-inline-start: 1px solid rgba( 134, 134, 134, .333 );
 }
 
@@ -1048,14 +1048,14 @@ html[dir="rtl"] .topbar-next i {
     }
 }
 
-.progress {
-    inset-inline-start: 1rem;
-    top: 1rem;
+.topbar-button-flyout {
+    top: .75rem;
 }
-@media screen and (max-width: 48rem) {
-    .progress {
-        inset-inline-start: 4.25rem;
-    }
+.topbar-left .topbar-button-flyout {
+    inset-inline-start: 1.5rem;
+}
+.topbar-right .topbar-button-flyout {
+    inset-inline-end: 1.5rem;
 }
 
 .topbar-breadcrumbs {
@@ -1135,7 +1135,7 @@ html[dir="rtl"] .topbar-next i {
         margin-inline-start: 14.375rem;
         overflow: hidden;
     }
-    .mobile-support.sidebar-flyout #sidebar-overlay{
+    .mobile-support.sidebar-flyout #body-overlay{
         background-color: rgba( 134, 134, 134, .5 );
         bottom: 0;
         cursor: pointer;
@@ -1360,10 +1360,9 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 
 /* Table of contents */
 
-.toc-flyout #toc-overlay{
+.topbar-flyout #main-overlay{
     bottom: 0;
     cursor: pointer;
-    height: calc(100vh - 3rem);
     left: 0;
     position: absolute;
     right: 0;
@@ -1371,7 +1370,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     z-index: 160;
 }
 
-.progress {
+.topbar-button-flyout {
     border: 0 solid rgba( 134, 134, 134, .166 );
     box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
     height: 0;
@@ -1382,33 +1381,48 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     z-index: 180;
 }
 
-.toc-flyout .progress {
+.topbar-button.topbar-flyout .topbar-button-flyout {
     border-width: 1px;
     height: auto;
     opacity: 1;
     width: auto;
 }
 
-.progress .toc-wrapper {
+.topbar-button-flyout .topbar-button-flyout-wrapper {
     background-color: rgba( 134, 134, 134, .066 );
 }
 
-.progress ul {
+.topbar-button-flyout-wrapper {
+    --ps-rail-hover-color: rgba( 176, 176, 176, .25 );
+    max-height: 90vh;
+    overflow: hidden;
+    padding: 1rem 1rem;
+    position: relative; /* PS */
+}
+
+#TableOfContents,
+.TableOfContents {
+    font-size: .8125rem;
+}
+#TableOfContents ul,
+.TableOfContents ul {
     list-style: none;
     margin: 0;
     padding: 0 1rem;
 }
 
-#TableOfContents {
-    --ps-rail-hover-color: rgba( 176, 176, 176, .25 );
-    font-size: .8125rem !important;
-    max-height: 90vh;
-    overflow: hidden;
-    padding: 1rem .375rem !important;
-    position: relative; /* PS */
+#TableOfContents > ul,
+.TableOfContents > ul {
+    padding: 0;
 }
 
-#TableOfContents > ul > li > a {
+#TableOfContents li,
+.TableOfContents li {
+    white-space: nowrap;
+}
+
+#TableOfContents > ul > li > a,
+.TableOfContents > ul > li > a {
     font-weight: 500;
 }
 
diff --git a/css/variant.css b/css/variant.css
index 41bd1ff030..c7b6821fca 100644
--- a/css/variant.css
+++ b/css/variant.css
@@ -318,7 +318,7 @@ pre .copy-to-clipboard-button:hover {
     border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color);
 }
 
-.progress {
+.topbar-button-flyout {
     background-color: var(--INTERNAL-MAIN-BG-color);
 }
 
diff --git a/dev/contributing/index.html b/dev/contributing/index.html
index 6aef5d9a36..2dfe90e520 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,32 +51,31 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../dev/contributing/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#code-quality">Code Quality</a></li>
     <li><a href="#conventional-commits">Conventional Commits</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -85,28 +84,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../dev/contributing/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../dev/index.html" title="Development (🡐)">
+              <a class="topbar-button-control" href="../../dev/index.html" title="Development (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../dev/maintaining/index.html" title="Maintaining (🡒)">
+              <a class="topbar-button-control" href="../../dev/maintaining/index.html" title="Maintaining (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -318,12 +318,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -483,13 +483,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/dev/contributing/index.print.html b/dev/contributing/index.print.html
index a0911b806a..a898a98e7c 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../dev/contributing/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -205,8 +206,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/dev/index.html b/dev/index.html
index 40f96dd235..8f7d0ef48b 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../js/url.js?1694640597"></script>
-    <script src="../js/variant.js?1694640597"></script>
+    <link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../js/url.js?1694730287"></script>
+    <script src="../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../dev/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -68,28 +68,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../dev/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../shortcodes/tabs/index.html" title="Tabs (🡐)">
+              <a class="topbar-button-control" href="../shortcodes/tabs/index.html" title="Tabs (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../dev/contributing/index.html" title="Contributing (🡒)">
+              <a class="topbar-button-control" href="../dev/contributing/index.html" title="Contributing (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -193,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../js/search.js?1694640598" defer></script>
+        <script src="../js/auto-complete.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -358,13 +359,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1694640598"></script>
+          <script async src="../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/dev/index.print.html b/dev/index.print.html
index fa57080f6e..6404549cd0 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../js/url.js?1694640598"></script>
-    <script src="../js/variant.js?1694640598"></script>
+    <link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../js/url.js?1694730288"></script>
+    <script src="../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../dev/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -71,6 +71,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -463,8 +464,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-52d90056a113f6114a5b3c0ac15850e9" 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-52d90056a113f6114a5b3c0ac15850e9"><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-22fee4c1fde4211f030edba866dd03c6" 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-22fee4c1fde4211f030edba866dd03c6"><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>
@@ -493,11 +494,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-500fed786f81618ed2845622c774103c" 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-500fed786f81618ed2845622c774103c"><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-945b14c277faef56839c317b4174c3c1" 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-945b14c277faef56839c317b4174c3c1"><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-d1e9c47c4071c4c113ddd417153efde4" 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-d1e9c47c4071c4c113ddd417153efde4"><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-ee65c24603797e26c97b9aac0f366a6e" 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-ee65c24603797e26c97b9aac0f366a6e"><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">
 
@@ -508,8 +509,8 @@
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/dev/maintaining/index.html b/dev/maintaining/index.html
index 5e171abf54..4559788991 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,24 +51,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../dev/maintaining/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#semver">Semver</a></li>
     <li><a href="#managing-issues">Managing Issues</a></li>
@@ -85,9 +84,9 @@
     <li><a href="#making-releases">Making Releases</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -96,28 +95,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../dev/maintaining/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../dev/contributing/index.html" title="Contributing (🡐)">
+              <a class="topbar-button-control" href="../../dev/contributing/index.html" title="Contributing (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../dev/screenshots/index.html" title="Screenshots (🡒)">
+              <a class="topbar-button-control" href="../../dev/screenshots/index.html" title="Screenshots (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -405,12 +405,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -570,13 +570,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/dev/maintaining/index.print.html b/dev/maintaining/index.print.html
index fcadcef376..b971313213 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../dev/maintaining/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -281,8 +282,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/dev/screenshots/index.html b/dev/screenshots/index.html
index 68056e19ca..b84973836f 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,24 +51,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../dev/screenshots/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#common">Common</a></li>
     <li><a href="#demo-screenshot">Demo Screenshot</a>
@@ -84,9 +83,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -95,28 +94,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../dev/screenshots/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../dev/maintaining/index.html" title="Maintaining (🡐)">
+              <a class="topbar-button-control" href="../../dev/maintaining/index.html" title="Maintaining (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -155,8 +155,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-52d90056a113f6114a5b3c0ac15850e9" 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-52d90056a113f6114a5b3c0ac15850e9"><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-22fee4c1fde4211f030edba866dd03c6" 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-22fee4c1fde4211f030edba866dd03c6"><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>
@@ -185,11 +185,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-500fed786f81618ed2845622c774103c" 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-500fed786f81618ed2845622c774103c"><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-945b14c277faef56839c317b4174c3c1" 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-945b14c277faef56839c317b4174c3c1"><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-d1e9c47c4071c4c113ddd417153efde4" 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-d1e9c47c4071c4c113ddd417153efde4"><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-ee65c24603797e26c97b9aac0f366a6e" 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-ee65c24603797e26c97b9aac0f366a6e"><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">
 
@@ -277,12 +277,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -442,13 +442,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/dev/screenshots/index.print.html b/dev/screenshots/index.print.html
index 500b5addca..26f9d87bf4 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../dev/screenshots/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -110,8 +111,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-52d90056a113f6114a5b3c0ac15850e9" 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-52d90056a113f6114a5b3c0ac15850e9"><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-22fee4c1fde4211f030edba866dd03c6" 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-22fee4c1fde4211f030edba866dd03c6"><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>
@@ -140,11 +141,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-500fed786f81618ed2845622c774103c" 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-500fed786f81618ed2845622c774103c"><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-945b14c277faef56839c317b4174c3c1" 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-945b14c277faef56839c317b4174c3c1"><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-d1e9c47c4071c4c113ddd417153efde4" 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-d1e9c47c4071c4c113ddd417153efde4"><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-ee65c24603797e26c97b9aac0f366a6e" 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-ee65c24603797e26c97b9aac0f366a6e"><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">
 
@@ -154,8 +155,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/index.html b/index.html
index 4a37cc86ad..0286637d6a 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="./css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="./css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1694640597" rel="stylesheet">
-    <link href="./css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="./css/variant.css?1694640597" rel="stylesheet">
-    <link href="./css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="./css/ie.css?1694640597" rel="stylesheet">
-    <script src="./js/url.js?1694640597"></script>
-    <script src="./js/variant.js?1694640597"></script>
+    <link href="./css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="./css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="./css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1694730287" rel="stylesheet">
+    <link href="./css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="./css/variant.css?1694730287" rel="stylesheet">
+    <link href="./css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="./css/ie.css?1694730287" rel="stylesheet">
+    <script src="./js/url.js?1694730287"></script>
+    <script src="./js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="./index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#motivation">Motivation</a></li>
     <li><a href="#features">Features</a></li>
@@ -79,37 +78,38 @@
     <li><a href="#credits">Credits</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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 class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="./index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </span>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="./basics/index.html" title="Basics (🡒)">
+              <a class="topbar-button-control" href="./basics/index.html" title="Basics (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable home" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="home">
@@ -119,8 +119,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-8fbb0a6f33c84bb67633d80a95be4b12" 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-8fbb0a6f33c84bb67633d80a95be4b12"><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-0d3d23b636940fb6546edc2583da3371" 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-0d3d23b636940fb6546edc2583da3371"><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>
@@ -293,12 +293,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="./js/auto-complete.js?1694640597" defer></script>
-        <script src="./js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="./js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="./js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="./js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="./js/search.js?1694640597" defer></script>
+        <script src="./js/auto-complete.js?1694730287" defer></script>
+        <script src="./js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="./js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="./js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="./js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="./js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -454,13 +454,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="./js/github-buttons.js?1694640597"></script>
+          <script async src="./js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="./js/clipboard.min.js?1694640597" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="./js/theme.js?1694640597" defer></script>
+    <script src="./js/clipboard.min.js?1694730287" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="./js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/index.print.html b/index.print.html
index 7e738c3aea..4edddb7268 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="./css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="./css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1694640598" rel="stylesheet">
-    <link href="./css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="./css/variant.css?1694640598" rel="stylesheet">
-    <link href="./css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="./css/format-print.css?1694640598" rel="stylesheet">
-    <link href="./css/ie.css?1694640598" rel="stylesheet">
-    <script src="./js/url.js?1694640598"></script>
-    <script src="./js/variant.js?1694640598"></script>
+    <link href="./css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="./css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="./css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1694730288" rel="stylesheet">
+    <link href="./css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="./css/variant.css?1694730288" rel="stylesheet">
+    <link href="./css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="./css/format-print.css?1694730288" rel="stylesheet">
+    <link href="./css/ie.css?1694730288" rel="stylesheet">
+    <script src="./js/url.js?1694730288"></script>
+    <script src="./js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="./index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -71,6 +71,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable home" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="home">
@@ -80,8 +81,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-8fbb0a6f33c84bb67633d80a95be4b12" 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-8fbb0a6f33c84bb67633d80a95be4b12"><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-0d3d23b636940fb6546edc2583da3371" 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-0d3d23b636940fb6546edc2583da3371"><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>
@@ -939,8 +940,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-25a0be68d604851fd59780db994732b2" 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-25a0be68d604851fd59780db994732b2"><img src="./basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-0dbcb5cd9c2a82afe3ebd8a8abea1946" 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-0dbcb5cd9c2a82afe3ebd8a8abea1946"><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>
@@ -983,8 +984,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-b9af266ca04f489101ae80cf6ecbaf4b" 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-b9af266ca04f489101ae80cf6ecbaf4b"><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-f0ec9ddf73e2fe14190579f4ecf085d4" 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-f0ec9ddf73e2fe14190579f4ecf085d4"><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>
@@ -1138,8 +1139,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-c477776952eeec55ae6c58e242ea5b55" 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-c477776952eeec55ae6c58e242ea5b55"><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-045fca269eb1bb8386a09c23d29d7f6c" 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-045fca269eb1bb8386a09c23d29d7f6c"><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>
@@ -1184,8 +1185,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-954519fdb381ed92e775fabe377deaa5" 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-954519fdb381ed92e775fabe377deaa5"><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-5f6746de22dfd3a86aa718845b87336d" 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-5f6746de22dfd3a86aa718845b87336d"><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">
 
@@ -1306,13 +1307,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-adf1950d789d087cf02746421e452f5a" aria-controls="expandcontent-adf1950d789d087cf02746421e452f5a" >
-    <label class="expand-label" for="expand-adf1950d789d087cf02746421e452f5a" >
+    <input type="checkbox" id="expand-d02144f40dfd226beb894d16cdc8428f" aria-controls="expandcontent-d02144f40dfd226beb894d16cdc8428f" >
+    <label class="expand-label" for="expand-d02144f40dfd226beb894d16cdc8428f" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="expandcontent-adf1950d789d087cf02746421e452f5a" class="expand-content">
+    <div id="expandcontent-d02144f40dfd226beb894d16cdc8428f" 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>
@@ -2686,8 +2687,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-15dcefc5bfa14fcf22c1132a48f584fc" 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-15dcefc5bfa14fcf22c1132a48f584fc"><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-4b3168155e96d15952dd376027f2126a" 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-4b3168155e96d15952dd376027f2126a"><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>
@@ -2730,8 +2731,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-a124cd7023529462a22f79a5586533fa" 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-a124cd7023529462a22f79a5586533fa"><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-1c23510109f85bfcfb4c8088df635a42" 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-1c23510109f85bfcfb4c8088df635a42"><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">+++
@@ -2741,8 +2742,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-83b647dab286e74734903bd68e1529aa" 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-83b647dab286e74734903bd68e1529aa"><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-44db36c1320b9648c6fb3bec12ddb6c3" 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-44db36c1320b9648c6fb3bec12ddb6c3"><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">+++
@@ -2754,8 +2755,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-28349303b178e27d73021c4f99a54a4d" 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-28349303b178e27d73021c4f99a54a4d"><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-2c44408147e63ee94567b72363cc37db" 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-2c44408147e63ee94567b72363cc37db"><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>
@@ -3326,8 +3327,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-24fe53473defdde3bbf63b1db604cd8c" 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-24fe53473defdde3bbf63b1db604cd8c"><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-b66f0d1880554ac44b54b6c26a033b7f" 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-b66f0d1880554ac44b54b6c26a033b7f"><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>
@@ -3337,8 +3338,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-4311573b9fb8ac86dd807ee3e12bc8fe" 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-4311573b9fb8ac86dd807ee3e12bc8fe"><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-5addfa4b62cf4764e3ad80e28f8ab719" 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-5addfa4b62cf4764e3ad80e28f8ab719"><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>
@@ -3350,8 +3351,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-dee7bd045397b966dd689b3e5c8f5639" 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-dee7bd045397b966dd689b3e5c8f5639"><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-cce934dca86b360cd1c6c9b765c8af03" 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-cce934dca86b360cd1c6c9b765c8af03"><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>
@@ -3363,8 +3364,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-edbdbf731b3b3151f10fa21f7ce1d188" 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-edbdbf731b3b3151f10fa21f7ce1d188"><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-3ddd23dfcac9d29f6b2ebef3900bf01a" 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-3ddd23dfcac9d29f6b2ebef3900bf01a"><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>
@@ -3372,8 +3373,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-26b5f529bcb800192e9792f29d211e61" 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-26b5f529bcb800192e9792f29d211e61"><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-d7a1b8f8a4055d55be413539213ff25a" 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-d7a1b8f8a4055d55be413539213ff25a"><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>
@@ -3381,8 +3382,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-a141a4ea1216923df5d9f494b0511cf4" 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-a141a4ea1216923df5d9f494b0511cf4"><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-ac8c384e5afd8f74f37c48f1066c64e9" 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-ac8c384e5afd8f74f37c48f1066c64e9"><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>
@@ -3393,8 +3394,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-631cb039a6a33e7938519299f3ad8f0a" 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-631cb039a6a33e7938519299f3ad8f0a"><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-8229727f93622c4d7884982a06671860" 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-8229727f93622c4d7884982a06671860"><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>
@@ -3403,8 +3404,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-7a8a638dfdb08617ef91fc722bf5fdbb" 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-7a8a638dfdb08617ef91fc722bf5fdbb"><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-0ec51547af7ccbeb46827319eb656cc2" 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-0ec51547af7ccbeb46827319eb656cc2"><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>
@@ -3413,8 +3414,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-8df89adb76b91daeeecb2d0191d3e491" 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-8df89adb76b91daeeecb2d0191d3e491"><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-ad3e887befc3f24978fcc04a1b52bbad" 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-ad3e887befc3f24978fcc04a1b52bbad"><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>
@@ -3423,8 +3424,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-19e4d74b9f31d7733fd880feda8e1651" 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-19e4d74b9f31d7733fd880feda8e1651"><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-8c7addc991f235b64e95cee02c22f74f" 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-8c7addc991f235b64e95cee02c22f74f"><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>
@@ -3436,14 +3437,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-08c553456896b870b6632a02d259f27e" 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-08c553456896b870b6632a02d259f27e"><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-f035942f6b22e64dde1bb22850d1d3cf" 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-f035942f6b22e64dde1bb22850d1d3cf"><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-a17db850ec4dcbf9d4dc8b6a3169593f" 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-a17db850ec4dcbf9d4dc8b6a3169593f"><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-1d3fd0c74d33083c37504d1261779f12" 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-1d3fd0c74d33083c37504d1261779f12"><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-adfd2faf2ae752d222e5bfa8f62494ac" 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-adfd2faf2ae752d222e5bfa8f62494ac"><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-767fd53347d3389333611c6b670da058" 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-767fd53347d3389333611c6b670da058"><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-931cc9fb5857bb79fb19c08f1ebf82f4" 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-931cc9fb5857bb79fb19c08f1ebf82f4"><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-504e9fb99e8535584cb22a540666144a" 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-504e9fb99e8535584cb22a540666144a"><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>
@@ -3452,8 +3453,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-4322c39745881733f2d1d0244bf3eccf" 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-4322c39745881733f2d1d0244bf3eccf"><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-85027e905c9c557abed6cac81f24e3ad" 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-85027e905c9c557abed6cac81f24e3ad"><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>
@@ -3493,13 +3494,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="705ff8406b18693241f688e90b399120">
+<div class="tab-panel" data-tab-group="a08c8db08960f0ffd65ed53e8b2a6edf">
   <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('705ff8406b18693241f688e90b399120','configtoml')"
+      onclick="switchTab('a08c8db08960f0ffd65ed53e8b2a6edf','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -3523,13 +3524,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="6e75f060ee3d25b028c0c192186f26fe">
+<div class="tab-panel" data-tab-group="f67e5cda8346efac0e1e2aa39286ea97">
   <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('6e75f060ee3d25b028c0c192186f26fe','frontmatter')"
+      onclick="switchTab('f67e5cda8346efac0e1e2aa39286ea97','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -3552,13 +3553,13 @@ line 3 of code
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="112879dcdcef60ca1c110f7ab3e4bb23">
+<div class="tab-panel" data-tab-group="f462f72deb6219a6c7ad489b7aa6c52e">
   <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('112879dcdcef60ca1c110f7ab3e4bb23','url')"
+      onclick="switchTab('f462f72deb6219a6c7ad489b7aa6c52e','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -3578,13 +3579,13 @@ line 3 of code
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="0be858934eb5a7eb62f4fa802eb7fd95">
+<div class="tab-panel" data-tab-group="17b621c850b2fd5d0cf07d41da2ff772">
   <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('0be858934eb5a7eb62f4fa802eb7fd95','result')"
+      onclick="switchTab('17b621c850b2fd5d0cf07d41da2ff772','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -3607,13 +3608,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="7605f0a4b4d91454499548abb26e2d26">
+<div class="tab-panel" data-tab-group="98ceb028a4c8cd3cba946bff2fa33ab5">
   <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('7605f0a4b4d91454499548abb26e2d26','html')"
+      onclick="switchTab('98ceb028a4c8cd3cba946bff2fa33ab5','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -3790,8 +3791,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-fb768b65aff9072b15ab6b1f11c51c85" 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-fb768b65aff9072b15ab6b1f11c51c85"><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-c9499f182883cf1165643b848fc4ae66" 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-c9499f182883cf1165643b848fc4ae66"><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>
@@ -5182,13 +5183,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-f6bffa990b5f662b81666956f038bc62" aria-controls="expandcontent-f6bffa990b5f662b81666956f038bc62" >
-    <label class="expand-label" for="expand-f6bffa990b5f662b81666956f038bc62" >
+    <input type="checkbox" id="expand-c5689618843cb628b01b81fa970b12e1" aria-controls="expandcontent-c5689618843cb628b01b81fa970b12e1" >
+    <label class="expand-label" for="expand-c5689618843cb628b01b81fa970b12e1" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-f6bffa990b5f662b81666956f038bc62" class="expand-content">
+    <div id="expandcontent-c5689618843cb628b01b81fa970b12e1" 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>
@@ -5315,26 +5316,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-1d3324bd122ec6f8856e8a7c0926c733" aria-controls="expandcontent-1d3324bd122ec6f8856e8a7c0926c733" >
-    <label class="expand-label" for="expand-1d3324bd122ec6f8856e8a7c0926c733" >
+    <input type="checkbox" id="expand-78d7883c5f33fa93b76ca61fbb1cb8d7" aria-controls="expandcontent-78d7883c5f33fa93b76ca61fbb1cb8d7" >
+    <label class="expand-label" for="expand-78d7883c5f33fa93b76ca61fbb1cb8d7" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-1d3324bd122ec6f8856e8a7c0926c733" class="expand-content">
+    <div id="expandcontent-78d7883c5f33fa93b76ca61fbb1cb8d7" 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-db0091ed449f7647e85d416149643e45" aria-controls="expandcontent-db0091ed449f7647e85d416149643e45"  checked>
-    <label class="expand-label" for="expand-db0091ed449f7647e85d416149643e45" >
+    <input type="checkbox" id="expand-598c2e1506106d6435950cd450116fa0" aria-controls="expandcontent-598c2e1506106d6435950cd450116fa0"  checked>
+    <label class="expand-label" for="expand-598c2e1506106d6435950cd450116fa0" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-db0091ed449f7647e85d416149643e45" class="expand-content">
+    <div id="expandcontent-598c2e1506106d6435950cd450116fa0" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -5355,13 +5356,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-6e970d2df6a22a451bb12a69015d0750" aria-controls="expandcontent-6e970d2df6a22a451bb12a69015d0750" >
-    <label class="expand-label" for="expand-6e970d2df6a22a451bb12a69015d0750" >
+    <input type="checkbox" id="expand-c9c6684934bc3fd21cbb985428aece0c" aria-controls="expandcontent-c9c6684934bc3fd21cbb985428aece0c" >
+    <label class="expand-label" for="expand-c9c6684934bc3fd21cbb985428aece0c" >
         <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-6e970d2df6a22a451bb12a69015d0750" class="expand-content">
+    <div id="expandcontent-c9c6684934bc3fd21cbb985428aece0c" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -5390,13 +5391,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="9e2b003661d55d87789205809dc964e2">
+<div class="tab-panel" data-tab-group="1d506c5beeb6c29d6fb141ddc0af590c">
   <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('9e2b003661d55d87789205809dc964e2','python')"
+      onclick="switchTab('1d506c5beeb6c29d6fb141ddc0af590c','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -5619,13 +5620,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="76b381033f5bfc995fd7caefa0101e54">
+<div class="tab-panel" data-tab-group="b5db274b43b2d29422722614a7619b6d">
   <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('76b381033f5bfc995fd7caefa0101e54','python')"
+      onclick="switchTab('b5db274b43b2d29422722614a7619b6d','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -7164,7 +7165,7 @@ Electricity grid,H2 conversion,27.14
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-f27f5a5e506e09f0546a87d07b912a3b"
+    id="openapi-b43be8d1607e3f2378085b8c1655981b"
     openapi-url="./shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -7270,13 +7271,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="a5bd706429354cd7155f5990426cfdf4">
+<div class="tab-panel" data-tab-group="8bd762e59fc52cc6161b3c10f0940604">
   <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('a5bd706429354cd7155f5990426cfdf4','configtoml')"
+      onclick="switchTab('8bd762e59fc52cc6161b3c10f0940604','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -7312,13 +7313,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="611ba43b0b30fb2dc39efcbc34644d44">
+<div class="tab-panel" data-tab-group="04656f81b71f69aa3737f6815ac13441">
   <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('611ba43b0b30fb2dc39efcbc34644d44','c')"
+      onclick="switchTab('04656f81b71f69aa3737f6815ac13441','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -7432,13 +7433,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="d1ff53cdacba79275e0432098b7999fd">
+<div class="tab-panel" data-tab-group="060097580947647614e35c5ce3f5eb84">
   <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('d1ff53cdacba79275e0432098b7999fd','code')"
+      onclick="switchTab('060097580947647614e35c5ce3f5eb84','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -7463,13 +7464,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="0ee1dba1f80758788a3af78cb92b7652">
+<div class="tab-panel" data-tab-group="48683353b371c6984b1948e463268720">
   <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('0ee1dba1f80758788a3af78cb92b7652','emstrongmixedstrongem')"
+      onclick="switchTab('48683353b371c6984b1948e463268720','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -7517,13 +7518,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="c1971fdd980f3c0e217d8095af158276">
+<div class="tab-panel" data-tab-group="00f7fcf9208967bd554b97b55692a10b">
   <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('c1971fdd980f3c0e217d8095af158276','just-colored-style')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -7533,7 +7534,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('c1971fdd980f3c0e217d8095af158276','just-color')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -7543,7 +7544,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('c1971fdd980f3c0e217d8095af158276','default-style-and-color')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style and color</div>
@@ -7553,7 +7554,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('c1971fdd980f3c0e217d8095af158276','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','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>
@@ -7563,7 +7564,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('c1971fdd980f3c0e217d8095af158276','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','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>
@@ -7634,13 +7635,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="eec3394586535d7b4838457dba843111">
+<div class="tab-panel" data-tab-group="1abdd2f9dac73fc457dba595f1f9402d">
   <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('eec3394586535d7b4838457dba843111','py')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -7650,7 +7651,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('eec3394586535d7b4838457dba843111','sh')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -7660,7 +7661,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('eec3394586535d7b4838457dba843111','c')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -7817,13 +7818,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="c518499c51f782d1fdabfe77290e0834">
+<div class="tab-panel" data-tab-group="1d54df018720cba6919882a6f49a342b">
   <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('c518499c51f782d1fdabfe77290e0834','group-a-tab-view-1')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -7833,7 +7834,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('c518499c51f782d1fdabfe77290e0834','group-a-tab-view-2')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -7843,7 +7844,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('c518499c51f782d1fdabfe77290e0834','group-b')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -8243,8 +8244,8 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="./js/clipboard.min.js?1694640598" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1694640598" defer></script>
+    <script src="./js/clipboard.min.js?1694730288" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1694730288" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -8273,27 +8274,27 @@ Electricity grid,H2 conversion,27.14
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="./js/mathjax/tex-mml-chtml.js?1694640598"></script>
-    <script src="./js/d3/d3-color.min.js?1694640598" defer></script>
-    <script src="./js/d3/d3-dispatch.min.js?1694640598" defer></script>
-    <script src="./js/d3/d3-drag.min.js?1694640598" defer></script>
-    <script src="./js/d3/d3-ease.min.js?1694640598" defer></script>
-    <script src="./js/d3/d3-interpolate.min.js?1694640598" defer></script>
-    <script src="./js/d3/d3-selection.min.js?1694640598" defer></script>
-    <script src="./js/d3/d3-timer.min.js?1694640598" defer></script>
-    <script src="./js/d3/d3-transition.min.js?1694640598" defer></script>
-    <script src="./js/d3/d3-zoom.min.js?1694640598" defer></script>
-    <script src="./js/js-yaml.min.js?1694640598" defer></script>
-    <script src="./js/mermaid.min.js?1694640598" defer></script>
+    <script id="MathJax-script" async src="./js/mathjax/tex-mml-chtml.js?1694730288"></script>
+    <script src="./js/d3/d3-color.min.js?1694730288" defer></script>
+    <script src="./js/d3/d3-dispatch.min.js?1694730288" defer></script>
+    <script src="./js/d3/d3-drag.min.js?1694730288" defer></script>
+    <script src="./js/d3/d3-ease.min.js?1694730288" defer></script>
+    <script src="./js/d3/d3-interpolate.min.js?1694730288" defer></script>
+    <script src="./js/d3/d3-selection.min.js?1694730288" defer></script>
+    <script src="./js/d3/d3-timer.min.js?1694730288" defer></script>
+    <script src="./js/d3/d3-transition.min.js?1694730288" defer></script>
+    <script src="./js/d3/d3-zoom.min.js?1694730288" defer></script>
+    <script src="./js/js-yaml.min.js?1694730288" defer></script>
+    <script src="./js/mermaid.min.js?1694730288" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="./js/swagger-ui/swagger-ui-bundle.js?1694640598" defer></script>
-    <script src="./js/swagger-ui/swagger-ui-standalone-preset.js?1694640598" defer></script>
+    <script src="./js/swagger-ui/swagger-ui-bundle.js?1694730288" defer></script>
+    <script src="./js/swagger-ui/swagger-ui-standalone-preset.js?1694730288" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694640598", assetsBuster:  1694640598  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694730288", assetsBuster:  1694730288  };
     </script>
-    <script src="./js/theme.js?1694640598" defer></script>
+    <script src="./js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/js/theme.js b/js/theme.js
index 2fd1bf274d..c1cbbfa99d 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -34,7 +34,7 @@ var formelements = 'button, datalist, fieldset, input, label, legend, meter, opt
 // PerfectScrollbar
 var psc;
 var psm;
-var pst;
+var pst = new Map();
 var elc = document.querySelector('#body-inner');
 
 function regexEscape( s ){
@@ -709,7 +709,7 @@ function initMenuScrollbar(){
     }
 
     var elm = document.querySelector('#content-wrapper');
-    var elt = document.querySelector('#TableOfContents');
+    var elt = document.querySelector('.topbar-button.topbar-flyout .topbar-button-flyout-wrapper');
 
     var autofocus = true;
     document.addEventListener('keydown', function(event){
@@ -737,10 +737,11 @@ function initMenuScrollbar(){
             // if we are showing the sidebar as a flyout we
             // want to scroll the content-wrapper, otherwise we want
             // to scroll the body
-            var nt = document.querySelector('body').matches('.toc-flyout');
+            var nt = document.querySelector('body').matches('.topbar-flyout');
             var nm = document.querySelector('body').matches('.sidebar-flyout');
             if( nt ){
-                pst && pst.scrollbarY.focus();
+                var psb = pst.get( document.querySelector('.topbar-button.topbar-flyout') );
+                psb && psb.scrollbarY.focus();
             }
             else if( nm ){
                 psm && psm.scrollbarY.focus();
@@ -756,7 +757,15 @@ function initMenuScrollbar(){
     // PSC removed for #242 #243 #244
     // psc = elc && new PerfectScrollbar('#body-inner');
     psm = elm && new PerfectScrollbar('#content-wrapper');
-    pst = elt && new PerfectScrollbar('#TableOfContents');
+    document.querySelectorAll('.topbar-button .topbar-button-flyout-wrapper').forEach( function( e ){
+        var button = getTopbarButtonParent( e );
+        if( !button ){
+            return;
+        }
+        pst.set( button, new PerfectScrollbar( e ) );
+        e.addEventListener( 'click', toggleTopbarFlyoutEvent );
+    });
+
     document.addEventListener('keydown', function(){
         // if we facked initial scrolling, we want to
         // remove the focus to not leave visual markers on
@@ -764,14 +773,18 @@ function initMenuScrollbar(){
         if( autofocus ){
             psc && psc.scrollbarY.blur();
             psm && psm.scrollbarY.blur();
-            pst && pst.scrollbarY.blur();
+            pst.forEach( function( psb ){
+                psb.scrollbarY.blur();
+            });
             autofocus = false;
         }
     });
     // on resize, we have to redraw the scrollbars to let new height
     // affect their size
     window.addEventListener('resize', function(){
-        pst && setTimeout( function(){ pst.update(); }, 10 );
+        pst.forEach( function( psb ){
+            setTimeout( function(){ psb.update(); }, 10 );
+        });
         psm && setTimeout( function(){ psm.update(); }, 10 );
         psc && setTimeout( function(){ psc.update(); }, 10 );
     });
@@ -784,7 +797,9 @@ function initMenuScrollbar(){
     });
     // bugfix for PS in RTL mode: the initial scrollbar position is off;
     // calling update() once, fixes this
-    pst && setTimeout( function(){ pst.update(); }, 10 );
+    pst.forEach( function( psb ){
+        setTimeout( function(){ psb.update(); }, 10 );
+    });
     psm && setTimeout( function(){ psm.update(); }, 10 );
     psc && setTimeout( function(){ psc.update(); }, 10 );
 
@@ -800,27 +815,9 @@ function imageEscapeHandler( event ){
     }
 }
 
-function sidebarEscapeHandler( event ){
-    if( event.key == "Escape" ){
-        var b = document.querySelector( 'body' );
-        b.classList.remove( 'sidebar-flyout' );
-        document.removeEventListener( 'keydown', sidebarEscapeHandler );
-        documentFocus();
-    }
-}
-
-function tocEscapeHandler( event ){
-    if( event.key == "Escape" ){
-        var b = document.querySelector( 'body' );
-        b.classList.remove( 'toc-flyout' );
-        document.removeEventListener( 'keydown', tocEscapeHandler );
-        documentFocus();
-    }
-}
-
-function sidebarShortcutHandler( event ){
+function navShortcutHandler( event ){
     if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 78 /* n */ ){
-        showNav();
+        toggleNav();
     }
 }
 
@@ -832,7 +829,7 @@ function searchShortcutHandler( event ){
 
 function tocShortcutHandler( event ){
     if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 84 /* t */ ){
-        showToc();
+        toggleToc();
     }
 }
 
@@ -856,55 +853,127 @@ function showSearch(){
     var b = document.querySelector( 'body' );
     if( s == document.activeElement ){
         if( b.classList.contains( 'sidebar-flyout' ) ){
-            showNav();
+            closeNav();
         }
         documentFocus();
     } else {
         if( !b.classList.contains( 'sidebar-flyout' ) ){
-            showNav();
+            openNav();
         }
         s.focus();
     }
 }
 
-function showNav(){
-    if( !document.querySelector( '#sidebar-overlay' ) ){
-        // we may not have a flyout
-        return;
-    }
+function openNav(){
+    closeSomeTopbarButtonFlyout();
     var b = document.querySelector( 'body' );
-    b.classList.toggle( 'sidebar-flyout' );
-    if( b.classList.contains( 'sidebar-flyout' ) ){
-        b.classList.remove( 'toc-flyout' );
-        document.removeEventListener( 'keydown', tocEscapeHandler );
-        document.addEventListener( 'keydown', sidebarEscapeHandler );
-    }
-    else{
-        document.removeEventListener( 'keydown', sidebarEscapeHandler );
-        documentFocus();
+    b.classList.add( 'sidebar-flyout' );
+    psm && setTimeout( function(){ psm.update(); }, 10 );
+    psm && psm.scrollbarY.focus();
+    var a = document.querySelector( '#sidebar a' )
+    if( a ){
+        a.focus();
     }
 }
 
-function showToc(){
-    var t = document.querySelector( '.topbar-toc' );
-    if( !t ){
-        // we may not have a toc
-        return;
-    }
+function closeNav(){
     var b = document.querySelector( 'body' );
-    b.classList.toggle( 'toc-flyout' );
-    if( b.classList.contains( 'toc-flyout' ) ){
-        pst && setTimeout( function(){ pst.update(); }, 10 );
-        pst && pst.scrollbarY.focus();
-        document.querySelector( '.toc-wrapper ul a' ).focus();
-        document.addEventListener( 'keydown', tocEscapeHandler );
+    b.classList.remove( 'sidebar-flyout' );
+    documentFocus();
+}
+
+function toggleNav(){
+    var b = document.querySelector( 'body' );
+    if( b.classList.contains( 'sidebar-flyout' ) ){
+        closeNav();
     }
     else{
-        document.removeEventListener( 'keydown', tocEscapeHandler );
-        documentFocus();
+        openNav();
     }
 }
 
+function navEscapeHandler( event ){
+    if( event.key == "Escape" ){
+        closeNav();
+    }
+}
+
+function getTopbarButtonParent( e ){
+    var button = e;
+    while( button && !button.classList.contains( 'topbar-button' ) ){
+        button = button.parentElement;
+    }
+    return button;
+}
+
+function openTopbarButtonFlyout( button ){
+    closeNav();
+    var body = document.querySelector( 'body' );
+    button.classList.add( 'topbar-flyout' );
+    body.classList.add( 'topbar-flyout' );
+    var psb = pst.get( button );
+    psb && setTimeout( function(){ psb.update(); }, 10 );
+    psb && psb.scrollbarY.focus();
+    var a = button.querySelector( '.topbar-button-flyout-wrapper a' );
+    if( a ){
+        a.focus();
+    }
+}
+
+function closeTopbarButtonFlyout( button ){
+    var body = document.querySelector( 'body' );
+    button.classList.remove( 'topbar-flyout' );
+    body.classList.remove( 'topbar-flyout' );
+    documentFocus();
+}
+
+function closeSomeTopbarButtonFlyout(){
+    var someButton = document.querySelector( '.topbar-button.topbar-flyout' );
+    if( someButton ){
+        closeTopbarButtonFlyout( someButton );
+    };
+    return someButton
+}
+
+function toggleTopbarButtonFlyout( button ){
+    var someButton = closeSomeTopbarButtonFlyout();
+    if( button && button != someButton ){
+        openTopbarButtonFlyout( button );
+    }
+}
+
+function toggleTopbarFlyout( e ){
+    var button = getTopbarButtonParent( e );
+    if( !button ){
+        return;
+    }
+    toggleTopbarButtonFlyout( button );
+}
+
+function toggleTopbarFlyoutEvent( event ){
+    if( event.target.classList.contains( 'topbar-button-flyout' )
+        || event.target.classList.contains( 'topbar-button-flyout-wrapper' )
+        || event.target.classList.contains( 'ps__rail-x' )
+        || event.target.classList.contains( 'ps__rail-y' )
+        || event.target.classList.contains( 'ps__thumb-x' )
+        || event.target.classList.contains( 'ps__thumb-y' )
+        ){
+        // the scrollbar was used, don't close flyout
+        return;
+    }
+    toggleTopbarFlyout( event.target )
+}
+
+function topbarFlyoutEscapeHandler( event ){
+    if( event.key == "Escape" ){
+        closeSomeTopbarButtonFlyout();
+    }
+}
+
+function toggleToc(){
+    toggleTopbarButtonFlyout( document.querySelector( '.topbar-toc' ) );
+}
+
 function showEdit(){
     var l = document.querySelector( '.topbar-edit a' );
     if( l ){
@@ -935,21 +1004,20 @@ function initToc(){
     }
 
     document.addEventListener( 'keydown', editShortcutHandler );
+    document.addEventListener( 'keydown', navShortcutHandler );
     document.addEventListener( 'keydown', printShortcutHandler );
-    document.addEventListener( 'keydown', sidebarShortcutHandler );
     document.addEventListener( 'keydown', searchShortcutHandler );
     document.addEventListener( 'keydown', tocShortcutHandler );
+    document.addEventListener( 'keydown', navEscapeHandler );
+    document.addEventListener( 'keydown', topbarFlyoutEscapeHandler );
 
-    var s = document.querySelector( '#sidebar-overlay' );
-    if( s ){
-        s.addEventListener( 'click', showNav );
+    var b = document.querySelector( '#body-overlay' );
+    if( b ){
+        b.addEventListener( 'click', closeNav );
     }
-    var o = document.querySelector( '#toc-overlay' );
-    var p = document.querySelector( '.progress' );
-    if( o && p ){
-        // we may not have a toc
-        o.addEventListener( 'click', showToc );
-        p.addEventListener( 'click', showToc );
+    var m = document.querySelector( '#main-overlay' );
+    if( m ){
+        m.addEventListener( 'click', closeSomeTopbarButtonFlyout );
     }
 
     // finally give initial focus to allow keyboard scrolling in FF
@@ -980,10 +1048,7 @@ function initSwipeHandler(){
             else if( diffx > 30 ){
                 startx = null;
                 starty = null;
-                var b = document.querySelector( 'body' );
-                b.classList.remove( 'sidebar-flyout' );
-                document.removeEventListener( 'keydown', sidebarEscapeHandler );
-                documentFocus();
+                closeNav();
             }
         }
         return false;
@@ -994,7 +1059,7 @@ function initSwipeHandler(){
         return false;
     };
 
-    var s = document.querySelector( '#sidebar-overlay' );
+    var s = document.querySelector( '#body-overlay' );
     s && s.addEventListener("touchstart", handleStartX, false);
     document.querySelector( '#sidebar' ).addEventListener("touchstart", handleStartX, false);
     document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchstart", handleStartX); }, false);
diff --git a/more/credits/index.html b/more/credits/index.html
index 2f272f3f6d..a31c06f243 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../more/credits/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#contributors">Contributors</a></li>
     <li><a href="#theme-dependencies">Theme Dependencies</a></li>
@@ -77,9 +76,9 @@
     <li><a href="#tooling-dependencies">Tooling Dependencies</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,28 +86,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../more/credits/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -258,12 +258,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -419,13 +419,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/more/credits/index.print.html b/more/credits/index.print.html
index 3c3ed2f579..27bde8cbfd 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../more/credits/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -143,8 +144,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/pir/404.html b/pir/404.html
index 08edb988eb..bb0141a82c 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../js/url.js?1694640598"></script>
-    <script src="../js/variant.js?1694640598"></script>
+    <link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../js/url.js?1694730288"></script>
+    <script src="../js/variant.js?1694730288"></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 8e5abcbaf6..8fc77a1dbd 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/basics/configuration/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#global-site-parameters">Global ship parameters</a></li>
     <li><a href="#serving-your-page-from-a-subfolder">Serv'n yer plank from a subfolder</a></li>
@@ -93,9 +92,9 @@
     <li><a href="#home-button-configuration">Home Button Configurat'n</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -104,28 +103,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/basics/configuration/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/basics/installation/index.html" title="Installat&#39;n (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/basics/customization/index.html" title="Customizat&#39;n (🡐)">
+              <a class="topbar-button-control" href="../../../pir/basics/customization/index.html" title="Customizat&#39;n (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -249,8 +249,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-366e3951c215d381a8840cb4ed7cf78e" 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-366e3951c215d381a8840cb4ed7cf78e"><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-ce32dac0565b63f402cde3bef1558e66" 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-ce32dac0565b63f402cde3bef1558e66"><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>
@@ -295,8 +295,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-28ce80d6578349c6db81424247a3045c" 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-28ce80d6578349c6db81424247a3045c"><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-fda7b2f8f2c18ffa274c9ab9e31a2181" 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-fda7b2f8f2c18ffa274c9ab9e31a2181"><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">
@@ -385,12 +385,12 @@ default values:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../../../js/search.js?1694640600" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -546,13 +546,13 @@ default values:</p>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640600"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../../../js/theme.js?1694640600" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/basics/configuration/index.print.html b/pir/basics/configuration/index.print.html
index 0272fe3f93..7f31a3d09d 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/basics/configuration/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -196,8 +197,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-366e3951c215d381a8840cb4ed7cf78e" 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-366e3951c215d381a8840cb4ed7cf78e"><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-ce32dac0565b63f402cde3bef1558e66" 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-ce32dac0565b63f402cde3bef1558e66"><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>
@@ -242,8 +243,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-28ce80d6578349c6db81424247a3045c" 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-28ce80d6578349c6db81424247a3045c"><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-fda7b2f8f2c18ffa274c9ab9e31a2181" 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-fda7b2f8f2c18ffa274c9ab9e31a2181"><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">
@@ -254,8 +255,8 @@ default values:</p>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.html b/pir/basics/customization/index.html
index 7c87acb9c3..5709c08707 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/basics/customization/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#change-the-logo">Change th' logo</a></li>
     <li><a href="#change-the-favicon">Change th' favicon</a></li>
@@ -85,9 +84,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -96,28 +95,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/basics/customization/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/basics/configuration/index.html" title="Configurrrat&#39;n (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/basics/generator/index.html" title="Stylesheet generrrat&#39;r (🡐)">
+              <a class="topbar-button-control" href="../../../pir/basics/generator/index.html" title="Stylesheet generrrat&#39;r (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -309,12 +309,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?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../../../js/search.js?1694640600" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -470,13 +470,13 @@ If ye have requirements t' support IE and/or older browser versions, use one o'
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640600"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../../../js/theme.js?1694640600" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.print.html b/pir/basics/customization/index.print.html
index 9adafe84f4..db58c54865 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/basics/customization/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -186,8 +187,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?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/basics/generator/index.html b/pir/basics/generator/index.html
index 6272c9a1fb..42e1729735 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/basics/generator/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -70,28 +70,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/basics/generator/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/basics/customization/index.html" title="Customizat&#39;n (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/basics/history/index.html" title="Historrry (🡐)">
+              <a class="topbar-button-control" href="../../../pir/basics/history/index.html" title="Historrry (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -103,13 +104,13 @@
 <p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-36a175a16a1b6340e7ccf842d2e17c1c" aria-controls="expandcontent-36a175a16a1b6340e7ccf842d2e17c1c" >
-    <label class="expand-label" for="expand-36a175a16a1b6340e7ccf842d2e17c1c" >
+    <input type="checkbox" id="expand-ab70316b57d895a6b25c2cf2e658a339" aria-controls="expandcontent-ab70316b57d895a6b25c2cf2e658a339" >
+    <label class="expand-label" for="expand-ab70316b57d895a6b25c2cf2e658a339" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="expandcontent-36a175a16a1b6340e7ccf842d2e17c1c" class="expand-content">
+    <div id="expandcontent-ab70316b57d895a6b25c2cf2e658a339" 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>
@@ -242,12 +243,12 @@ window.variants && variants.generator( '#vargenerator' );
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../../../js/search.js?1694640600" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -403,27 +404,27 @@ window.variants && variants.generator( '#vargenerator' );
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640600"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1694640600" defer></script>
-    <script src="../../../js/js-yaml.min.js?1694640600" defer></script>
-    <script src="../../../js/mermaid.min.js?1694640600" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1694730289" defer></script>
+    <script src="../../../js/js-yaml.min.js?1694730289" defer></script>
+    <script src="../../../js/mermaid.min.js?1694730289" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1694640600" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/basics/generator/index.print.html b/pir/basics/generator/index.print.html
index 0a591f34c6..7392124efa 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/basics/generator/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -84,13 +85,13 @@
 <p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-36a175a16a1b6340e7ccf842d2e17c1c" aria-controls="expandcontent-36a175a16a1b6340e7ccf842d2e17c1c" >
-    <label class="expand-label" for="expand-36a175a16a1b6340e7ccf842d2e17c1c" >
+    <input type="checkbox" id="expand-ab70316b57d895a6b25c2cf2e658a339" aria-controls="expandcontent-ab70316b57d895a6b25c2cf2e658a339" >
+    <label class="expand-label" for="expand-ab70316b57d895a6b25c2cf2e658a339" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="expandcontent-36a175a16a1b6340e7ccf842d2e17c1c" class="expand-content">
+    <div id="expandcontent-ab70316b57d895a6b25c2cf2e658a339" 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>
@@ -145,22 +146,22 @@ window.variants && variants.generator( '#vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1694640602" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1694640602" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1694640602" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1694640602" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1694640602" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1694640602" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1694640602" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1694640602" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1694640602" defer></script>
-    <script src="../../../js/js-yaml.min.js?1694640602" defer></script>
-    <script src="../../../js/mermaid.min.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1694730290" defer></script>
+    <script src="../../../js/js-yaml.min.js?1694730290" defer></script>
+    <script src="../../../js/mermaid.min.js?1694730290" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.html b/pir/basics/history/index.html
index 9fc085bdba..7476f8c498 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/basics/history/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#5200-2023-08-26">5.20.0 (2023-08-26)</a>
       <ul>
@@ -740,9 +739,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -751,28 +750,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/basics/history/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/basics/generator/index.html" title="Stylesheet generrrat&#39;r (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/cont/index.html" title="Rambl&#39;n (🡐)">
+              <a class="topbar-button-control" href="../../../pir/cont/index.html" title="Rambl&#39;n (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -2086,12 +2086,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -2247,13 +2247,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.print.html b/pir/basics/history/index.print.html
index 1375ad9cde..448861c27d 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/basics/history/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -1308,8 +1309,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/basics/index.html b/pir/basics/index.html
index 1c4e76637d..c569f8d4cd 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../pir/basics/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,28 +69,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../pir/basics/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../pir/basics/migration/index.html" title="What&#39;s New (🡐)">
+              <a class="topbar-button-control" href="../../pir/basics/migration/index.html" title="What&#39;s New (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -189,12 +190,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640600" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../../js/search.js?1694640600" defer></script>
+        <script src="../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -350,13 +351,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640600"></script>
+          <script async src="../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../../js/theme.js?1694640600" defer></script>
+    <script src="../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/basics/index.print.html b/pir/basics/index.print.html
index 8249582abb..047a776dcf 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../js/url.js?1694640601"></script>
-    <script src="../../js/variant.js?1694640601"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../js/url.js?1694730290"></script>
+    <script src="../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../pir/basics/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -850,8 +851,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-2808a7ec99b93154d28ccf0079408bc4" 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-2808a7ec99b93154d28ccf0079408bc4"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-824b68e1074c99c8f9dc86945c46e62e" 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-824b68e1074c99c8f9dc86945c46e62e"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -896,8 +897,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-343826b9cb2af67f80642e07f9f41b6d" 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-343826b9cb2af67f80642e07f9f41b6d"><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-e0dd89e37a0d8e1acedbd3da34b31203" 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-e0dd89e37a0d8e1acedbd3da34b31203"><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>
@@ -1053,8 +1054,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-366e3951c215d381a8840cb4ed7cf78e" 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-366e3951c215d381a8840cb4ed7cf78e"><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-ce32dac0565b63f402cde3bef1558e66" 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-ce32dac0565b63f402cde3bef1558e66"><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>
@@ -1099,8 +1100,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-28ce80d6578349c6db81424247a3045c" 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-28ce80d6578349c6db81424247a3045c"><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-fda7b2f8f2c18ffa274c9ab9e31a2181" 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-fda7b2f8f2c18ffa274c9ab9e31a2181"><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">
@@ -1225,13 +1226,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-36a175a16a1b6340e7ccf842d2e17c1c" aria-controls="expandcontent-36a175a16a1b6340e7ccf842d2e17c1c" >
-    <label class="expand-label" for="expand-36a175a16a1b6340e7ccf842d2e17c1c" >
+    <input type="checkbox" id="expand-ab70316b57d895a6b25c2cf2e658a339" aria-controls="expandcontent-ab70316b57d895a6b25c2cf2e658a339" >
+    <label class="expand-label" for="expand-ab70316b57d895a6b25c2cf2e658a339" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="expandcontent-36a175a16a1b6340e7ccf842d2e17c1c" class="expand-content">
+    <div id="expandcontent-ab70316b57d895a6b25c2cf2e658a339" 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>
@@ -2517,22 +2518,22 @@ window.variants && variants.generator( '#vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1694640601" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694640601" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694640601" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694640601" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694640601" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694640601" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694640601" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694640601" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694640601" defer></script>
-    <script src="../../js/js-yaml.min.js?1694640601" defer></script>
-    <script src="../../js/mermaid.min.js?1694640601" defer></script>
+    <script src="../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1694730290" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694730290" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694730290" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694730290" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694730290" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694730290" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694730290" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694730290" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694730290" defer></script>
+    <script src="../../js/js-yaml.min.js?1694730290" defer></script>
+    <script src="../../js/mermaid.min.js?1694730290" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1694640601" defer></script>
+    <script src="../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.html b/pir/basics/installation/index.html
index a37ddfc6c2..fdd6e49253 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/basics/installation/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#create-your-project">Create yer project</a></li>
     <li><a href="#install-the-theme">Install th' theme</a>
@@ -84,9 +83,9 @@
     <li><a href="#build-the-website">Build th' website</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -95,28 +94,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/basics/installation/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/basics/requirements/index.html" title="Requirrrements (🡒)">
+              <a class="topbar-button-control" href="../../../pir/basics/requirements/index.html" title="Requirrrements (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/basics/configuration/index.html" title="Configurrrat&#39;n (🡐)">
+              <a class="topbar-button-control" href="../../../pir/basics/configuration/index.html" title="Configurrrat&#39;n (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -154,8 +154,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-343826b9cb2af67f80642e07f9f41b6d" 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-343826b9cb2af67f80642e07f9f41b6d"><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-e0dd89e37a0d8e1acedbd3da34b31203" 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-e0dd89e37a0d8e1acedbd3da34b31203"><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>
@@ -271,12 +271,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../../../js/search.js?1694640600" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -432,13 +432,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640600"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../../../js/theme.js?1694640600" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.print.html b/pir/basics/installation/index.print.html
index 019f406f94..c55c2fa194 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/basics/installation/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -110,8 +111,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-343826b9cb2af67f80642e07f9f41b6d" 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-343826b9cb2af67f80642e07f9f41b6d"><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-e0dd89e37a0d8e1acedbd3da34b31203" 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-e0dd89e37a0d8e1acedbd3da34b31203"><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>
@@ -149,8 +150,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.html b/pir/basics/migration/index.html
index 47c95c0950..916050c4d5 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/basics/migration/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#5210">5.21.0 (2023-09-03)</a></li>
     <li><a href="#5200">5.20.0 (2023-08-26)</a></li>
@@ -116,9 +115,9 @@
     <li><a href="#100">1.0.0 (2021-07-01)</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -127,28 +126,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/basics/migration/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/basics/index.html" title="Basics (🡒)">
+              <a class="topbar-button-control" href="../../../pir/basics/index.html" title="Basics (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/basics/requirements/index.html" title="Requirrrements (🡐)">
+              <a class="topbar-button-control" href="../../../pir/basics/requirements/index.html" title="Requirrrements (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -983,12 +983,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1144,13 +1144,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.print.html b/pir/basics/migration/index.print.html
index 079ef2df1a..bdee05ac80 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/basics/migration/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -829,8 +830,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.html b/pir/basics/requirements/index.html
index c72e5994d2..32f0cfe4f0 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/basics/requirements/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -70,28 +70,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/basics/requirements/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/basics/migration/index.html" title="What&#39;s New (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/basics/installation/index.html" title="Installat&#39;n (🡐)">
+              <a class="topbar-button-control" href="../../../pir/basics/installation/index.html" title="Installat&#39;n (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -102,8 +103,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-2808a7ec99b93154d28ccf0079408bc4" 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-2808a7ec99b93154d28ccf0079408bc4"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-824b68e1074c99c8f9dc86945c46e62e" 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-824b68e1074c99c8f9dc86945c46e62e"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -194,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -355,13 +356,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.print.html b/pir/basics/requirements/index.print.html
index 1b22b282cd..50bb372b9f 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/basics/requirements/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -83,8 +84,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-2808a7ec99b93154d28ccf0079408bc4" 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-2808a7ec99b93154d28ccf0079408bc4"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-824b68e1074c99c8f9dc86945c46e62e" 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-824b68e1074c99c8f9dc86945c46e62e"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -97,8 +98,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/categories/basic/index.html b/pir/categories/basic/index.html
index b91a1f523e..4e78e7ef2a 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/categories/basic/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/categories/content/index.html b/pir/categories/content/index.html
index e514607a69..ecd5433712 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/categories/content/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/categories/custom/index.html b/pir/categories/custom/index.html
index 779968bede..95e665a152 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/categories/custom/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/categories/index.html b/pir/categories/index.html
index f3b08026f0..6b9f9f5967 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,33 +51,32 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../pir/categories/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#b">B</a></li>
     <li><a href="#c">C</a></li>
     <li><a href="#t">T</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -85,18 +84,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -202,12 +202,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../js/search.js?1694640601" defer></script>
+        <script src="../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -363,13 +363,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../js/theme.js?1694640601" defer></script>
+    <script src="../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/categories/taxonomy/index.html b/pir/categories/taxonomy/index.html
index 631b4b1c81..d7f66152a4 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/categories/taxonomy/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/categories/theming/index.html b/pir/categories/theming/index.html
index 04fa840157..f1fded9b4c 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/categories/theming/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -176,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -337,13 +338,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.html b/pir/cont/archetypes/index.html
index b4b943a63d..681672d2db 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/cont/archetypes/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#predefined-archetypes">Predefined Archetypes</a>
       <ul>
@@ -86,9 +85,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -97,28 +96,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/cont/archetypes/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/cont/pages/index.html" title="planks orrrganizat&#39;n (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/cont/markdown/index.html" title="Marrrkdown rules (🡐)">
+              <a class="topbar-button-control" href="../../../pir/cont/markdown/index.html" title="Marrrkdown rules (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -132,8 +132,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-58185ccb2b98e9536def0d31e3480bea" 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-58185ccb2b98e9536def0d31e3480bea"><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-7ecab1a3d0fb5650530714434cd55009" 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-7ecab1a3d0fb5650530714434cd55009"><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">+++
@@ -143,8 +143,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-b3299a1e43f7fe0254800197cefcf56f" 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-b3299a1e43f7fe0254800197cefcf56f"><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-64e1d8e36cd000ec3886d704334abf66" 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-64e1d8e36cd000ec3886d704334abf66"><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">+++
@@ -156,8 +156,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-68a15d68dee666a5d0e16d2089e0afda" 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-68a15d68dee666a5d0e16d2089e0afda"><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-eed02e4a34e02ff3e4c3bbea93a88d8d" 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-eed02e4a34e02ff3e4c3bbea93a88d8d"><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>
@@ -288,12 +288,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -449,13 +449,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.print.html b/pir/cont/archetypes/index.print.html
index b8ec145a1e..5727dc7590 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/cont/archetypes/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -86,8 +87,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-58185ccb2b98e9536def0d31e3480bea" 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-58185ccb2b98e9536def0d31e3480bea"><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-7ecab1a3d0fb5650530714434cd55009" 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-7ecab1a3d0fb5650530714434cd55009"><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">+++
@@ -97,8 +98,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-b3299a1e43f7fe0254800197cefcf56f" 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-b3299a1e43f7fe0254800197cefcf56f"><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-64e1d8e36cd000ec3886d704334abf66" 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-64e1d8e36cd000ec3886d704334abf66"><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">+++
@@ -110,8 +111,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-68a15d68dee666a5d0e16d2089e0afda" 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-68a15d68dee666a5d0e16d2089e0afda"><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-eed02e4a34e02ff3e4c3bbea93a88d8d" 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-eed02e4a34e02ff3e4c3bbea93a88d8d"><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>
@@ -164,8 +165,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.html b/pir/cont/i18n/index.html
index 72daf92d9c..c14009ec47 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/cont/i18n/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#basic-configuration">Basic configurat'n</a></li>
     <li><a href="#search">Search</a>
@@ -81,9 +80,9 @@
     <li><a href="#disable-language-switching">Dis'ble language switch'n</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -92,28 +91,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/cont/i18n/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/cont/menushortcuts/index.html" title="Menu extrrra shorrrtcuts (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/cont/taxonomy/index.html" title="Taxonomy (🡐)">
+              <a class="topbar-button-control" href="../../../pir/cont/taxonomy/index.html" title="Taxonomy (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -129,8 +129,8 @@
 <li>Automatic menu generat'n from multilingual rrrambl'n</li>
 <li>In-browser language switch'n</li>
 </ul>
-<p><a href="#image-2216167028174ab1e6353994fa584efc" 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-2216167028174ab1e6353994fa584efc"><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-e962cd06b43053b7c5745620c112d123" 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-e962cd06b43053b7c5745620c112d123"><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>
@@ -309,12 +309,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?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -470,13 +470,13 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.print.html b/pir/cont/i18n/index.print.html
index 4db77a87d7..be1aec50a6 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/cont/i18n/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -88,8 +89,8 @@
 <li>Automatic menu generat'n from multilingual rrrambl'n</li>
 <li>In-browser language switch'n</li>
 </ul>
-<p><a href="#image-2216167028174ab1e6353994fa584efc" 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-2216167028174ab1e6353994fa584efc"><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-e962cd06b43053b7c5745620c112d123" 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-e962cd06b43053b7c5745620c112d123"><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>
@@ -190,8 +191,8 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/imageeffects/index.html b/pir/cont/imageeffects/index.html
index 007c1c983d..6530cd6bb9 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,31 +52,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/cont/imageeffects/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#extending">Extend'n</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -85,28 +84,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/cont/imageeffects/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/cont/markdown/index.html" title="Marrrkdown rules (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/cont/menushortcuts/index.html" title="Menu extrrra shorrrtcuts (🡐)">
+              <a class="topbar-button-control" href="../../../pir/cont/menushortcuts/index.html" title="Menu extrrra shorrrtcuts (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -122,13 +122,13 @@
 <p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
 
   
-<div class="tab-panel" data-tab-group="3924577bb24e6be0e3cbebab575f400f">
+<div class="tab-panel" data-tab-group="0060bc43cb107d51f3ecbfb647520d4d">
   <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('3924577bb24e6be0e3cbebab575f400f','configtoml')"
+      onclick="switchTab('0060bc43cb107d51f3ecbfb647520d4d','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -152,13 +152,13 @@
 </div><p>This can be overridden 'n a planks frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="4df1736cdf1931e2038021952c9dc734">
+<div class="tab-panel" data-tab-group="7c78e96c76ff300198d129a06a5de0ba">
   <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('4df1736cdf1931e2038021952c9dc734','frontmatter')"
+      onclick="switchTab('7c78e96c76ff300198d129a06a5de0ba','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -181,13 +181,13 @@
 </div><p>Or by explicitly override sett'ns by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="ac3cff4138b9fa218480951b75d31dbc">
+<div class="tab-panel" data-tab-group="595234bee90a64e34c309232d1e8e972">
   <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('ac3cff4138b9fa218480951b75d31dbc','url')"
+      onclick="switchTab('595234bee90a64e34c309232d1e8e972','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -207,13 +207,13 @@
 </div><p>Th' sett'ns applied t' th' above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="86a297b3b88eaf7d97346b0cea9ce548">
+<div class="tab-panel" data-tab-group="741d870dfe596067b0bc9817ed6918fa">
   <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('86a297b3b88eaf7d97346b0cea9ce548','result')"
+      onclick="switchTab('741d870dfe596067b0bc9817ed6918fa','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -236,13 +236,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="82587f4bdd8433a8142ed00707419250">
+<div class="tab-panel" data-tab-group="a1617efe09ccf29bd1b3e7218e3fee86">
   <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('82587f4bdd8433a8142ed00707419250','html')"
+      onclick="switchTab('a1617efe09ccf29bd1b3e7218e3fee86','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -357,12 +357,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../js/search.js?1694640598" defer></script>
+        <script src="../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -518,13 +518,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/pir/cont/imageeffects/index.print.html b/pir/cont/imageeffects/index.print.html
index 036fcdc95e..db5a20b69f 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/cont/imageeffects/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -88,13 +89,13 @@
 <p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
 
   
-<div class="tab-panel" data-tab-group="3924577bb24e6be0e3cbebab575f400f">
+<div class="tab-panel" data-tab-group="0060bc43cb107d51f3ecbfb647520d4d">
   <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('3924577bb24e6be0e3cbebab575f400f','configtoml')"
+      onclick="switchTab('0060bc43cb107d51f3ecbfb647520d4d','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -118,13 +119,13 @@
 </div><p>This can be overridden 'n a planks frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="4df1736cdf1931e2038021952c9dc734">
+<div class="tab-panel" data-tab-group="7c78e96c76ff300198d129a06a5de0ba">
   <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('4df1736cdf1931e2038021952c9dc734','frontmatter')"
+      onclick="switchTab('7c78e96c76ff300198d129a06a5de0ba','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -147,13 +148,13 @@
 </div><p>Or by explicitly override sett'ns by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="ac3cff4138b9fa218480951b75d31dbc">
+<div class="tab-panel" data-tab-group="595234bee90a64e34c309232d1e8e972">
   <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('ac3cff4138b9fa218480951b75d31dbc','url')"
+      onclick="switchTab('595234bee90a64e34c309232d1e8e972','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -173,13 +174,13 @@
 </div><p>Th' sett'ns applied t' th' above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="86a297b3b88eaf7d97346b0cea9ce548">
+<div class="tab-panel" data-tab-group="741d870dfe596067b0bc9817ed6918fa">
   <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('86a297b3b88eaf7d97346b0cea9ce548','result')"
+      onclick="switchTab('741d870dfe596067b0bc9817ed6918fa','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -202,13 +203,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="82587f4bdd8433a8142ed00707419250">
+<div class="tab-panel" data-tab-group="a1617efe09ccf29bd1b3e7218e3fee86">
   <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('82587f4bdd8433a8142ed00707419250','html')"
+      onclick="switchTab('a1617efe09ccf29bd1b3e7218e3fee86','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -245,8 +246,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/index.html b/pir/cont/index.html
index 039c84a0d9..b93bf81330 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../pir/cont/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,28 +69,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../pir/cont/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../pir/basics/history/index.html" title="Historrry (🡒)">
+              <a class="topbar-button-control" href="../../pir/basics/history/index.html" title="Historrry (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../pir/cont/pages/index.html" title="planks orrrganizat&#39;n (🡐)">
+              <a class="topbar-button-control" href="../../pir/cont/pages/index.html" title="planks orrrganizat&#39;n (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -189,12 +190,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../js/search.js?1694640601" defer></script>
+        <script src="../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -350,13 +351,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../js/theme.js?1694640601" defer></script>
+    <script src="../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/index.print.html b/pir/cont/index.print.html
index bef0743b47..780c0c0469 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../js/url.js?1694640601"></script>
-    <script src="../../js/variant.js?1694640601"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../js/url.js?1694730290"></script>
+    <script src="../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../pir/cont/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -171,8 +172,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-a901634d7ff30d6e1714e8cb964d7092" 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-a901634d7ff30d6e1714e8cb964d7092"><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-bf08d9ff627fba18bd513c02da0e7cd6" 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-bf08d9ff627fba18bd513c02da0e7cd6"><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>
@@ -217,8 +218,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-58185ccb2b98e9536def0d31e3480bea" 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-58185ccb2b98e9536def0d31e3480bea"><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-7ecab1a3d0fb5650530714434cd55009" 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-7ecab1a3d0fb5650530714434cd55009"><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">+++
@@ -228,8 +229,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-b3299a1e43f7fe0254800197cefcf56f" 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-b3299a1e43f7fe0254800197cefcf56f"><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-64e1d8e36cd000ec3886d704334abf66" 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-64e1d8e36cd000ec3886d704334abf66"><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">+++
@@ -241,8 +242,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-68a15d68dee666a5d0e16d2089e0afda" 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-68a15d68dee666a5d0e16d2089e0afda"><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-eed02e4a34e02ff3e4c3bbea93a88d8d" 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-eed02e4a34e02ff3e4c3bbea93a88d8d"><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>
@@ -815,8 +816,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-8e6f2dcb080c9bf7285aa5fb39cfe058" 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-8e6f2dcb080c9bf7285aa5fb39cfe058"><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-04ee29818912dc8e50fc0135ec03ba8f" 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-04ee29818912dc8e50fc0135ec03ba8f"><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>
@@ -826,8 +827,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-00c90e3f07841f1033d17319071b1adc" 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-00c90e3f07841f1033d17319071b1adc"><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-600773d279228e4d0217a01c3af54653" 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-600773d279228e4d0217a01c3af54653"><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>
@@ -839,8 +840,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-03cd9f50f1b2489de6784219d235af6b" 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-03cd9f50f1b2489de6784219d235af6b"><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-1062b1305fce24645ce66d366f840dc7" 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-1062b1305fce24645ce66d366f840dc7"><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>
@@ -852,8 +853,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-769c4580733525c428b40b67e64f2885" 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-769c4580733525c428b40b67e64f2885"><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-adb96fb74923a7129909e4de8054d35b" 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-adb96fb74923a7129909e4de8054d35b"><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>
@@ -861,8 +862,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-adc13996e9ede9672d9d4e30809c7163" 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-adc13996e9ede9672d9d4e30809c7163"><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-bce4af28545ce09115b3b3383839cb4d" 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-bce4af28545ce09115b3b3383839cb4d"><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>
@@ -870,8 +871,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-59c77bc80a53b1ab0b24f3234cbeda77" 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-59c77bc80a53b1ab0b24f3234cbeda77"><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-3f4d9df32b6f857a433a64b37fb4e2b5" 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-3f4d9df32b6f857a433a64b37fb4e2b5"><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>
@@ -882,8 +883,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-c192645b630653a44fe34da3ffc5250f" 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-c192645b630653a44fe34da3ffc5250f"><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-94b02e138094629b7b42bd283fa3d6c3" 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-94b02e138094629b7b42bd283fa3d6c3"><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>
@@ -892,8 +893,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-7915235bccd420c7c3db9faec7b9e587" 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-7915235bccd420c7c3db9faec7b9e587"><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-2e816af4bff867cbdb8b693b55edad5f" 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-2e816af4bff867cbdb8b693b55edad5f"><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>
@@ -902,8 +903,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-597af270f6b7091b5a413579a623af92" 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-597af270f6b7091b5a413579a623af92"><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-c4beb38ed2d3fc4c2829371abebfa5d9" 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-c4beb38ed2d3fc4c2829371abebfa5d9"><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>
@@ -912,8 +913,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-9ac6efdcf755ab62a496b3c1047a547c" 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-9ac6efdcf755ab62a496b3c1047a547c"><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-03dd611484a3f5207d89842220942d41" 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-03dd611484a3f5207d89842220942d41"><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>
@@ -925,14 +926,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-6192ffab4402e6ecc8687d27d9e3ff80" 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-6192ffab4402e6ecc8687d27d9e3ff80"><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-5c08b581eca24d0b89606dfa341500b3" 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-5c08b581eca24d0b89606dfa341500b3"><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-5f991c4602a56613914e9e58747a04fb" 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-5f991c4602a56613914e9e58747a04fb"><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-94d66fecf5498a3e5daff890af9dad88" 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-94d66fecf5498a3e5daff890af9dad88"><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-47acf0294c8568109bf391db722ac9ab" 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-47acf0294c8568109bf391db722ac9ab"><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-f1fcce9cc2055853407ea67763fd81a7" 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-f1fcce9cc2055853407ea67763fd81a7"><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-ca9b430cd1be7e6d690d26e701b4805d" 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-ca9b430cd1be7e6d690d26e701b4805d"><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-191cd9d45d9f1b88983de8cf3b0eab1b" 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-191cd9d45d9f1b88983de8cf3b0eab1b"><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>
@@ -941,8 +942,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-4875a1a3c771b07fc04a3268be37011e" 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-4875a1a3c771b07fc04a3268be37011e"><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-82f3202eb70c00ba68071bf13a3762a4" 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-82f3202eb70c00ba68071bf13a3762a4"><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>
@@ -984,13 +985,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="3924577bb24e6be0e3cbebab575f400f">
+<div class="tab-panel" data-tab-group="0060bc43cb107d51f3ecbfb647520d4d">
   <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('3924577bb24e6be0e3cbebab575f400f','configtoml')"
+      onclick="switchTab('0060bc43cb107d51f3ecbfb647520d4d','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -1014,13 +1015,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="4df1736cdf1931e2038021952c9dc734">
+<div class="tab-panel" data-tab-group="7c78e96c76ff300198d129a06a5de0ba">
   <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('4df1736cdf1931e2038021952c9dc734','frontmatter')"
+      onclick="switchTab('7c78e96c76ff300198d129a06a5de0ba','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -1043,13 +1044,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="ac3cff4138b9fa218480951b75d31dbc">
+<div class="tab-panel" data-tab-group="595234bee90a64e34c309232d1e8e972">
   <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('ac3cff4138b9fa218480951b75d31dbc','url')"
+      onclick="switchTab('595234bee90a64e34c309232d1e8e972','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -1069,13 +1070,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="86a297b3b88eaf7d97346b0cea9ce548">
+<div class="tab-panel" data-tab-group="741d870dfe596067b0bc9817ed6918fa">
   <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('86a297b3b88eaf7d97346b0cea9ce548','result')"
+      onclick="switchTab('741d870dfe596067b0bc9817ed6918fa','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -1098,13 +1099,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="82587f4bdd8433a8142ed00707419250">
+<div class="tab-panel" data-tab-group="a1617efe09ccf29bd1b3e7218e3fee86">
   <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('82587f4bdd8433a8142ed00707419250','html')"
+      onclick="switchTab('a1617efe09ccf29bd1b3e7218e3fee86','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -1285,8 +1286,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-2216167028174ab1e6353994fa584efc" 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-2216167028174ab1e6353994fa584efc"><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-e962cd06b43053b7c5745620c112d123" 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-e962cd06b43053b7c5745620c112d123"><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>
@@ -1426,8 +1427,8 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../js/theme.js?1694640602" defer></script>
+    <script src="../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.html b/pir/cont/markdown/index.html
index a13b3295e8..23197f5025 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/cont/markdown/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#paragraphs">Paragraphs</a></li>
     <li><a href="#headings">Head'ns</a></li>
@@ -122,9 +121,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -133,28 +132,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/cont/markdown/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/cont/archetypes/index.html" title="Arrrchetypes (🡒)">
+              <a class="topbar-button-control" href="../../../pir/cont/archetypes/index.html" title="Arrrchetypes (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/cont/imageeffects/index.html" title="Image Effects (🡐)">
+              <a class="topbar-button-control" href="../../../pir/cont/imageeffects/index.html" title="Image Effects (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -680,8 +680,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-8e6f2dcb080c9bf7285aa5fb39cfe058" 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-8e6f2dcb080c9bf7285aa5fb39cfe058"><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-04ee29818912dc8e50fc0135ec03ba8f" 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-04ee29818912dc8e50fc0135ec03ba8f"><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>
@@ -691,8 +691,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-00c90e3f07841f1033d17319071b1adc" 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-00c90e3f07841f1033d17319071b1adc"><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-600773d279228e4d0217a01c3af54653" 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-600773d279228e4d0217a01c3af54653"><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>
@@ -704,8 +704,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-03cd9f50f1b2489de6784219d235af6b" 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-03cd9f50f1b2489de6784219d235af6b"><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-1062b1305fce24645ce66d366f840dc7" 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-1062b1305fce24645ce66d366f840dc7"><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>
@@ -717,8 +717,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-769c4580733525c428b40b67e64f2885" 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-769c4580733525c428b40b67e64f2885"><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-adb96fb74923a7129909e4de8054d35b" 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-adb96fb74923a7129909e4de8054d35b"><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>
@@ -726,8 +726,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-adc13996e9ede9672d9d4e30809c7163" 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-adc13996e9ede9672d9d4e30809c7163"><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-bce4af28545ce09115b3b3383839cb4d" 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-bce4af28545ce09115b3b3383839cb4d"><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>
@@ -735,8 +735,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-59c77bc80a53b1ab0b24f3234cbeda77" 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-59c77bc80a53b1ab0b24f3234cbeda77"><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-3f4d9df32b6f857a433a64b37fb4e2b5" 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-3f4d9df32b6f857a433a64b37fb4e2b5"><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>
@@ -747,8 +747,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-c192645b630653a44fe34da3ffc5250f" 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-c192645b630653a44fe34da3ffc5250f"><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-94b02e138094629b7b42bd283fa3d6c3" 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-94b02e138094629b7b42bd283fa3d6c3"><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>
@@ -757,8 +757,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-7915235bccd420c7c3db9faec7b9e587" 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-7915235bccd420c7c3db9faec7b9e587"><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-2e816af4bff867cbdb8b693b55edad5f" 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-2e816af4bff867cbdb8b693b55edad5f"><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>
@@ -767,8 +767,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-597af270f6b7091b5a413579a623af92" 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-597af270f6b7091b5a413579a623af92"><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-c4beb38ed2d3fc4c2829371abebfa5d9" 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-c4beb38ed2d3fc4c2829371abebfa5d9"><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>
@@ -777,8 +777,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-9ac6efdcf755ab62a496b3c1047a547c" 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-9ac6efdcf755ab62a496b3c1047a547c"><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-03dd611484a3f5207d89842220942d41" 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-03dd611484a3f5207d89842220942d41"><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>
@@ -790,14 +790,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-6192ffab4402e6ecc8687d27d9e3ff80" 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-6192ffab4402e6ecc8687d27d9e3ff80"><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-5c08b581eca24d0b89606dfa341500b3" 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-5c08b581eca24d0b89606dfa341500b3"><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-5f991c4602a56613914e9e58747a04fb" 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-5f991c4602a56613914e9e58747a04fb"><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-94d66fecf5498a3e5daff890af9dad88" 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-94d66fecf5498a3e5daff890af9dad88"><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-47acf0294c8568109bf391db722ac9ab" 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-47acf0294c8568109bf391db722ac9ab"><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-f1fcce9cc2055853407ea67763fd81a7" 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-f1fcce9cc2055853407ea67763fd81a7"><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-ca9b430cd1be7e6d690d26e701b4805d" 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-ca9b430cd1be7e6d690d26e701b4805d"><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-191cd9d45d9f1b88983de8cf3b0eab1b" 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-191cd9d45d9f1b88983de8cf3b0eab1b"><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>
@@ -806,8 +806,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-4875a1a3c771b07fc04a3268be37011e" 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-4875a1a3c771b07fc04a3268be37011e"><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-82f3202eb70c00ba68071bf13a3762a4" 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-82f3202eb70c00ba68071bf13a3762a4"><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>
@@ -917,12 +917,12 @@ line 3 o' code
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1078,13 +1078,13 @@ line 3 o' code
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.print.html b/pir/cont/markdown/index.print.html
index b645ff6268..262f0fc555 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/cont/markdown/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -598,8 +599,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-8e6f2dcb080c9bf7285aa5fb39cfe058" 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-8e6f2dcb080c9bf7285aa5fb39cfe058"><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-04ee29818912dc8e50fc0135ec03ba8f" 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-04ee29818912dc8e50fc0135ec03ba8f"><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>
@@ -609,8 +610,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-00c90e3f07841f1033d17319071b1adc" 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-00c90e3f07841f1033d17319071b1adc"><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-600773d279228e4d0217a01c3af54653" 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-600773d279228e4d0217a01c3af54653"><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>
@@ -622,8 +623,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-03cd9f50f1b2489de6784219d235af6b" 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-03cd9f50f1b2489de6784219d235af6b"><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-1062b1305fce24645ce66d366f840dc7" 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-1062b1305fce24645ce66d366f840dc7"><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>
@@ -635,8 +636,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-769c4580733525c428b40b67e64f2885" 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-769c4580733525c428b40b67e64f2885"><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-adb96fb74923a7129909e4de8054d35b" 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-adb96fb74923a7129909e4de8054d35b"><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>
@@ -644,8 +645,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-adc13996e9ede9672d9d4e30809c7163" 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-adc13996e9ede9672d9d4e30809c7163"><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-bce4af28545ce09115b3b3383839cb4d" 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-bce4af28545ce09115b3b3383839cb4d"><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>
@@ -653,8 +654,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-59c77bc80a53b1ab0b24f3234cbeda77" 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-59c77bc80a53b1ab0b24f3234cbeda77"><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-3f4d9df32b6f857a433a64b37fb4e2b5" 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-3f4d9df32b6f857a433a64b37fb4e2b5"><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>
@@ -665,8 +666,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-c192645b630653a44fe34da3ffc5250f" 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-c192645b630653a44fe34da3ffc5250f"><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-94b02e138094629b7b42bd283fa3d6c3" 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-94b02e138094629b7b42bd283fa3d6c3"><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>
@@ -675,8 +676,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-7915235bccd420c7c3db9faec7b9e587" 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-7915235bccd420c7c3db9faec7b9e587"><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-2e816af4bff867cbdb8b693b55edad5f" 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-2e816af4bff867cbdb8b693b55edad5f"><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>
@@ -685,8 +686,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-597af270f6b7091b5a413579a623af92" 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-597af270f6b7091b5a413579a623af92"><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-c4beb38ed2d3fc4c2829371abebfa5d9" 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-c4beb38ed2d3fc4c2829371abebfa5d9"><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>
@@ -695,8 +696,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-9ac6efdcf755ab62a496b3c1047a547c" 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-9ac6efdcf755ab62a496b3c1047a547c"><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-03dd611484a3f5207d89842220942d41" 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-03dd611484a3f5207d89842220942d41"><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>
@@ -708,14 +709,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-6192ffab4402e6ecc8687d27d9e3ff80" 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-6192ffab4402e6ecc8687d27d9e3ff80"><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-5c08b581eca24d0b89606dfa341500b3" 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-5c08b581eca24d0b89606dfa341500b3"><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-5f991c4602a56613914e9e58747a04fb" 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-5f991c4602a56613914e9e58747a04fb"><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-94d66fecf5498a3e5daff890af9dad88" 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-94d66fecf5498a3e5daff890af9dad88"><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-47acf0294c8568109bf391db722ac9ab" 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-47acf0294c8568109bf391db722ac9ab"><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-f1fcce9cc2055853407ea67763fd81a7" 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-f1fcce9cc2055853407ea67763fd81a7"><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-ca9b430cd1be7e6d690d26e701b4805d" 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-ca9b430cd1be7e6d690d26e701b4805d"><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-191cd9d45d9f1b88983de8cf3b0eab1b" 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-191cd9d45d9f1b88983de8cf3b0eab1b"><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>
@@ -724,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-4875a1a3c771b07fc04a3268be37011e" 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-4875a1a3c771b07fc04a3268be37011e"><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-82f3202eb70c00ba68071bf13a3762a4" 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-82f3202eb70c00ba68071bf13a3762a4"><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>
@@ -757,8 +758,8 @@ line 3 o' code
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.html b/pir/cont/menushortcuts/index.html
index d3965a720a..45353a0a0e 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,33 +52,32 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/cont/menushortcuts/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#basic-configuration">Basic configurat'n</a></li>
     <li><a href="#i18n">Configurat'n fer Multilingual mode</a></li>
     <li><a href="#shortcuts-to-pages-inside-of-your-project">Shortcuts t' planks inside o' yer project</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,28 +86,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/cont/menushortcuts/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/cont/imageeffects/index.html" title="Image Effects (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/cont/i18n/index.html" title="Multilingual an&#39; i18n (🡐)">
+              <a class="topbar-button-control" href="../../../pir/cont/i18n/index.html" title="Multilingual an&#39; i18n (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -326,12 +326,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?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../js/search.js?1694640598" defer></script>
+        <script src="../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -487,13 +487,13 @@ However, if ye want t' keep th' title but change its value, it can be overridden
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.print.html b/pir/cont/menushortcuts/index.print.html
index ed59d443f4..80b6d0dea8 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/cont/menushortcuts/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -212,8 +213,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?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.html b/pir/cont/pages/index.html
index 204177b347..df428d1a19 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/cont/pages/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#folders">Folders</a></li>
     <li><a href="#create-your-project">Create yer project</a></li>
@@ -83,9 +82,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -94,28 +93,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/cont/pages/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/cont/index.html" title="Rambl&#39;n (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/cont/archetypes/index.html" title="Arrrchetypes (🡐)">
+              <a class="topbar-button-control" href="../../../pir/cont/archetypes/index.html" title="Arrrchetypes (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -198,8 +198,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-a901634d7ff30d6e1714e8cb964d7092" 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-a901634d7ff30d6e1714e8cb964d7092"><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-bf08d9ff627fba18bd513c02da0e7cd6" 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-bf08d9ff627fba18bd513c02da0e7cd6"><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>
@@ -314,12 +314,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?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -475,13 +475,13 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.print.html b/pir/cont/pages/index.print.html
index dc473af119..6788534915 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/cont/pages/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -155,8 +156,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-a901634d7ff30d6e1714e8cb964d7092" 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-a901634d7ff30d6e1714e8cb964d7092"><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-bf08d9ff627fba18bd513c02da0e7cd6" 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-bf08d9ff627fba18bd513c02da0e7cd6"><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>
@@ -193,8 +194,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/cont/taxonomy/index.html b/pir/cont/taxonomy/index.html
index 7d2d2e98fd..908e180db1 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,33 +52,32 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/cont/taxonomy/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#configuration">Configurat'n</a></li>
     <li><a href="#behavior">Behavior</a></li>
     <li><a href="#list-all-the-tags">List all th' tags</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,28 +86,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/cont/taxonomy/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/cont/i18n/index.html" title="Multilingual an&#39; i18n (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/shortcodes/index.html" title="Shorrrtcodes (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/index.html" title="Shorrrtcodes (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -230,12 +230,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -391,13 +391,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/pir/cont/taxonomy/index.print.html b/pir/cont/taxonomy/index.print.html
index fa68001e92..b383157c3e 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/cont/taxonomy/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -116,8 +117,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/dev/contributing/index.html b/pir/dev/contributing/index.html
index 2dbf813857..4be33f5242 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,32 +51,31 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/dev/contributing/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#code-quality">Code Quality</a></li>
     <li><a href="#conventional-commits">Conventional Commits</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -85,28 +84,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/dev/contributing/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/dev/index.html" title="Development (🡒)">
+              <a class="topbar-button-control" href="../../../pir/dev/index.html" title="Development (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/dev/maintaining/index.html" title="Maintaining (🡐)">
+              <a class="topbar-button-control" href="../../../pir/dev/maintaining/index.html" title="Maintaining (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -320,12 +320,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -485,13 +485,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/dev/contributing/index.print.html b/pir/dev/contributing/index.print.html
index 729a08b9e9..344fb47b79 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/dev/contributing/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -207,8 +208,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/dev/index.html b/pir/dev/index.html
index bf0a3d57c8..209de9db96 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../pir/dev/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -68,28 +68,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../pir/dev/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../pir/shortcodes/tabs/index.html" title="Tabs (🡒)">
+              <a class="topbar-button-control" href="../../pir/shortcodes/tabs/index.html" title="Tabs (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../pir/dev/contributing/index.html" title="Contributing (🡐)">
+              <a class="topbar-button-control" href="../../pir/dev/contributing/index.html" title="Contributing (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -195,12 +196,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../js/search.js?1694640601" defer></script>
+        <script src="../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -360,13 +361,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../js/theme.js?1694640601" defer></script>
+    <script src="../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/dev/index.print.html b/pir/dev/index.print.html
index 4411937bba..55d97231fc 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../js/url.js?1694640601"></script>
-    <script src="../../js/variant.js?1694640601"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../js/url.js?1694730290"></script>
+    <script src="../../js/variant.js?1694730290"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../pir/dev/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -71,6 +71,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -470,8 +471,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-bad29cdb89372737336c035b29e60993" 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-bad29cdb89372737336c035b29e60993"><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-23eed7a0140a9b652bd29b4be6fdbf07" 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-23eed7a0140a9b652bd29b4be6fdbf07"><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>
@@ -500,11 +501,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-d867345238ba99b8fe63bb7a0bf683cf" 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-d867345238ba99b8fe63bb7a0bf683cf"><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-21b1a763847b4e6e2f07e39f31b68f83" 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-21b1a763847b4e6e2f07e39f31b68f83"><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-4fc5f8fab85b7d2ce0724547a701b504" 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-4fc5f8fab85b7d2ce0724547a701b504"><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-47a10fd63feb82c81b96d8b8bd2bcbce" 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-47a10fd63feb82c81b96d8b8bd2bcbce"><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">
@@ -516,8 +517,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../js/theme.js?1694640602" defer></script>
+    <script src="../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/dev/maintaining/index.html b/pir/dev/maintaining/index.html
index 28160c11d7..b6b9a6824b 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,24 +51,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/dev/maintaining/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#semver">Semver</a></li>
     <li><a href="#managing-issues">Manag'n Issues</a></li>
@@ -85,9 +84,9 @@
     <li><a href="#making-releases">Mak'n Releases</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -96,28 +95,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/dev/maintaining/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/dev/contributing/index.html" title="Contributing (🡒)">
+              <a class="topbar-button-control" href="../../../pir/dev/contributing/index.html" title="Contributing (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/dev/screenshots/index.html" title="Scrrrenshots (🡐)">
+              <a class="topbar-button-control" href="../../../pir/dev/screenshots/index.html" title="Scrrrenshots (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -407,12 +407,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -572,13 +572,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/dev/maintaining/index.print.html b/pir/dev/maintaining/index.print.html
index 8e5c618bab..dc74f8ab68 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/dev/maintaining/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -283,8 +284,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/dev/screenshots/index.html b/pir/dev/screenshots/index.html
index 240588386b..95ffd40fd8 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,24 +51,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/dev/screenshots/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#common">Common</a></li>
     <li><a href="#demo-screenshot">Demo Screenshot</a>
@@ -84,9 +83,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -95,28 +94,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/dev/screenshots/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/dev/maintaining/index.html" title="Maintaining (🡒)">
+              <a class="topbar-button-control" href="../../../pir/dev/maintaining/index.html" title="Maintaining (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -156,8 +156,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-bad29cdb89372737336c035b29e60993" 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-bad29cdb89372737336c035b29e60993"><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-23eed7a0140a9b652bd29b4be6fdbf07" 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-23eed7a0140a9b652bd29b4be6fdbf07"><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>
@@ -186,11 +186,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-d867345238ba99b8fe63bb7a0bf683cf" 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-d867345238ba99b8fe63bb7a0bf683cf"><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-21b1a763847b4e6e2f07e39f31b68f83" 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-21b1a763847b4e6e2f07e39f31b68f83"><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-4fc5f8fab85b7d2ce0724547a701b504" 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-4fc5f8fab85b7d2ce0724547a701b504"><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-47a10fd63feb82c81b96d8b8bd2bcbce" 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-47a10fd63feb82c81b96d8b8bd2bcbce"><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">
@@ -279,12 +279,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -444,13 +444,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/dev/screenshots/index.print.html b/pir/dev/screenshots/index.print.html
index f91b48f2e8..335f729c00 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/dev/screenshots/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -111,8 +112,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-bad29cdb89372737336c035b29e60993" 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-bad29cdb89372737336c035b29e60993"><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-23eed7a0140a9b652bd29b4be6fdbf07" 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-23eed7a0140a9b652bd29b4be6fdbf07"><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>
@@ -141,11 +142,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-d867345238ba99b8fe63bb7a0bf683cf" 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-d867345238ba99b8fe63bb7a0bf683cf"><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-21b1a763847b4e6e2f07e39f31b68f83" 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-21b1a763847b4e6e2f07e39f31b68f83"><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-4fc5f8fab85b7d2ce0724547a701b504" 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-4fc5f8fab85b7d2ce0724547a701b504"><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-47a10fd63feb82c81b96d8b8bd2bcbce" 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-47a10fd63feb82c81b96d8b8bd2bcbce"><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">
@@ -156,8 +157,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/index.html b/pir/index.html
index 4646e04d46..6870acc528 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../js/url.js?1694640598"></script>
-    <script src="../js/variant.js?1694640598"></script>
+    <link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../js/url.js?1694730288"></script>
+    <script src="../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../pir/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#motivation">Motivat'n</a></li>
     <li><a href="#features">Features</a></li>
@@ -79,37 +78,38 @@
     <li><a href="#credits">Credits</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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 class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../pir/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </span>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../pir/basics/index.html" title="Basics (🡐)">
+              <a class="topbar-button-control" href="../pir/basics/index.html" title="Basics (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable home" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="home">
@@ -127,8 +127,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-7bb83405042fc29c2527aa7b6843dee7" 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-7bb83405042fc29c2527aa7b6843dee7"><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-31afddb9c198691d3c44130c8633a4aa" 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-31afddb9c198691d3c44130c8633a4aa"><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>
@@ -302,12 +302,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694640600" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../js/search.js?1694640600" defer></script>
+        <script src="../js/auto-complete.js?1694730289" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -463,13 +463,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1694640600"></script>
+          <script async src="../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../js/theme.js?1694640600" defer></script>
+    <script src="../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/index.print.html b/pir/index.print.html
index 86010fd301..090662b560 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../js/url.js?1694640601"></script>
-    <script src="../js/variant.js?1694640601"></script>
+    <link href="../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../js/url.js?1694730290"></script>
+    <script src="../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../pir/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -71,6 +71,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable home" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="home">
@@ -88,8 +89,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-7bb83405042fc29c2527aa7b6843dee7" 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-7bb83405042fc29c2527aa7b6843dee7"><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-31afddb9c198691d3c44130c8633a4aa" 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-31afddb9c198691d3c44130c8633a4aa"><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>
@@ -960,8 +961,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-2808a7ec99b93154d28ccf0079408bc4" 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-2808a7ec99b93154d28ccf0079408bc4"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#image-824b68e1074c99c8f9dc86945c46e62e" 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-824b68e1074c99c8f9dc86945c46e62e"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -1006,8 +1007,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-343826b9cb2af67f80642e07f9f41b6d" 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-343826b9cb2af67f80642e07f9f41b6d"><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-e0dd89e37a0d8e1acedbd3da34b31203" 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-e0dd89e37a0d8e1acedbd3da34b31203"><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>
@@ -1163,8 +1164,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-366e3951c215d381a8840cb4ed7cf78e" 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-366e3951c215d381a8840cb4ed7cf78e"><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-ce32dac0565b63f402cde3bef1558e66" 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-ce32dac0565b63f402cde3bef1558e66"><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>
@@ -1209,8 +1210,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-28ce80d6578349c6db81424247a3045c" 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-28ce80d6578349c6db81424247a3045c"><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-fda7b2f8f2c18ffa274c9ab9e31a2181" 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-fda7b2f8f2c18ffa274c9ab9e31a2181"><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">
@@ -1335,13 +1336,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-36a175a16a1b6340e7ccf842d2e17c1c" aria-controls="expandcontent-36a175a16a1b6340e7ccf842d2e17c1c" >
-    <label class="expand-label" for="expand-36a175a16a1b6340e7ccf842d2e17c1c" >
+    <input type="checkbox" id="expand-ab70316b57d895a6b25c2cf2e658a339" aria-controls="expandcontent-ab70316b57d895a6b25c2cf2e658a339" >
+    <label class="expand-label" for="expand-ab70316b57d895a6b25c2cf2e658a339" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="expandcontent-36a175a16a1b6340e7ccf842d2e17c1c" class="expand-content">
+    <div id="expandcontent-ab70316b57d895a6b25c2cf2e658a339" 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>
@@ -2721,8 +2722,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-a901634d7ff30d6e1714e8cb964d7092" 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-a901634d7ff30d6e1714e8cb964d7092"><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-bf08d9ff627fba18bd513c02da0e7cd6" 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-bf08d9ff627fba18bd513c02da0e7cd6"><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>
@@ -2767,8 +2768,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-58185ccb2b98e9536def0d31e3480bea" 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-58185ccb2b98e9536def0d31e3480bea"><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-7ecab1a3d0fb5650530714434cd55009" 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-7ecab1a3d0fb5650530714434cd55009"><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">+++
@@ -2778,8 +2779,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-b3299a1e43f7fe0254800197cefcf56f" 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-b3299a1e43f7fe0254800197cefcf56f"><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-64e1d8e36cd000ec3886d704334abf66" 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-64e1d8e36cd000ec3886d704334abf66"><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">+++
@@ -2791,8 +2792,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-68a15d68dee666a5d0e16d2089e0afda" 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-68a15d68dee666a5d0e16d2089e0afda"><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-eed02e4a34e02ff3e4c3bbea93a88d8d" 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-eed02e4a34e02ff3e4c3bbea93a88d8d"><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>
@@ -3365,8 +3366,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-8e6f2dcb080c9bf7285aa5fb39cfe058" 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-8e6f2dcb080c9bf7285aa5fb39cfe058"><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-04ee29818912dc8e50fc0135ec03ba8f" 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-04ee29818912dc8e50fc0135ec03ba8f"><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>
@@ -3376,8 +3377,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-00c90e3f07841f1033d17319071b1adc" 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-00c90e3f07841f1033d17319071b1adc"><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-600773d279228e4d0217a01c3af54653" 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-600773d279228e4d0217a01c3af54653"><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>
@@ -3389,8 +3390,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-03cd9f50f1b2489de6784219d235af6b" 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-03cd9f50f1b2489de6784219d235af6b"><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-1062b1305fce24645ce66d366f840dc7" 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-1062b1305fce24645ce66d366f840dc7"><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>
@@ -3402,8 +3403,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-769c4580733525c428b40b67e64f2885" 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-769c4580733525c428b40b67e64f2885"><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-adb96fb74923a7129909e4de8054d35b" 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-adb96fb74923a7129909e4de8054d35b"><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>
@@ -3411,8 +3412,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-adc13996e9ede9672d9d4e30809c7163" 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-adc13996e9ede9672d9d4e30809c7163"><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-bce4af28545ce09115b3b3383839cb4d" 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-bce4af28545ce09115b3b3383839cb4d"><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>
@@ -3420,8 +3421,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-59c77bc80a53b1ab0b24f3234cbeda77" 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-59c77bc80a53b1ab0b24f3234cbeda77"><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-3f4d9df32b6f857a433a64b37fb4e2b5" 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-3f4d9df32b6f857a433a64b37fb4e2b5"><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>
@@ -3432,8 +3433,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-c192645b630653a44fe34da3ffc5250f" 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-c192645b630653a44fe34da3ffc5250f"><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-94b02e138094629b7b42bd283fa3d6c3" 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-94b02e138094629b7b42bd283fa3d6c3"><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>
@@ -3442,8 +3443,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-7915235bccd420c7c3db9faec7b9e587" 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-7915235bccd420c7c3db9faec7b9e587"><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-2e816af4bff867cbdb8b693b55edad5f" 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-2e816af4bff867cbdb8b693b55edad5f"><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>
@@ -3452,8 +3453,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-597af270f6b7091b5a413579a623af92" 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-597af270f6b7091b5a413579a623af92"><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-c4beb38ed2d3fc4c2829371abebfa5d9" 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-c4beb38ed2d3fc4c2829371abebfa5d9"><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>
@@ -3462,8 +3463,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-9ac6efdcf755ab62a496b3c1047a547c" 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-9ac6efdcf755ab62a496b3c1047a547c"><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-03dd611484a3f5207d89842220942d41" 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-03dd611484a3f5207d89842220942d41"><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>
@@ -3475,14 +3476,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-6192ffab4402e6ecc8687d27d9e3ff80" 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-6192ffab4402e6ecc8687d27d9e3ff80"><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-5c08b581eca24d0b89606dfa341500b3" 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-5c08b581eca24d0b89606dfa341500b3"><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-5f991c4602a56613914e9e58747a04fb" 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-5f991c4602a56613914e9e58747a04fb"><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-94d66fecf5498a3e5daff890af9dad88" 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-94d66fecf5498a3e5daff890af9dad88"><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-47acf0294c8568109bf391db722ac9ab" 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-47acf0294c8568109bf391db722ac9ab"><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-f1fcce9cc2055853407ea67763fd81a7" 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-f1fcce9cc2055853407ea67763fd81a7"><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-ca9b430cd1be7e6d690d26e701b4805d" 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-ca9b430cd1be7e6d690d26e701b4805d"><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-191cd9d45d9f1b88983de8cf3b0eab1b" 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-191cd9d45d9f1b88983de8cf3b0eab1b"><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>
@@ -3491,8 +3492,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-4875a1a3c771b07fc04a3268be37011e" 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-4875a1a3c771b07fc04a3268be37011e"><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-82f3202eb70c00ba68071bf13a3762a4" 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-82f3202eb70c00ba68071bf13a3762a4"><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>
@@ -3534,13 +3535,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="3924577bb24e6be0e3cbebab575f400f">
+<div class="tab-panel" data-tab-group="0060bc43cb107d51f3ecbfb647520d4d">
   <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('3924577bb24e6be0e3cbebab575f400f','configtoml')"
+      onclick="switchTab('0060bc43cb107d51f3ecbfb647520d4d','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -3564,13 +3565,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="4df1736cdf1931e2038021952c9dc734">
+<div class="tab-panel" data-tab-group="7c78e96c76ff300198d129a06a5de0ba">
   <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('4df1736cdf1931e2038021952c9dc734','frontmatter')"
+      onclick="switchTab('7c78e96c76ff300198d129a06a5de0ba','frontmatter')"
     >
       <div>
         <div class="tab-nav-hidden">frontmatter</div>
@@ -3593,13 +3594,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="ac3cff4138b9fa218480951b75d31dbc">
+<div class="tab-panel" data-tab-group="595234bee90a64e34c309232d1e8e972">
   <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('ac3cff4138b9fa218480951b75d31dbc','url')"
+      onclick="switchTab('595234bee90a64e34c309232d1e8e972','url')"
     >
       <div>
         <div class="tab-nav-hidden">URL</div>
@@ -3619,13 +3620,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="86a297b3b88eaf7d97346b0cea9ce548">
+<div class="tab-panel" data-tab-group="741d870dfe596067b0bc9817ed6918fa">
   <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('86a297b3b88eaf7d97346b0cea9ce548','result')"
+      onclick="switchTab('741d870dfe596067b0bc9817ed6918fa','result')"
     >
       <div>
         <div class="tab-nav-hidden">Result</div>
@@ -3648,13 +3649,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="82587f4bdd8433a8142ed00707419250">
+<div class="tab-panel" data-tab-group="a1617efe09ccf29bd1b3e7218e3fee86">
   <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('82587f4bdd8433a8142ed00707419250','html')"
+      onclick="switchTab('a1617efe09ccf29bd1b3e7218e3fee86','html')"
     >
       <div>
         <div class="tab-nav-hidden">HTML</div>
@@ -3835,8 +3836,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-2216167028174ab1e6353994fa584efc" 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-2216167028174ab1e6353994fa584efc"><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-e962cd06b43053b7c5745620c112d123" 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-e962cd06b43053b7c5745620c112d123"><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>
@@ -5268,13 +5269,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-0773755b5d02bc2abf195deaa9b60279" aria-controls="expandcontent-0773755b5d02bc2abf195deaa9b60279" >
-    <label class="expand-label" for="expand-0773755b5d02bc2abf195deaa9b60279" >
+    <input type="checkbox" id="expand-90fad76af003d218a822e423e7a9abd0" aria-controls="expandcontent-90fad76af003d218a822e423e7a9abd0" >
+    <label class="expand-label" for="expand-90fad76af003d218a822e423e7a9abd0" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-0773755b5d02bc2abf195deaa9b60279" class="expand-content">
+    <div id="expandcontent-90fad76af003d218a822e423e7a9abd0" 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>
@@ -5401,26 +5402,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-87b8545fc8dd02c27ea8b9b1b2abaf36" aria-controls="expandcontent-87b8545fc8dd02c27ea8b9b1b2abaf36" >
-    <label class="expand-label" for="expand-87b8545fc8dd02c27ea8b9b1b2abaf36" >
+    <input type="checkbox" id="expand-1b15bcf02ad170d22f2649c1fa21372a" aria-controls="expandcontent-1b15bcf02ad170d22f2649c1fa21372a" >
+    <label class="expand-label" for="expand-1b15bcf02ad170d22f2649c1fa21372a" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-87b8545fc8dd02c27ea8b9b1b2abaf36" class="expand-content">
+    <div id="expandcontent-1b15bcf02ad170d22f2649c1fa21372a" 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-d83e0a73221a776567f9fbcda8fa8f3c" aria-controls="expandcontent-d83e0a73221a776567f9fbcda8fa8f3c"  checked>
-    <label class="expand-label" for="expand-d83e0a73221a776567f9fbcda8fa8f3c" >
+    <input type="checkbox" id="expand-e2d5d92e84048a28d9275208acd3fe57" aria-controls="expandcontent-e2d5d92e84048a28d9275208acd3fe57"  checked>
+    <label class="expand-label" for="expand-e2d5d92e84048a28d9275208acd3fe57" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-d83e0a73221a776567f9fbcda8fa8f3c" class="expand-content">
+    <div id="expandcontent-e2d5d92e84048a28d9275208acd3fe57" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -5441,13 +5442,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-c4a6014835ed1cb5b57bb9a33dc86836" aria-controls="expandcontent-c4a6014835ed1cb5b57bb9a33dc86836" >
-    <label class="expand-label" for="expand-c4a6014835ed1cb5b57bb9a33dc86836" >
+    <input type="checkbox" id="expand-2bd7ee100d9675bdb8fd2bceb52ead2d" aria-controls="expandcontent-2bd7ee100d9675bdb8fd2bceb52ead2d" >
+    <label class="expand-label" for="expand-2bd7ee100d9675bdb8fd2bceb52ead2d" >
         <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-c4a6014835ed1cb5b57bb9a33dc86836" class="expand-content">
+    <div id="expandcontent-2bd7ee100d9675bdb8fd2bceb52ead2d" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -5485,13 +5486,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="fd9fcd30549b83e8518e156e5ce9408e">
+<div class="tab-panel" data-tab-group="388c768303cbf38aaeec1b8ceed11809">
   <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('fd9fcd30549b83e8518e156e5ce9408e','python')"
+      onclick="switchTab('388c768303cbf38aaeec1b8ceed11809','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -5714,13 +5715,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="353f9be4d00d8e52955e8497138a8516">
+<div class="tab-panel" data-tab-group="b6f09f29e81d0fa43cc83fc4872ea557">
   <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('353f9be4d00d8e52955e8497138a8516','python')"
+      onclick="switchTab('b6f09f29e81d0fa43cc83fc4872ea557','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -7285,7 +7286,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-2acd99b2f2203465be78c17119273dbd"
+    id="openapi-f082e496a3b469521b7dfb29a4a3ef58"
     openapi-url="../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -7393,13 +7394,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="fb76e332005f136bc6ef09aa58293a41">
+<div class="tab-panel" data-tab-group="2d45c8491f405981d4e4484d1bb20531">
   <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('fb76e332005f136bc6ef09aa58293a41','configtoml')"
+      onclick="switchTab('2d45c8491f405981d4e4484d1bb20531','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -7437,13 +7438,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="55b5a92e025c5c02f4578b2b628d7c93">
+<div class="tab-panel" data-tab-group="22590859c6811f845c9f8899b93cac2b">
   <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('55b5a92e025c5c02f4578b2b628d7c93','c')"
+      onclick="switchTab('22590859c6811f845c9f8899b93cac2b','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -7557,13 +7558,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="a7db81fde6b576e655625e92509f1a39">
+<div class="tab-panel" data-tab-group="e96d845a9555b1ebe0d03bcf6c474b43">
   <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('a7db81fde6b576e655625e92509f1a39','code')"
+      onclick="switchTab('e96d845a9555b1ebe0d03bcf6c474b43','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -7588,13 +7589,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="7bb61f6e65e60da7cfad9bcb1e8d0879">
+<div class="tab-panel" data-tab-group="1e3ac3d704b5d2ab9979618d25b06d28">
   <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('7bb61f6e65e60da7cfad9bcb1e8d0879','emstrongmixedstrongem')"
+      onclick="switchTab('1e3ac3d704b5d2ab9979618d25b06d28','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -7642,13 +7643,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="ac485a364ccc1ac3230d8b295ee25945">
+<div class="tab-panel" data-tab-group="5e61850b4120e110955e46f4a8e00a69">
   <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('ac485a364ccc1ac3230d8b295ee25945','just-colored-style')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -7658,7 +7659,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('ac485a364ccc1ac3230d8b295ee25945','just-color')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -7668,7 +7669,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('ac485a364ccc1ac3230d8b295ee25945','default-style-and-color')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style an' color</div>
@@ -7678,7 +7679,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('ac485a364ccc1ac3230d8b295ee25945','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','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>
@@ -7688,7 +7689,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('ac485a364ccc1ac3230d8b295ee25945','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','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>
@@ -7761,13 +7762,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="bad26d6658363c3202297394ba893b90">
+<div class="tab-panel" data-tab-group="bc299bc3cf1fc4c0415addbab5968c9c">
   <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('bad26d6658363c3202297394ba893b90','py')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -7777,7 +7778,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bad26d6658363c3202297394ba893b90','sh')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -7787,7 +7788,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bad26d6658363c3202297394ba893b90','c')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -7944,13 +7945,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="ed02acb92a8b7a272e255eca638e292c">
+<div class="tab-panel" data-tab-group="76dc28f0994c3a7cbeb59d917b9c9f71">
   <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('ed02acb92a8b7a272e255eca638e292c','group-a-tab-view-1')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -7960,7 +7961,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('ed02acb92a8b7a272e255eca638e292c','group-a-tab-view-2')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -7970,7 +7971,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('ed02acb92a8b7a272e255eca638e292c','group-b')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -8371,8 +8372,8 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640602" defer></script>
+    <script src="../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730290" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -8401,27 +8402,27 @@ Electricity grid,H2 conversion,27.14
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1694640602"></script>
-    <script src="../js/d3/d3-color.min.js?1694640602" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1694640602" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1694640602" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1694640602" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1694640602" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1694640602" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1694640602" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1694640602" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1694640602" defer></script>
-    <script src="../js/js-yaml.min.js?1694640602" defer></script>
-    <script src="../js/mermaid.min.js?1694640602" defer></script>
+    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1694730290"></script>
+    <script src="../js/d3/d3-color.min.js?1694730290" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1694730290" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1694730290" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1694730290" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1694730290" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1694730290" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1694730290" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1694730290" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1694730290" defer></script>
+    <script src="../js/js-yaml.min.js?1694730290" defer></script>
+    <script src="../js/mermaid.min.js?1694730290" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="../js/swagger-ui/swagger-ui-bundle.js?1694640602" defer></script>
-    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1694640602" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-bundle.js?1694730290" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1694730290" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694640602", assetsBuster:  1694640602  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694730290", assetsBuster:  1694730290  };
     </script>
-    <script src="../js/theme.js?1694640602" defer></script>
+    <script src="../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/more/credits/index.html b/pir/more/credits/index.html
index fe1e1856ff..59691b51f3 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/more/credits/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#contributors">Contributors</a></li>
     <li><a href="#theme-dependencies">Theme Dependencies</a></li>
@@ -77,9 +76,9 @@
     <li><a href="#tooling-dependencies">Tool'n Dependencies</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,28 +86,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/more/credits/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -260,12 +260,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -421,13 +421,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/more/credits/index.print.html b/pir/more/credits/index.print.html
index efb81e0068..56bb40bc08 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/more/credits/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -145,8 +146,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../js/theme.js?1694730291" defer></script>
   </body>
 </html>
diff --git a/pir/search.html b/pir/search.html
index 43ea5e083c..23ac4c6f12 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730288" 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?1694640602" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640602" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640602" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640602" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640602" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640602" rel="stylesheet">
-    <link href="../css/fonts.css?1694640602" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640602" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640602" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640602" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640602" rel="stylesheet">
-    <link href="../css/print.css?1694640602" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694640602" rel="stylesheet">
-    <script src="../js/url.js?1694640602"></script>
-    <script src="../js/variant.js?1694640602"></script>
+    <link href="../css/fontawesome-all.min.css?1694730291" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730291" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730291" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730291" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730291" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730291" rel="stylesheet">
+    <link href="../css/fonts.css?1694730291" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730291" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730291" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730291" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730291" rel="stylesheet">
+    <link href="../css/print.css?1694730291" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694730291" rel="stylesheet">
+    <script src="../js/url.js?1694730291"></script>
+    <script src="../js/variant.js?1694730291"></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,34 +51,35 @@
   </head>
   <body class="mobile-support searchpage disableInlineCopyToClipboard" data-url="../pir/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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 class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable home" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -189,12 +190,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694640602" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694640602" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694640602" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694640602" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694640602" defer></script>
-        <script src="../js/search.js?1694640602" defer></script>
+        <script src="../js/auto-complete.js?1694730291" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694730291" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694730291" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694730291" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694730291" defer></script>
+        <script src="../js/search.js?1694730291" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -350,13 +351,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1694640602"></script>
+          <script async src="../js/github-buttons.js?1694730291"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../js/theme.js?1694640602" defer></script>
+    <script src="../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../js/theme.js?1694730291" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.html b/pir/shortcodes/attachments/index.html
index 5b290b70d2..91167a4395 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/attachments/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -92,9 +91,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -103,28 +102,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/attachments/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/index.html" title="Shorrrtcodes (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/index.html" title="Shorrrtcodes (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/badge/index.html" title="Badge (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/badge/index.html" title="Badge (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -475,12 +475,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -636,13 +636,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.print.html b/pir/shortcodes/attachments/index.print.html
index 4c728e8a86..e894673222 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/attachments/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -345,8 +346,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/badge/index.html b/pir/shortcodes/badge/index.html
index 4444aa1e2e..967e1f1d68 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/badge/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -85,9 +84,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -96,28 +95,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/badge/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/attachments/index.html" title="Attachments (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/attachments/index.html" title="Attachments (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/button/index.html" title="Button (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/button/index.html" title="Button (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -407,12 +407,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -568,13 +568,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/badge/index.print.html b/pir/shortcodes/badge/index.print.html
index fdf136fa8b..deb566c41a 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/badge/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -284,8 +285,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.html b/pir/shortcodes/button/index.html
index 011338efea..75a380c7cf 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/button/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -86,9 +85,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -97,28 +96,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/button/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/badge/index.html" title="Badge (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/badge/index.html" title="Badge (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/children/index.html" title="Children (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/children/index.html" title="Children (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -547,12 +547,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -708,13 +708,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.print.html b/pir/shortcodes/button/index.print.html
index 3034612d26..d39bf700ff 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/button/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -423,8 +424,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" 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 d6ed1bd520..9a9b36171b 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../../../../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">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -75,28 +75,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-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) (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡐)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -198,12 +199,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../../../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../../../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../../../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -363,13 +364,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../../../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../../../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../../../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../../../../../../js/theme.js?1694730290" 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 d6e2d93b31..3e8d0d4927 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../../../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../../../../../../js/url.js?1694640601"></script>
-    <script src="../../../../../../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../../../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../../../../../../js/url.js?1694730290"></script>
+    <script src="../../../../../../../../../js/variant.js?1694730290"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../../../../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">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -78,6 +78,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -101,8 +102,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../../../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../../../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../../../../../../js/theme.js?1694730291" 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 17a75b4f69..e9adf1506e 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../../../js/variant.js?1694730288"></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,31 +51,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../../../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">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages o' this plank</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -89,28 +88,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-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 (🡒)">
+              <a class="topbar-button-control" 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-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 (🡐)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -218,12 +218,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -383,13 +383,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../../../../../js/theme.js?1694730290" 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 5b714d5f7d..e26685114a 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1694640601"></script>
-    <script src="../../../../../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1694730290"></script>
+    <script src="../../../../../../../../js/variant.js?1694730290"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../../../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">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -77,6 +77,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -127,8 +128,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../../../../../js/theme.js?1694730291" 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 ead8584de3..a7385daa7f 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../../js/variant.js?1694730288"></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,31 +51,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages o' this plank</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -88,28 +87,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" title="plank 1-1-1 (hidden) (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡐)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -380,13 +380,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../../../../js/theme.js?1694730290" 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 4a4b246abc..d4cada8782 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694640601"></script>
-    <script src="../../../../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694730290"></script>
+    <script src="../../../../../../../js/variant.js?1694730290"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -76,6 +76,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -108,8 +109,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../../../../js/theme.js?1694730291" 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 80cd1927ac..6a05c3891b 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../js/variant.js?1694730288"></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,31 +51,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages o' this plank</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,28 +86,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html" title="plank 1-1 (🡒)">
+              <a class="topbar-button-control" 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-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 (🡐)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -216,12 +216,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -379,13 +379,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../../../js/theme.js?1694730290" 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 cf475cf0ce..cce6a9c7c8 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640601"></script>
-    <script src="../../../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730290"></script>
+    <script src="../../../../../../js/variant.js?1694730290"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -75,6 +75,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -134,8 +135,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../../../js/theme.js?1694730291" 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 5506900620..9d24d641f6 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -74,28 +74,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡒)">
+              <a class="topbar-button-control" 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-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 (🡐)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -197,12 +198,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -358,13 +359,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../../../../js/theme.js?1694730290" 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 362522715e..024a84dc74 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694640601"></script>
-    <script src="../../../../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694730290"></script>
+    <script src="../../../../../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -77,6 +77,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -100,8 +101,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../../../../js/theme.js?1694730291" 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 e99175e426..b0c9182798 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -74,28 +74,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-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 (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="plank 1-1-3 (🡐)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -197,12 +198,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -358,13 +359,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../../../../js/theme.js?1694730290" 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 7502bcbda9..4109f5451b 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694640601"></script>
-    <script src="../../../../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694730290"></script>
+    <script src="../../../../../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -77,6 +77,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -100,8 +101,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../../../../js/theme.js?1694730291" 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 acede4ea29..df62504d4b 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../js/variant.js?1694730288"></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
@@ -52,31 +52,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages o' this plank</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -88,28 +87,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../../../pir/shortcodes/children/children-1/children-1-1/index.html" title="plank 1-1 (🡒)">
+              <a class="topbar-button-control" 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-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 (🡐)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -218,12 +218,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -379,13 +379,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../../../js/theme.js?1694730290" 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 6e8818f5df..85d7b644a4 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640601"></script>
-    <script src="../../../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730290"></script>
+    <script src="../../../../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -76,6 +76,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -145,8 +146,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../../../js/theme.js?1694730291" 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 df1e4d855a..fc0873cd9e 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,28 +73,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-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 (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../../../pir/shortcodes/children/children-2/index.html" title="plank 2 (🡐)">
+              <a class="topbar-button-control" href="../../../../../../pir/shortcodes/children/children-2/index.html" title="plank 2 (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -196,12 +197,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -357,13 +358,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../../../js/theme.js?1694730290" 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 eac36af58b..44d866fa0f 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640601"></script>
-    <script src="../../../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730290"></script>
+    <script src="../../../../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -76,6 +76,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -99,8 +100,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../../../js/theme.js?1694730291" 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 452be77fbb..c3770cbf71 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../js/variant.js?1694730288"></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
@@ -52,31 +52,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../pir/shortcodes/children/children-1/children-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages o' this plank</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,28 +86,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../../pir/shortcodes/children/children-1/index.html" title="plank 1 (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="plank 1-1-2 (🡐)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -218,12 +218,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -379,13 +379,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../../js/theme.js?1694730290" 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 2e42fda4ad..5b602bebe8 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694640601"></script>
-    <script src="../../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694730290"></script>
+    <script src="../../../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../pir/shortcodes/children/children-1/children-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -75,6 +75,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -191,8 +192,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../../js/theme.js?1694730291" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/index.html b/pir/shortcodes/children/children-1/index.html
index f7af63f2eb..223d407111 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640598"></script>
-    <script src="../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730288"></script>
+    <script src="../../../../js/variant.js?1694730288"></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
@@ -52,31 +52,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../pir/shortcodes/children/children-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages o' this plank</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -86,28 +85,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../../pir/shortcodes/children/children-1/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../pir/shortcodes/children/test/index.html" title="plank X (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../pir/shortcodes/children/children-1/children-1-1/index.html" title="plank 1-1 (🡐)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -215,12 +215,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -376,13 +376,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../js/theme.js?1694730290" 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 27c7051100..4d17840889 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640601"></script>
-    <script src="../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730290"></script>
+    <script src="../../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../pir/shortcodes/children/children-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -74,6 +74,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -217,8 +218,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../js/theme.js?1694730291" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-2/index.html b/pir/shortcodes/children/children-2/index.html
index 7756989cda..f4f2606a9a 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640598"></script>
-    <script src="../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730288"></script>
+    <script src="../../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../pir/shortcodes/children/children-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -71,28 +71,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../../pir/shortcodes/children/children-2/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="plank 1-1-3 (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../pir/shortcodes/children/children-3/index.html" title="plank 3 (🡐)">
+              <a class="topbar-button-control" href="../../../../pir/shortcodes/children/children-3/index.html" title="plank 3 (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -195,12 +196,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -356,13 +357,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../js/theme.js?1694730290" 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 681be737e0..27bdebc43e 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640601"></script>
-    <script src="../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730290"></script>
+    <script src="../../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../pir/shortcodes/children/children-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -74,6 +74,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -98,8 +99,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../js/theme.js?1694730291" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/index.html b/pir/shortcodes/children/children-3/index.html
index 3dee2bf67c..70d66bfd0d 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640598"></script>
-    <script src="../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730288"></script>
+    <script src="../../../../js/variant.js?1694730288"></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
@@ -52,31 +52,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../pir/shortcodes/children/children-3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages o' this plank</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -86,28 +85,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../../pir/shortcodes/children/children-3/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../pir/shortcodes/children/children-2/index.html" title="plank 2 (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../pir/shortcodes/children/children-3/test3/index.html" title="plank 3-1 (🡐)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -215,12 +215,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -376,13 +376,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../js/theme.js?1694730290" 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 04720b1f96..c5d86a7ff6 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640601"></script>
-    <script src="../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730290"></script>
+    <script src="../../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../pir/shortcodes/children/children-3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -74,6 +74,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -124,8 +125,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../js/theme.js?1694730291" 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 68bf0b1e57..5f08cccd37 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../pir/shortcodes/children/children-3/test3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,28 +72,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../../pir/shortcodes/children/children-3/index.html" title="plank 3 (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../../pir/shortcodes/expand/index.html" title="Expand (🡐)">
+              <a class="topbar-button-control" href="../../../../../pir/shortcodes/expand/index.html" title="Expand (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -195,12 +196,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1694640600" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../../../../../js/search.js?1694640600" defer></script>
+        <script src="../../../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -356,13 +357,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1694640600"></script>
+          <script async src="../../../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../../../../../js/theme.js?1694640600" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../../../js/theme.js?1694730289" 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 9f7bb2e828..581a695fdf 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694640601"></script>
-    <script src="../../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694730290"></script>
+    <script src="../../../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../pir/shortcodes/children/children-3/test3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -75,6 +75,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -98,8 +99,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-4/index.html b/pir/shortcodes/children/children-4/index.html
index 9760241b20..620f51d925 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640598"></script>
-    <script src="../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730288"></script>
+    <script src="../../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../pir/shortcodes/children/children-4/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -70,28 +70,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../../pir/shortcodes/children/children-4/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../pir/shortcodes/children/children-3/test3/index.html" title="plank 3-1 (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../pir/shortcodes/expand/index.html" title="Expand (🡐)">
+              <a class="topbar-button-control" href="../../../../pir/shortcodes/expand/index.html" title="Expand (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -193,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../../js/search.js?1694640601" defer></script>
+        <script src="../../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -355,13 +356,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../js/theme.js?1694730290" 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 701197cef7..f9fc2f8ee3 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640601"></script>
-    <script src="../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730290"></script>
+    <script src="../../../../js/variant.js?1694730290"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../pir/shortcodes/children/children-4/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -96,8 +97,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../../js/theme.js?1694730291" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.html b/pir/shortcodes/children/index.html
index e900881758..e25411d36b 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/children/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -87,9 +86,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -98,28 +97,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/children/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/button/index.html" title="Button (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/button/index.html" title="Button (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/children/test/index.html" title="plank X (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/children/test/index.html" title="plank X (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -410,12 +410,12 @@ So its rrrambl'n be used as descript'n.</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -571,13 +571,13 @@ So its rrrambl'n be used as descript'n.</p>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.print.html b/pir/shortcodes/children/index.print.html
index 7571e3de48..98910011cb 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/children/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -507,8 +508,8 @@ So its rrrambl'n be used as descript'n.</p>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../../js/theme.js?1694730291" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.html b/pir/shortcodes/children/test/index.html
index 0652303ff7..b4d73e7d3a 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640598"></script>
-    <script src="../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730288"></script>
+    <script src="../../../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../pir/shortcodes/children/test/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,28 +72,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../../pir/shortcodes/children/test/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../pir/shortcodes/children/index.html" title="Children (🡒)">
+              <a class="topbar-button-control" href="../../../../pir/shortcodes/children/index.html" title="Children (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../../pir/shortcodes/children/children-1/index.html" title="plank 1 (🡐)">
+              <a class="topbar-button-control" href="../../../../pir/shortcodes/children/children-1/index.html" title="plank 1 (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -194,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694640600" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../../../../js/search.js?1694640600" defer></script>
+        <script src="../../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -355,13 +356,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694640600"></script>
+          <script async src="../../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../../../../js/theme.js?1694640600" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.print.html b/pir/shortcodes/children/test/index.print.html
index a34aee3691..edf320ab38 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640601"></script>
-    <script src="../../../../js/variant.js?1694640601"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730290"></script>
+    <script src="../../../../js/variant.js?1694730290"></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,16 +54,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../pir/shortcodes/children/test/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -75,6 +75,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -97,8 +98,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.html b/pir/shortcodes/expand/index.html
index f5e54fd613..733a45367c 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/expand/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -85,9 +84,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -96,28 +95,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/expand/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/children/children-3/test3/index.html" title="plank 3-1 (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../pir/shortcodes/highlight/index.html" title="Highlight (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/highlight/index.html" title="Highlight (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -129,13 +129,13 @@
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-0773755b5d02bc2abf195deaa9b60279" aria-controls="expandcontent-0773755b5d02bc2abf195deaa9b60279" >
-    <label class="expand-label" for="expand-0773755b5d02bc2abf195deaa9b60279" >
+    <input type="checkbox" id="expand-90fad76af003d218a822e423e7a9abd0" aria-controls="expandcontent-90fad76af003d218a822e423e7a9abd0" >
+    <label class="expand-label" for="expand-90fad76af003d218a822e423e7a9abd0" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-0773755b5d02bc2abf195deaa9b60279" class="expand-content">
+    <div id="expandcontent-90fad76af003d218a822e423e7a9abd0" 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>
@@ -262,26 +262,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-87b8545fc8dd02c27ea8b9b1b2abaf36" aria-controls="expandcontent-87b8545fc8dd02c27ea8b9b1b2abaf36" >
-    <label class="expand-label" for="expand-87b8545fc8dd02c27ea8b9b1b2abaf36" >
+    <input type="checkbox" id="expand-1b15bcf02ad170d22f2649c1fa21372a" aria-controls="expandcontent-1b15bcf02ad170d22f2649c1fa21372a" >
+    <label class="expand-label" for="expand-1b15bcf02ad170d22f2649c1fa21372a" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-87b8545fc8dd02c27ea8b9b1b2abaf36" class="expand-content">
+    <div id="expandcontent-1b15bcf02ad170d22f2649c1fa21372a" 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-d83e0a73221a776567f9fbcda8fa8f3c" aria-controls="expandcontent-d83e0a73221a776567f9fbcda8fa8f3c"  checked>
-    <label class="expand-label" for="expand-d83e0a73221a776567f9fbcda8fa8f3c" >
+    <input type="checkbox" id="expand-e2d5d92e84048a28d9275208acd3fe57" aria-controls="expandcontent-e2d5d92e84048a28d9275208acd3fe57"  checked>
+    <label class="expand-label" for="expand-e2d5d92e84048a28d9275208acd3fe57" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-d83e0a73221a776567f9fbcda8fa8f3c" class="expand-content">
+    <div id="expandcontent-e2d5d92e84048a28d9275208acd3fe57" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -302,13 +302,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-c4a6014835ed1cb5b57bb9a33dc86836" aria-controls="expandcontent-c4a6014835ed1cb5b57bb9a33dc86836" >
-    <label class="expand-label" for="expand-c4a6014835ed1cb5b57bb9a33dc86836" >
+    <input type="checkbox" id="expand-2bd7ee100d9675bdb8fd2bceb52ead2d" aria-controls="expandcontent-2bd7ee100d9675bdb8fd2bceb52ead2d" >
+    <label class="expand-label" for="expand-2bd7ee100d9675bdb8fd2bceb52ead2d" >
         <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-c4a6014835ed1cb5b57bb9a33dc86836" class="expand-content">
+    <div id="expandcontent-2bd7ee100d9675bdb8fd2bceb52ead2d" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -411,12 +411,12 @@ No need t' press ye!</div>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -572,13 +572,13 @@ No need t' press ye!</div>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.print.html b/pir/shortcodes/expand/index.print.html
index fe7aa7bf5e..e1e8e86d3a 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/expand/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -84,13 +85,13 @@
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-0773755b5d02bc2abf195deaa9b60279" aria-controls="expandcontent-0773755b5d02bc2abf195deaa9b60279" >
-    <label class="expand-label" for="expand-0773755b5d02bc2abf195deaa9b60279" >
+    <input type="checkbox" id="expand-90fad76af003d218a822e423e7a9abd0" aria-controls="expandcontent-90fad76af003d218a822e423e7a9abd0" >
+    <label class="expand-label" for="expand-90fad76af003d218a822e423e7a9abd0" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-0773755b5d02bc2abf195deaa9b60279" class="expand-content">
+    <div id="expandcontent-90fad76af003d218a822e423e7a9abd0" 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>
@@ -217,26 +218,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-87b8545fc8dd02c27ea8b9b1b2abaf36" aria-controls="expandcontent-87b8545fc8dd02c27ea8b9b1b2abaf36" >
-    <label class="expand-label" for="expand-87b8545fc8dd02c27ea8b9b1b2abaf36" >
+    <input type="checkbox" id="expand-1b15bcf02ad170d22f2649c1fa21372a" aria-controls="expandcontent-1b15bcf02ad170d22f2649c1fa21372a" >
+    <label class="expand-label" for="expand-1b15bcf02ad170d22f2649c1fa21372a" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-87b8545fc8dd02c27ea8b9b1b2abaf36" class="expand-content">
+    <div id="expandcontent-1b15bcf02ad170d22f2649c1fa21372a" 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-d83e0a73221a776567f9fbcda8fa8f3c" aria-controls="expandcontent-d83e0a73221a776567f9fbcda8fa8f3c"  checked>
-    <label class="expand-label" for="expand-d83e0a73221a776567f9fbcda8fa8f3c" >
+    <input type="checkbox" id="expand-e2d5d92e84048a28d9275208acd3fe57" aria-controls="expandcontent-e2d5d92e84048a28d9275208acd3fe57"  checked>
+    <label class="expand-label" for="expand-e2d5d92e84048a28d9275208acd3fe57" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-d83e0a73221a776567f9fbcda8fa8f3c" class="expand-content">
+    <div id="expandcontent-e2d5d92e84048a28d9275208acd3fe57" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -257,13 +258,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-c4a6014835ed1cb5b57bb9a33dc86836" aria-controls="expandcontent-c4a6014835ed1cb5b57bb9a33dc86836" >
-    <label class="expand-label" for="expand-c4a6014835ed1cb5b57bb9a33dc86836" >
+    <input type="checkbox" id="expand-2bd7ee100d9675bdb8fd2bceb52ead2d" aria-controls="expandcontent-2bd7ee100d9675bdb8fd2bceb52ead2d" >
+    <label class="expand-label" for="expand-2bd7ee100d9675bdb8fd2bceb52ead2d" >
         <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-c4a6014835ed1cb5b57bb9a33dc86836" class="expand-content">
+    <div id="expandcontent-2bd7ee100d9675bdb8fd2bceb52ead2d" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -288,8 +289,8 @@ No need t' press ye!</div>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/highlight/index.html b/pir/shortcodes/highlight/index.html
index 3c79c4bf1e..2c360980d0 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/highlight/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -92,9 +91,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -103,28 +102,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/highlight/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/expand/index.html" title="Expand (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/expand/index.html" title="Expand (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/icon/index.html" title="Icon (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/icon/index.html" title="Icon (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -143,13 +143,13 @@
 <p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="fd9fcd30549b83e8518e156e5ce9408e">
+<div class="tab-panel" data-tab-group="388c768303cbf38aaeec1b8ceed11809">
   <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('fd9fcd30549b83e8518e156e5ce9408e','python')"
+      onclick="switchTab('388c768303cbf38aaeec1b8ceed11809','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -372,13 +372,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="353f9be4d00d8e52955e8497138a8516">
+<div class="tab-panel" data-tab-group="b6f09f29e81d0fa43cc83fc4872ea557">
   <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('353f9be4d00d8e52955e8497138a8516','python')"
+      onclick="switchTab('b6f09f29e81d0fa43cc83fc4872ea557','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -500,12 +500,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -661,13 +661,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/highlight/index.print.html b/pir/shortcodes/highlight/index.print.html
index 0c0818ea6f..16adca224b 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/highlight/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -91,13 +92,13 @@
 <p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="fd9fcd30549b83e8518e156e5ce9408e">
+<div class="tab-panel" data-tab-group="388c768303cbf38aaeec1b8ceed11809">
   <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('fd9fcd30549b83e8518e156e5ce9408e','python')"
+      onclick="switchTab('388c768303cbf38aaeec1b8ceed11809','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -320,13 +321,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="353f9be4d00d8e52955e8497138a8516">
+<div class="tab-panel" data-tab-group="b6f09f29e81d0fa43cc83fc4872ea557">
   <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('353f9be4d00d8e52955e8497138a8516','python')"
+      onclick="switchTab('b6f09f29e81d0fa43cc83fc4872ea557','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -370,8 +371,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/icon/index.html b/pir/shortcodes/icon/index.html
index d0f8f79315..5dc17b1351 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/icon/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -86,9 +85,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -97,28 +96,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/icon/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/highlight/index.html" title="Highlight (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/highlight/index.html" title="Highlight (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/include/index.html" title="Include (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/include/index.html" title="Include (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -334,12 +334,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -495,13 +495,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/icon/index.print.html b/pir/shortcodes/icon/index.print.html
index efad88678d..b206683652 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/icon/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -210,8 +211,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.html b/pir/shortcodes/include/index.html
index f8373493d6..7e5d21fe32 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/include/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -83,9 +82,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -94,28 +93,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/include/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/icon/index.html" title="Icon (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/icon/index.html" title="Icon (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/math/index.html" title="Math (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/math/index.html" title="Math (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -324,12 +324,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -485,13 +485,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.print.html b/pir/shortcodes/include/index.print.html
index d2f0ad5cc8..bb56942818 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/include/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -203,8 +204,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.html b/pir/shortcodes/index.html
index d1ada4f9a9..dd8e5daeee 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../pir/shortcodes/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,28 +69,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../pir/shortcodes/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../pir/cont/taxonomy/index.html" title="Taxonomy (🡒)">
+              <a class="topbar-button-control" href="../../pir/cont/taxonomy/index.html" title="Taxonomy (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../pir/shortcodes/attachments/index.html" title="Attachments (🡐)">
+              <a class="topbar-button-control" href="../../pir/shortcodes/attachments/index.html" title="Attachments (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -211,12 +212,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../js/search.js?1694640601" defer></script>
+        <script src="../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -372,13 +373,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../js/theme.js?1694640601" defer></script>
+    <script src="../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.print.html b/pir/shortcodes/index.print.html
index cffdb58239..adb3dc10c5 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../js/url.js?1694640601"></script>
-    <script src="../../js/variant.js?1694640601"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../js/url.js?1694730290"></script>
+    <script src="../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../pir/shortcodes/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -1369,13 +1370,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-0773755b5d02bc2abf195deaa9b60279" aria-controls="expandcontent-0773755b5d02bc2abf195deaa9b60279" >
-    <label class="expand-label" for="expand-0773755b5d02bc2abf195deaa9b60279" >
+    <input type="checkbox" id="expand-90fad76af003d218a822e423e7a9abd0" aria-controls="expandcontent-90fad76af003d218a822e423e7a9abd0" >
+    <label class="expand-label" for="expand-90fad76af003d218a822e423e7a9abd0" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-0773755b5d02bc2abf195deaa9b60279" class="expand-content">
+    <div id="expandcontent-90fad76af003d218a822e423e7a9abd0" 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>
@@ -1502,26 +1503,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-87b8545fc8dd02c27ea8b9b1b2abaf36" aria-controls="expandcontent-87b8545fc8dd02c27ea8b9b1b2abaf36" >
-    <label class="expand-label" for="expand-87b8545fc8dd02c27ea8b9b1b2abaf36" >
+    <input type="checkbox" id="expand-1b15bcf02ad170d22f2649c1fa21372a" aria-controls="expandcontent-1b15bcf02ad170d22f2649c1fa21372a" >
+    <label class="expand-label" for="expand-1b15bcf02ad170d22f2649c1fa21372a" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-87b8545fc8dd02c27ea8b9b1b2abaf36" class="expand-content">
+    <div id="expandcontent-1b15bcf02ad170d22f2649c1fa21372a" 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-d83e0a73221a776567f9fbcda8fa8f3c" aria-controls="expandcontent-d83e0a73221a776567f9fbcda8fa8f3c"  checked>
-    <label class="expand-label" for="expand-d83e0a73221a776567f9fbcda8fa8f3c" >
+    <input type="checkbox" id="expand-e2d5d92e84048a28d9275208acd3fe57" aria-controls="expandcontent-e2d5d92e84048a28d9275208acd3fe57"  checked>
+    <label class="expand-label" for="expand-e2d5d92e84048a28d9275208acd3fe57" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-d83e0a73221a776567f9fbcda8fa8f3c" class="expand-content">
+    <div id="expandcontent-e2d5d92e84048a28d9275208acd3fe57" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -1542,13 +1543,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-c4a6014835ed1cb5b57bb9a33dc86836" aria-controls="expandcontent-c4a6014835ed1cb5b57bb9a33dc86836" >
-    <label class="expand-label" for="expand-c4a6014835ed1cb5b57bb9a33dc86836" >
+    <input type="checkbox" id="expand-2bd7ee100d9675bdb8fd2bceb52ead2d" aria-controls="expandcontent-2bd7ee100d9675bdb8fd2bceb52ead2d" >
+    <label class="expand-label" for="expand-2bd7ee100d9675bdb8fd2bceb52ead2d" >
         <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-c4a6014835ed1cb5b57bb9a33dc86836" class="expand-content">
+    <div id="expandcontent-2bd7ee100d9675bdb8fd2bceb52ead2d" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -1586,13 +1587,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="fd9fcd30549b83e8518e156e5ce9408e">
+<div class="tab-panel" data-tab-group="388c768303cbf38aaeec1b8ceed11809">
   <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('fd9fcd30549b83e8518e156e5ce9408e','python')"
+      onclick="switchTab('388c768303cbf38aaeec1b8ceed11809','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -1815,13 +1816,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="353f9be4d00d8e52955e8497138a8516">
+<div class="tab-panel" data-tab-group="b6f09f29e81d0fa43cc83fc4872ea557">
   <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('353f9be4d00d8e52955e8497138a8516','python')"
+      onclick="switchTab('b6f09f29e81d0fa43cc83fc4872ea557','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -3386,7 +3387,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-2acd99b2f2203465be78c17119273dbd"
+    id="openapi-f082e496a3b469521b7dfb29a4a3ef58"
     openapi-url="../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -3494,13 +3495,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="fb76e332005f136bc6ef09aa58293a41">
+<div class="tab-panel" data-tab-group="2d45c8491f405981d4e4484d1bb20531">
   <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('fb76e332005f136bc6ef09aa58293a41','configtoml')"
+      onclick="switchTab('2d45c8491f405981d4e4484d1bb20531','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -3538,13 +3539,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="55b5a92e025c5c02f4578b2b628d7c93">
+<div class="tab-panel" data-tab-group="22590859c6811f845c9f8899b93cac2b">
   <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('55b5a92e025c5c02f4578b2b628d7c93','c')"
+      onclick="switchTab('22590859c6811f845c9f8899b93cac2b','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -3658,13 +3659,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="a7db81fde6b576e655625e92509f1a39">
+<div class="tab-panel" data-tab-group="e96d845a9555b1ebe0d03bcf6c474b43">
   <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('a7db81fde6b576e655625e92509f1a39','code')"
+      onclick="switchTab('e96d845a9555b1ebe0d03bcf6c474b43','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -3689,13 +3690,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="7bb61f6e65e60da7cfad9bcb1e8d0879">
+<div class="tab-panel" data-tab-group="1e3ac3d704b5d2ab9979618d25b06d28">
   <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('7bb61f6e65e60da7cfad9bcb1e8d0879','emstrongmixedstrongem')"
+      onclick="switchTab('1e3ac3d704b5d2ab9979618d25b06d28','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -3743,13 +3744,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="ac485a364ccc1ac3230d8b295ee25945">
+<div class="tab-panel" data-tab-group="5e61850b4120e110955e46f4a8e00a69">
   <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('ac485a364ccc1ac3230d8b295ee25945','just-colored-style')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -3759,7 +3760,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('ac485a364ccc1ac3230d8b295ee25945','just-color')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -3769,7 +3770,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('ac485a364ccc1ac3230d8b295ee25945','default-style-and-color')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style an' color</div>
@@ -3779,7 +3780,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('ac485a364ccc1ac3230d8b295ee25945','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','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>
@@ -3789,7 +3790,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('ac485a364ccc1ac3230d8b295ee25945','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','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>
@@ -3862,13 +3863,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="bad26d6658363c3202297394ba893b90">
+<div class="tab-panel" data-tab-group="bc299bc3cf1fc4c0415addbab5968c9c">
   <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('bad26d6658363c3202297394ba893b90','py')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -3878,7 +3879,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bad26d6658363c3202297394ba893b90','sh')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -3888,7 +3889,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bad26d6658363c3202297394ba893b90','c')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -4045,13 +4046,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="ed02acb92a8b7a272e255eca638e292c">
+<div class="tab-panel" data-tab-group="76dc28f0994c3a7cbeb59d917b9c9f71">
   <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('ed02acb92a8b7a272e255eca638e292c','group-a-tab-view-1')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -4061,7 +4062,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('ed02acb92a8b7a272e255eca638e292c','group-a-tab-view-2')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -4071,7 +4072,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('ed02acb92a8b7a272e255eca638e292c','group-b')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -4471,8 +4472,8 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640602" defer></script>
+    <script src="../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730291" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -4501,27 +4502,27 @@ Electricity grid,H2 conversion,27.14
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1694640602"></script>
-    <script src="../../js/d3/d3-color.min.js?1694640602" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694640602" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694640602" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694640602" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694640602" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694640602" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694640602" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694640602" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694640602" defer></script>
-    <script src="../../js/js-yaml.min.js?1694640602" defer></script>
-    <script src="../../js/mermaid.min.js?1694640602" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1694730291"></script>
+    <script src="../../js/d3/d3-color.min.js?1694730291" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694730291" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694730291" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694730291" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694730291" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694730291" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694730291" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694730291" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694730291" defer></script>
+    <script src="../../js/js-yaml.min.js?1694730291" defer></script>
+    <script src="../../js/mermaid.min.js?1694730291" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694640602" defer></script>
-    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694640602" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694730291" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694730291" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694640602", assetsBuster:  1694640602  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694730291", assetsBuster:  1694730291  };
     </script>
-    <script src="../../js/theme.js?1694640602" defer></script>
+    <script src="../../js/theme.js?1694730291" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/math/index.html b/pir/shortcodes/math/index.html
index 626299be85..49945958a9 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/math/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -92,9 +91,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -103,28 +102,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/math/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/include/index.html" title="Include (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/include/index.html" title="Include (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/mermaid/index.html" title="Merrrmaid (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/mermaid/index.html" title="Merrrmaid (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -391,12 +391,12 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -552,13 +552,13 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -587,7 +587,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?1694640599"></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1694730289"></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/math/index.print.html b/pir/shortcodes/math/index.print.html
index b4a627d92f..d36c3d1b85 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/math/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -261,8 +262,8 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -291,7 +292,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?1694640601"></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1694730290"></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.html b/pir/shortcodes/mermaid/index.html
index 9dd8889fd6..f7c618d44a 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/mermaid/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -103,9 +102,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -114,28 +113,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/mermaid/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/math/index.html" title="Math (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/math/index.html" title="Math (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/notice/index.html" title="Notice (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/notice/index.html" title="Notice (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -857,12 +857,12 @@ Electricity grid,H2 conversion,27.14
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../../../js/search.js?1694640600" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1018,27 +1018,27 @@ Electricity grid,H2 conversion,27.14
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640600"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1694640600" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1694640600" defer></script>
-    <script src="../../../js/js-yaml.min.js?1694640600" defer></script>
-    <script src="../../../js/mermaid.min.js?1694640600" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1694730289" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1694730289" defer></script>
+    <script src="../../../js/js-yaml.min.js?1694730289" defer></script>
+    <script src="../../../js/mermaid.min.js?1694730289" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1694640600" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.print.html b/pir/shortcodes/mermaid/index.print.html
index e2395c1f8f..8f3c7d67b9 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/mermaid/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -716,22 +717,22 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1694640601" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1694640601" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1694640601" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1694640601" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1694640601" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1694640601" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1694640601" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1694640601" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1694640601" defer></script>
-    <script src="../../../js/js-yaml.min.js?1694640601" defer></script>
-    <script src="../../../js/mermaid.min.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1694730290" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1694730290" defer></script>
+    <script src="../../../js/js-yaml.min.js?1694730290" defer></script>
+    <script src="../../../js/mermaid.min.js?1694730290" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.html b/pir/shortcodes/notice/index.html
index a84cc61d38..eaab622d83 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/notice/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -87,9 +86,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -98,28 +97,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/notice/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/mermaid/index.html" title="Merrrmaid (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/mermaid/index.html" title="Merrrmaid (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/openapi/index.html" title="OpenAPI (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/openapi/index.html" title="OpenAPI (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -555,12 +555,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -716,13 +716,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.print.html b/pir/shortcodes/notice/index.print.html
index f7ce374e0b..e9c1c8040d 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/notice/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -430,8 +431,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/openapi/index.html b/pir/shortcodes/openapi/index.html
index 2b87219722..e5fcae1c5f 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/openapi/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -83,9 +82,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -94,28 +93,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/openapi/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/notice/index.html" title="Notice (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/notice/index.html" title="Notice (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/siteparam/index.html" title="SiteParam (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/siteparam/index.html" title="SiteParam (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -212,7 +212,7 @@
 <div class="sc-openapi-wrapper is-load'n helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-2acd99b2f2203465be78c17119273dbd"
+    id="openapi-f082e496a3b469521b7dfb29a4a3ef58"
     openapi-url="../../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -304,12 +304,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -465,19 +465,19 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1694640601" defer></script>
-    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1694640601" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1694730290" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1694730290" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694640601", assetsBuster:  1694640601  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694730290", assetsBuster:  1694730290  };
     </script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/openapi/index.print.html b/pir/shortcodes/openapi/index.print.html
index 8c9c17005c..eb1cdbd876 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/openapi/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -169,7 +170,7 @@
 <div class="sc-openapi-wrapper is-load'n helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-2acd99b2f2203465be78c17119273dbd"
+    id="openapi-f082e496a3b469521b7dfb29a4a3ef58"
     openapi-url="../../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -183,14 +184,14 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640602" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730291" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1694640602" defer></script>
-    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1694640602" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1694730291" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1694730291" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694640602", assetsBuster:  1694640602  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694730291", assetsBuster:  1694730291  };
     </script>
-    <script src="../../../js/theme.js?1694640602" defer></script>
+    <script src="../../../js/theme.js?1694730291" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.html b/pir/shortcodes/siteparam/index.html
index 9fb7eb4e17..d589e4afbf 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/siteparam/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -84,9 +83,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -95,28 +94,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/siteparam/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/openapi/index.html" title="OpenAPI (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/openapi/index.html" title="OpenAPI (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/tab/index.html" title="Tab (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/tab/index.html" title="Tab (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -216,13 +216,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="fb76e332005f136bc6ef09aa58293a41">
+<div class="tab-panel" data-tab-group="2d45c8491f405981d4e4484d1bb20531">
   <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('fb76e332005f136bc6ef09aa58293a41','configtoml')"
+      onclick="switchTab('2d45c8491f405981d4e4484d1bb20531','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -331,12 +331,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640599" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640599" defer></script>
-        <script src="../../../js/search.js?1694640599" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -492,13 +492,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640599"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640599" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640599" defer></script>
-    <script src="../../../js/theme.js?1694640599" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.print.html b/pir/shortcodes/siteparam/index.print.html
index 97e455f2f1..7e46dcc130 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/siteparam/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -172,13 +173,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="fb76e332005f136bc6ef09aa58293a41">
+<div class="tab-panel" data-tab-group="2d45c8491f405981d4e4484d1bb20531">
   <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('fb76e332005f136bc6ef09aa58293a41','configtoml')"
+      onclick="switchTab('2d45c8491f405981d4e4484d1bb20531','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -209,8 +210,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tab/index.html b/pir/shortcodes/tab/index.html
index 6f9482790d..f6219c9ecc 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/tab/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -85,9 +84,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -96,28 +95,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/tab/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/siteparam/index.html" title="SiteParam (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/siteparam/index.html" title="SiteParam (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../pir/shortcodes/tabs/index.html" title="Tabs (🡐)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/tabs/index.html" title="Tabs (🡐)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -130,13 +130,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="55b5a92e025c5c02f4578b2b628d7c93">
+<div class="tab-panel" data-tab-group="22590859c6811f845c9f8899b93cac2b">
   <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('55b5a92e025c5c02f4578b2b628d7c93','c')"
+      onclick="switchTab('22590859c6811f845c9f8899b93cac2b','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -250,13 +250,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="a7db81fde6b576e655625e92509f1a39">
+<div class="tab-panel" data-tab-group="e96d845a9555b1ebe0d03bcf6c474b43">
   <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('a7db81fde6b576e655625e92509f1a39','code')"
+      onclick="switchTab('e96d845a9555b1ebe0d03bcf6c474b43','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -281,13 +281,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="7bb61f6e65e60da7cfad9bcb1e8d0879">
+<div class="tab-panel" data-tab-group="1e3ac3d704b5d2ab9979618d25b06d28">
   <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('7bb61f6e65e60da7cfad9bcb1e8d0879','emstrongmixedstrongem')"
+      onclick="switchTab('1e3ac3d704b5d2ab9979618d25b06d28','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -335,13 +335,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="ac485a364ccc1ac3230d8b295ee25945">
+<div class="tab-panel" data-tab-group="5e61850b4120e110955e46f4a8e00a69">
   <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('ac485a364ccc1ac3230d8b295ee25945','just-colored-style')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -351,7 +351,7 @@
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('ac485a364ccc1ac3230d8b295ee25945','just-color')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -361,7 +361,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('ac485a364ccc1ac3230d8b295ee25945','default-style-and-color')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style an' color</div>
@@ -371,7 +371,7 @@
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('ac485a364ccc1ac3230d8b295ee25945','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','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>
@@ -381,7 +381,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('ac485a364ccc1ac3230d8b295ee25945','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','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>
@@ -525,12 +525,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../../../js/search.js?1694640600" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -686,13 +686,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640600"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../../../js/theme.js?1694640600" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tab/index.print.html b/pir/shortcodes/tab/index.print.html
index d3e1d2f59c..acfde66e52 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/tab/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -85,13 +86,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="55b5a92e025c5c02f4578b2b628d7c93">
+<div class="tab-panel" data-tab-group="22590859c6811f845c9f8899b93cac2b">
   <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('55b5a92e025c5c02f4578b2b628d7c93','c')"
+      onclick="switchTab('22590859c6811f845c9f8899b93cac2b','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -205,13 +206,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="a7db81fde6b576e655625e92509f1a39">
+<div class="tab-panel" data-tab-group="e96d845a9555b1ebe0d03bcf6c474b43">
   <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('a7db81fde6b576e655625e92509f1a39','code')"
+      onclick="switchTab('e96d845a9555b1ebe0d03bcf6c474b43','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -236,13 +237,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="7bb61f6e65e60da7cfad9bcb1e8d0879">
+<div class="tab-panel" data-tab-group="1e3ac3d704b5d2ab9979618d25b06d28">
   <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('7bb61f6e65e60da7cfad9bcb1e8d0879','emstrongmixedstrongem')"
+      onclick="switchTab('1e3ac3d704b5d2ab9979618d25b06d28','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -290,13 +291,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="ac485a364ccc1ac3230d8b295ee25945">
+<div class="tab-panel" data-tab-group="5e61850b4120e110955e46f4a8e00a69">
   <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('ac485a364ccc1ac3230d8b295ee25945','just-colored-style')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -306,7 +307,7 @@
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('ac485a364ccc1ac3230d8b295ee25945','just-color')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -316,7 +317,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('ac485a364ccc1ac3230d8b295ee25945','default-style-and-color')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style an' color</div>
@@ -326,7 +327,7 @@
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('ac485a364ccc1ac3230d8b295ee25945','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','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>
@@ -336,7 +337,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('ac485a364ccc1ac3230d8b295ee25945','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('5e61850b4120e110955e46f4a8e00a69','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>
@@ -402,8 +403,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.html b/pir/shortcodes/tabs/index.html
index a5e4ba44e7..f654245416 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/tabs/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -84,9 +83,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -95,28 +94,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../pir/shortcodes/tabs/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../pir/shortcodes/tab/index.html" title="Tab (🡒)">
+              <a class="topbar-button-control" href="../../../pir/shortcodes/tab/index.html" title="Tab (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -129,13 +129,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="bad26d6658363c3202297394ba893b90">
+<div class="tab-panel" data-tab-group="bc299bc3cf1fc4c0415addbab5968c9c">
   <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('bad26d6658363c3202297394ba893b90','py')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -145,7 +145,7 @@
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bad26d6658363c3202297394ba893b90','sh')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -155,7 +155,7 @@
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bad26d6658363c3202297394ba893b90','c')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -312,13 +312,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="ed02acb92a8b7a272e255eca638e292c">
+<div class="tab-panel" data-tab-group="76dc28f0994c3a7cbeb59d917b9c9f71">
   <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('ed02acb92a8b7a272e255eca638e292c','group-a-tab-view-1')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -328,7 +328,7 @@
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('ed02acb92a8b7a272e255eca638e292c','group-a-tab-view-2')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -338,7 +338,7 @@
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('ed02acb92a8b7a272e255eca638e292c','group-b')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -815,12 +815,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640600" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640600" defer></script>
-        <script src="../../../js/search.js?1694640600" defer></script>
+        <script src="../../../js/auto-complete.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730289" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730289" defer></script>
+        <script src="../../../js/search.js?1694730289" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -976,13 +976,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640600"></script>
+          <script async src="../../../js/github-buttons.js?1694730289"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640600" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640600" defer></script>
-    <script src="../../../js/theme.js?1694640600" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730289" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730289" defer></script>
+    <script src="../../../js/theme.js?1694730289" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.print.html b/pir/shortcodes/tabs/index.print.html
index a79bc5f33a..31c8a4b36e 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../../js/url.js?1694640601"></script>
-    <script src="../../../js/variant.js?1694640601"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../../js/url.js?1694730290"></script>
+    <script src="../../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/shortcodes/tabs/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -85,13 +86,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="bad26d6658363c3202297394ba893b90">
+<div class="tab-panel" data-tab-group="bc299bc3cf1fc4c0415addbab5968c9c">
   <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('bad26d6658363c3202297394ba893b90','py')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -101,7 +102,7 @@
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bad26d6658363c3202297394ba893b90','sh')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -111,7 +112,7 @@
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('bad26d6658363c3202297394ba893b90','c')"
+      onclick="switchTab('bc299bc3cf1fc4c0415addbab5968c9c','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -268,13 +269,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="ed02acb92a8b7a272e255eca638e292c">
+<div class="tab-panel" data-tab-group="76dc28f0994c3a7cbeb59d917b9c9f71">
   <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('ed02acb92a8b7a272e255eca638e292c','group-a-tab-view-1')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -284,7 +285,7 @@
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('ed02acb92a8b7a272e255eca638e292c','group-a-tab-view-2')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -294,7 +295,7 @@
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('ed02acb92a8b7a272e255eca638e292c','group-b')"
+      onclick="switchTab('76dc28f0994c3a7cbeb59d917b9c9f71','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -693,8 +694,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/showcase/index.html b/pir/showcase/index.html
index 98e5dc0b86..6085af6955 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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
@@ -52,33 +52,32 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../pir/showcase/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#gobolinux-wikihttpswikigobolinuxorg-by-neonsysorg"><a href="https://wiki.gobolinux.org/">GoboLinux Wiki</a> by NEONsys.org</a></li>
     <li><a href="#bitshttpsbits-trainingdetraining-by-dr-lutz-gollan"><a href="https://bits-train'n.de/training/">BITS</a> by Dr. Lutz Gollan</a></li>
     <li><a href="#pamasol-electricshttpspamasolgithubiode-by-pamasol"><a href="https://pamasol.github.io/de/">Pamasol Electrics</a> by Pamasol</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -86,28 +85,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../pir/showcase/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../pir/shortcodes/tabs/index.html" title="Tabs (🡒)">
+              <a class="topbar-button-control" href="../../pir/shortcodes/tabs/index.html" title="Tabs (🡒)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -117,14 +117,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-bc0d7cfb061373cb89c936f6d7b41817" 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-bc0d7cfb061373cb89c936f6d7b41817"><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-c0a493858820c82a29afb91a28b8170e" 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-c0a493858820c82a29afb91a28b8170e"><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-ecab30c0880be6c0361658ada5683887" 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-ecab30c0880be6c0361658ada5683887"><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-e377cdf4c1332992d14bc0a7e5b0f781" 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-e377cdf4c1332992d14bc0a7e5b0f781"><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-21a110db95a0960d6e6c4fdaabebebf7" 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-21a110db95a0960d6e6c4fdaabebebf7"><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-dfa6c39496cbc1f2545fdfe461b06b5c" 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-dfa6c39496cbc1f2545fdfe461b06b5c"><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">
@@ -213,12 +213,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../js/search.js?1694640601" defer></script>
+        <script src="../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -374,13 +374,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../js/theme.js?1694640601" defer></script>
+    <script src="../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/showcase/index.print.html b/pir/showcase/index.print.html
index 6e3c70a1bf..3234585562 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640601" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640601" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640601" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640601" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640601" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640601" rel="stylesheet">
-    <link href="../../css/print.css?1694640601" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640601" rel="stylesheet">
-    <link href="../../css/ie.css?1694640601" rel="stylesheet">
-    <script src="../../js/url.js?1694640601"></script>
-    <script src="../../js/variant.js?1694640601"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730290" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730290" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730290" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730290" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730290" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730290" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730290" rel="stylesheet">
+    <link href="../../css/print.css?1694730290" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730290" rel="stylesheet">
+    <link href="../../css/ie.css?1694730290" rel="stylesheet">
+    <script src="../../js/url.js?1694730290"></script>
+    <script src="../../js/variant.js?1694730290"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../pir/showcase/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -81,14 +82,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-bc0d7cfb061373cb89c936f6d7b41817" 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-bc0d7cfb061373cb89c936f6d7b41817"><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-c0a493858820c82a29afb91a28b8170e" 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-c0a493858820c82a29afb91a28b8170e"><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-ecab30c0880be6c0361658ada5683887" 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-ecab30c0880be6c0361658ada5683887"><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-e377cdf4c1332992d14bc0a7e5b0f781" 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-e377cdf4c1332992d14bc0a7e5b0f781"><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-21a110db95a0960d6e6c4fdaabebebf7" 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-21a110db95a0960d6e6c4fdaabebebf7"><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-dfa6c39496cbc1f2545fdfe461b06b5c" 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-dfa6c39496cbc1f2545fdfe461b06b5c"><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">
@@ -99,8 +100,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640602" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640602" defer></script>
-    <script src="../../js/theme.js?1694640602" defer></script>
+    <script src="../../js/clipboard.min.js?1694730291" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730291" defer></script>
+    <script src="../../js/theme.js?1694730291" defer></script>
   </body>
 </html>
diff --git a/pir/tags/children/index.html b/pir/tags/children/index.html
index 70b413c1f8..5d3f47bca0 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/tags/children/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -189,12 +190,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -350,13 +351,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/tags/config/index.html b/pir/tags/config/index.html
index 1a82a445d1..d349b98fad 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/tags/config/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/tags/content/index.html b/pir/tags/content/index.html
index 13627be60d..6a7be4137e 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/tags/content/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/tags/documentatn/index.html b/pir/tags/documentatn/index.html
index 01ba246d33..d1150e7e21 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -48,16 +48,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/tags/documentatn/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -66,18 +66,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -172,12 +173,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -332,13 +333,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/tags/hidden/index.html b/pir/tags/hidden/index.html
index d505c1ff96..727cb0c818 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/tags/hidden/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -179,12 +180,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -340,13 +341,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/tags/index.html b/pir/tags/index.html
index 0b237b9f20..9e041435c7 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,24 +51,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../pir/tags/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#c">C</a></li>
     <li><a href="#d">D</a></li>
@@ -77,9 +76,9 @@
     <li><a href="#t">T</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,18 +86,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -212,12 +212,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../js/search.js?1694640601" defer></script>
+        <script src="../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -373,13 +373,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../js/theme.js?1694640601" defer></script>
+    <script src="../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/tags/non-hidden/index.html b/pir/tags/non-hidden/index.html
index e28019a279..ac8c0a28d8 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/tags/non-hidden/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -183,12 +184,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -344,13 +345,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/pir/tags/tutorrrial/index.html b/pir/tags/tutorrrial/index.html
index 50753f270a..66e94d118c 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?1694640598" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730288" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -48,16 +48,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/tags/tutorrrial/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -66,18 +66,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../../pir/index.html" title="Cap&#39;n Hugo Relearrrn Theme (🡒)">
+              <a class="topbar-button-control" 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-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -172,12 +173,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640601" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640601" defer></script>
-        <script src="../../../js/search.js?1694640601" defer></script>
+        <script src="../../../js/auto-complete.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730290" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730290" defer></script>
+        <script src="../../../js/search.js?1694730290" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -332,13 +333,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640601"></script>
+          <script async src="../../../js/github-buttons.js?1694730290"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640601" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640601" defer></script>
-    <script src="../../../js/theme.js?1694640601" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730290" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730290" defer></script>
+    <script src="../../../js/theme.js?1694730290" defer></script>
   </body>
 </html>
diff --git a/search.html b/search.html
index 036edcf223..7208b150ad 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="./css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="./css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1694640598" rel="stylesheet">
-    <link href="./css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="./css/variant.css?1694640598" rel="stylesheet">
-    <link href="./css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="./css/ie.css?1694640598" rel="stylesheet">
-    <script src="./js/url.js?1694640598"></script>
-    <script src="./js/variant.js?1694640598"></script>
+    <link href="./css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="./css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="./css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1694730288" rel="stylesheet">
+    <link href="./css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="./css/variant.css?1694730288" rel="stylesheet">
+    <link href="./css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="./css/ie.css?1694730288" rel="stylesheet">
+    <script src="./js/url.js?1694730288"></script>
+    <script src="./js/variant.js?1694730288"></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,34 +51,35 @@
   </head>
   <body class="mobile-support searchpage disableInlineCopyToClipboard" data-url="./index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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 class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="./index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="./index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable home" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -189,12 +190,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="./js/auto-complete.js?1694640598" defer></script>
-        <script src="./js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="./js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="./js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="./js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="./js/search.js?1694640598" defer></script>
+        <script src="./js/auto-complete.js?1694730288" defer></script>
+        <script src="./js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="./js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="./js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="./js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="./js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -350,13 +351,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="./js/github-buttons.js?1694640598"></script>
+          <script async src="./js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="./js/clipboard.min.js?1694640598" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="./js/theme.js?1694640598" defer></script>
+    <script src="./js/clipboard.min.js?1694730288" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="./js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.html b/shortcodes/attachments/index.html
index 29701d92cd..67b5566d19 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/attachments/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -92,9 +91,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -103,28 +102,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/attachments/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/index.html" title="Shortcodes (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/index.html" title="Shortcodes (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/badge/index.html" title="Badge (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/badge/index.html" title="Badge (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -466,12 +466,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -627,13 +627,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.print.html b/shortcodes/attachments/index.print.html
index c25c010ab0..5102812192 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/attachments/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -336,8 +337,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/badge/index.html b/shortcodes/badge/index.html
index 70f09ffd57..4e967f8e80 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/badge/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -85,9 +84,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -96,28 +95,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/badge/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/attachments/index.html" title="Attachments (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/attachments/index.html" title="Attachments (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/button/index.html" title="Button (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/button/index.html" title="Button (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -405,12 +405,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -566,13 +566,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/badge/index.print.html b/shortcodes/badge/index.print.html
index e61964815d..8cabd33abc 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/badge/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -282,8 +283,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.html b/shortcodes/button/index.html
index 2f16264187..9095c10e37 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/button/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -86,9 +85,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -97,28 +96,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/button/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/badge/index.html" title="Badge (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/badge/index.html" title="Badge (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/children/index.html" title="Children (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/children/index.html" title="Children (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -545,12 +545,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -706,13 +706,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.print.html b/shortcodes/button/index.print.html
index e72d3df732..47cacd3b42 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/button/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -421,8 +422,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" 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 5b05c9ac00..72c7565ff1 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1694640597"></script>
-    <script src="../../../../../../../../js/variant.js?1694640597"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1694730287"></script>
+    <script src="../../../../../../../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../../../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">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -75,28 +75,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-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) (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡒)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -196,12 +197,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../../../../../../js/search.js?1694640598" defer></script>
+        <script src="../../../../../../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../../../../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -361,13 +362,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../../../../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../../../../js/theme.js?1694730288" 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 fe86f9d7a0..b3b6b4e93d 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../../../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">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -78,6 +78,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -99,8 +100,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../../../../js/theme.js?1694730288" 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 8266ef56cc..8544d96ba0 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694640597"></script>
-    <script src="../../../../../../../js/variant.js?1694640597"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694730287"></script>
+    <script src="../../../../../../../js/variant.js?1694730287"></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,31 +51,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages of this page</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -89,28 +88,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-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 (🡐)">
+              <a class="topbar-button-control" 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-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 (🡒)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -216,12 +216,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../../../../../js/search.js?1694640598" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../../../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -381,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../../../js/theme.js?1694730288" 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 f106271270..e2bfaad990 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -77,6 +77,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -123,8 +124,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../../../js/theme.js?1694730288" 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 c58e5c3fb8..79e42921b0 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640597"></script>
-    <script src="../../../../../../js/variant.js?1694640597"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730287"></script>
+    <script src="../../../../../../js/variant.js?1694730287"></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,31 +51,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages of this page</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -88,28 +87,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" title="page 1-1-1 (hidden) (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡒)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -215,12 +215,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/search.js?1694640598" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -378,13 +378,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/theme.js?1694730288" 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 5fe2791bb4..adf3799d85 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -76,6 +76,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -106,8 +107,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/theme.js?1694730288" 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 3c2ab1202f..81cff60b02 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694640597"></script>
-    <script src="../../../../../js/variant.js?1694640597"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694730287"></script>
+    <script src="../../../../../js/variant.js?1694730287"></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,31 +51,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages of this page</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,28 +86,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../../shortcodes/children/children-1/children-1-1/index.html" title="page 1-1 (🡐)">
+              <a class="topbar-button-control" 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-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 (🡒)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -214,12 +214,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../../../js/search.js?1694640598" defer></script>
+        <script src="../../../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -377,13 +377,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../js/theme.js?1694730288" 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 4c6c433d17..db54e4bf5d 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -75,6 +75,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -130,8 +131,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../js/theme.js?1694730288" 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 e5e5e0b075..f92a148996 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640597"></script>
-    <script src="../../../../../../js/variant.js?1694640597"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730287"></script>
+    <script src="../../../../../../js/variant.js?1694730287"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -74,28 +74,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡐)">
+              <a class="topbar-button-control" 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-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 (🡒)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -195,12 +196,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/search.js?1694640598" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -356,13 +357,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/theme.js?1694730288" 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 f47502e219..6df0a36c9e 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -77,6 +77,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -98,8 +99,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/theme.js?1694730288" 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 8761a4ad24..d6c727a126 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640597"></script>
-    <script src="../../../../../../js/variant.js?1694640597"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730287"></script>
+    <script src="../../../../../../js/variant.js?1694730287"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -74,28 +74,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-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 (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="page 1-1-3 (🡒)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -195,12 +196,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../../../../js/search.js?1694640598" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -356,13 +357,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/theme.js?1694730288" 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 6bbdb743b3..a5842e54ec 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -77,6 +77,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -98,8 +99,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../../js/theme.js?1694730288" 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 ab90ef8061..d53c40d1fb 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694640597"></script>
-    <script src="../../../../../js/variant.js?1694640597"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694730287"></script>
+    <script src="../../../../../js/variant.js?1694730287"></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
@@ -52,31 +52,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages of this page</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -88,28 +87,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../../shortcodes/children/children-1/children-1-1/index.html" title="page 1-1 (🡐)">
+              <a class="topbar-button-control" 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-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 (🡒)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -216,12 +216,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../../../js/search.js?1694640598" defer></script>
+        <script src="../../../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -377,13 +377,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../js/theme.js?1694730288" 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 7af9a44a9c..2ebf491ba0 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -76,6 +76,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -139,8 +140,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../js/theme.js?1694730288" 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 69c780aec9..6a1ee0e02a 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694640597"></script>
-    <script src="../../../../../js/variant.js?1694640597"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694730287"></script>
+    <script src="../../../../../js/variant.js?1694730287"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,28 +73,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-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 (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../../shortcodes/children/children-2/index.html" title="page 2 (🡒)">
+              <a class="topbar-button-control" href="../../../../../shortcodes/children/children-2/index.html" title="page 2 (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -194,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../../../js/search.js?1694640598" defer></script>
+        <script src="../../../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -355,13 +356,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../js/theme.js?1694730288" 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 857bf82b2b..e9a2c41487 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../../js/url.js?1694640598"></script>
-    <script src="../../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../../js/url.js?1694730288"></script>
+    <script src="../../../../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -76,6 +76,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -97,8 +98,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../../js/theme.js?1694730288" 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 7e48ba840d..482481659f 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640597"></script>
-    <script src="../../../../js/variant.js?1694640597"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730287"></script>
+    <script src="../../../../js/variant.js?1694730287"></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
@@ -52,31 +52,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../shortcodes/children/children-1/children-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages of this page</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,28 +86,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 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)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../shortcodes/children/children-1/index.html" title="page 1 (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" title="page 1-1-2 (🡒)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -216,12 +216,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../../js/search.js?1694640598" defer></script>
+        <script src="../../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -377,13 +377,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../js/theme.js?1694730288" 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 04cccc8325..6b7329ab0a 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640598"></script>
-    <script src="../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730288"></script>
+    <script src="../../../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../shortcodes/children/children-1/children-1-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -75,6 +75,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -181,8 +182,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.html b/shortcodes/children/children-1/index.html
index f42ead8d0e..76db294fb0 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../js/url.js?1694640597"></script>
-    <script src="../../../js/variant.js?1694640597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../js/url.js?1694730287"></script>
+    <script src="../../../js/variant.js?1694730287"></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
@@ -52,31 +52,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../shortcodes/children/children-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages of this page</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -86,28 +85,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../shortcodes/children/children-1/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../shortcodes/children/test/index.html" title="page X (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../shortcodes/children/children-1/children-1-1/index.html" title="page 1-1 (🡒)">
+              <a class="topbar-button-control" 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>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -213,12 +213,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../js/search.js?1694640598" defer></script>
+        <script src="../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -374,13 +374,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.print.html b/shortcodes/children/children-1/index.print.html
index 23dea2ecd4..7a7f5f7310 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../shortcodes/children/children-1/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -74,6 +74,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -205,8 +206,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.html b/shortcodes/children/children-2/index.html
index 13445b5698..c12a7f6d35 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../js/url.js?1694640597"></script>
-    <script src="../../../js/variant.js?1694640597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../js/url.js?1694730287"></script>
+    <script src="../../../js/variant.js?1694730287"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../shortcodes/children/children-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -71,28 +71,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../shortcodes/children/children-2/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" title="page 1-1-3 (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../shortcodes/children/children-3/index.html" title="page 3 (🡒)">
+              <a class="topbar-button-control" href="../../../shortcodes/children/children-3/index.html" title="page 3 (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -193,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../js/search.js?1694640598" defer></script>
+        <script src="../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -354,13 +355,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.print.html b/shortcodes/children/children-2/index.print.html
index 27dbf91c1d..c4631815a3 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../shortcodes/children/children-2/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -74,6 +74,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -96,8 +97,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.html b/shortcodes/children/children-3/index.html
index 6e472e7dcb..a5a2a00199 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../js/url.js?1694640597"></script>
-    <script src="../../../js/variant.js?1694640597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../js/url.js?1694730287"></script>
+    <script src="../../../js/variant.js?1694730287"></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
@@ -52,31 +52,30 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../shortcodes/children/children-3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#subpages-of-this-page">Subpages of this page</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -86,28 +85,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../shortcodes/children/children-3/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../shortcodes/children/children-2/index.html" title="page 2 (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../shortcodes/children/children-3/test3/index.html" title="page 3-1 (🡒)">
+              <a class="topbar-button-control" href="../../../shortcodes/children/children-3/test3/index.html" title="page 3-1 (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -213,12 +213,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../js/search.js?1694640598" defer></script>
+        <script src="../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -374,13 +374,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.print.html b/shortcodes/children/children-3/index.print.html
index 0438953d52..b452fce719 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../shortcodes/children/children-3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -74,6 +74,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -120,8 +121,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/test3/index.html b/shortcodes/children/children-3/test3/index.html
index 79180b7a15..3b81774d87 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640597"></script>
-    <script src="../../../../js/variant.js?1694640597"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730287"></script>
+    <script src="../../../../js/variant.js?1694730287"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../../shortcodes/children/children-3/test3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,28 +72,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../../shortcodes/children/children-3/test3/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../../shortcodes/children/children-3/index.html" title="page 3 (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../../shortcodes/expand/index.html" title="Expand (🡒)">
+              <a class="topbar-button-control" href="../../../../shortcodes/expand/index.html" title="Expand (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -193,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../../../js/search.js?1694640597" defer></script>
+        <script src="../../../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -354,13 +355,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../../../js/theme.js?1694640597" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../../../js/theme.js?1694730287" 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 841922b557..67f13664dc 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../../js/url.js?1694640598"></script>
-    <script src="../../../../js/variant.js?1694640598"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../../js/url.js?1694730288"></script>
+    <script src="../../../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../../shortcodes/children/children-3/test3/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -75,6 +75,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -96,8 +97,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.html b/shortcodes/children/children-4/index.html
index cc5d990f57..1cf65a5835 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../js/url.js?1694640597"></script>
-    <script src="../../../js/variant.js?1694640597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../js/url.js?1694730287"></script>
+    <script src="../../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../shortcodes/children/children-4/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -70,28 +70,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../shortcodes/children/children-4/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../shortcodes/children/children-3/test3/index.html" title="page 3-1 (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../../shortcodes/expand/index.html" title="Expand (🡒)">
+              <a class="topbar-button-control" href="../../../shortcodes/expand/index.html" title="Expand (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -191,12 +192,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../../js/search.js?1694640598" defer></script>
+        <script src="../../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -353,13 +354,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.print.html b/shortcodes/children/children-4/index.print.html
index 563b20c2e8..eeeb8332fd 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../shortcodes/children/children-4/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -94,8 +95,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.html b/shortcodes/children/index.html
index 875e4baf3f..a449e7efa0 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/children/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -87,9 +86,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -98,28 +97,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/children/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/button/index.html" title="Button (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/button/index.html" title="Button (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/children/test/index.html" title="page X (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/children/test/index.html" title="page X (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -408,12 +408,12 @@ So its content is used as description.</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -569,13 +569,13 @@ So its content is used as description.</p>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.print.html b/shortcodes/children/index.print.html
index e6f51d67b5..60eb9b077c 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/children/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -485,8 +486,8 @@ So its content is used as description.</p>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.html b/shortcodes/children/test/index.html
index df411e3ec4..d6ce78d9b0 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../../js/url.js?1694640597"></script>
-    <script src="../../../js/variant.js?1694640597"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../../js/url.js?1694730287"></script>
+    <script src="../../../js/variant.js?1694730287"></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,16 +53,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../shortcodes/children/test/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,28 +72,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../../shortcodes/children/test/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../../shortcodes/children/index.html" title="Children (🡐)">
+              <a class="topbar-button-control" href="../../../shortcodes/children/index.html" title="Children (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../../shortcodes/children/children-1/index.html" title="page 1 (🡒)">
+              <a class="topbar-button-control" href="../../../shortcodes/children/children-1/index.html" title="page 1 (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -192,12 +193,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../../js/search.js?1694640597" defer></script>
+        <script src="../../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -353,13 +354,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../../js/theme.js?1694640597" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.print.html b/shortcodes/children/test/index.print.html
index 905c35f586..e478e0f578 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../../js/url.js?1694640598"></script>
-    <script src="../../../js/variant.js?1694640598"></script>
+    <link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../../js/url.js?1694730288"></script>
+    <script src="../../../js/variant.js?1694730288"></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,16 +54,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../shortcodes/children/test/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -75,6 +75,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -95,8 +96,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../../js/theme.js?1694640598" defer></script>
+    <script src="../../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.html b/shortcodes/expand/index.html
index 3598ab2dee..4594753d27 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/expand/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -85,9 +84,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -96,28 +95,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/expand/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/children/children-3/test3/index.html" title="page 3-1 (🡐)">
+              <a class="topbar-button-control" 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-next">
-              <a href="../../shortcodes/highlight/index.html" title="Highlight (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/highlight/index.html" title="Highlight (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -128,13 +128,13 @@
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-f6bffa990b5f662b81666956f038bc62" aria-controls="expandcontent-f6bffa990b5f662b81666956f038bc62" >
-    <label class="expand-label" for="expand-f6bffa990b5f662b81666956f038bc62" >
+    <input type="checkbox" id="expand-c5689618843cb628b01b81fa970b12e1" aria-controls="expandcontent-c5689618843cb628b01b81fa970b12e1" >
+    <label class="expand-label" for="expand-c5689618843cb628b01b81fa970b12e1" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-f6bffa990b5f662b81666956f038bc62" class="expand-content">
+    <div id="expandcontent-c5689618843cb628b01b81fa970b12e1" 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>
@@ -261,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">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-1d3324bd122ec6f8856e8a7c0926c733" aria-controls="expandcontent-1d3324bd122ec6f8856e8a7c0926c733" >
-    <label class="expand-label" for="expand-1d3324bd122ec6f8856e8a7c0926c733" >
+    <input type="checkbox" id="expand-78d7883c5f33fa93b76ca61fbb1cb8d7" aria-controls="expandcontent-78d7883c5f33fa93b76ca61fbb1cb8d7" >
+    <label class="expand-label" for="expand-78d7883c5f33fa93b76ca61fbb1cb8d7" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-1d3324bd122ec6f8856e8a7c0926c733" class="expand-content">
+    <div id="expandcontent-78d7883c5f33fa93b76ca61fbb1cb8d7" 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-db0091ed449f7647e85d416149643e45" aria-controls="expandcontent-db0091ed449f7647e85d416149643e45"  checked>
-    <label class="expand-label" for="expand-db0091ed449f7647e85d416149643e45" >
+    <input type="checkbox" id="expand-598c2e1506106d6435950cd450116fa0" aria-controls="expandcontent-598c2e1506106d6435950cd450116fa0"  checked>
+    <label class="expand-label" for="expand-598c2e1506106d6435950cd450116fa0" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-db0091ed449f7647e85d416149643e45" class="expand-content">
+    <div id="expandcontent-598c2e1506106d6435950cd450116fa0" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -301,13 +301,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-6e970d2df6a22a451bb12a69015d0750" aria-controls="expandcontent-6e970d2df6a22a451bb12a69015d0750" >
-    <label class="expand-label" for="expand-6e970d2df6a22a451bb12a69015d0750" >
+    <input type="checkbox" id="expand-c9c6684934bc3fd21cbb985428aece0c" aria-controls="expandcontent-c9c6684934bc3fd21cbb985428aece0c" >
+    <label class="expand-label" for="expand-c9c6684934bc3fd21cbb985428aece0c" >
         <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-6e970d2df6a22a451bb12a69015d0750" class="expand-content">
+    <div id="expandcontent-c9c6684934bc3fd21cbb985428aece0c" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -409,12 +409,12 @@ No need to press you!</div>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -570,13 +570,13 @@ No need to press you!</div>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.print.html b/shortcodes/expand/index.print.html
index d789116a31..d2d5119522 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/expand/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -83,13 +84,13 @@
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-f6bffa990b5f662b81666956f038bc62" aria-controls="expandcontent-f6bffa990b5f662b81666956f038bc62" >
-    <label class="expand-label" for="expand-f6bffa990b5f662b81666956f038bc62" >
+    <input type="checkbox" id="expand-c5689618843cb628b01b81fa970b12e1" aria-controls="expandcontent-c5689618843cb628b01b81fa970b12e1" >
+    <label class="expand-label" for="expand-c5689618843cb628b01b81fa970b12e1" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-f6bffa990b5f662b81666956f038bc62" class="expand-content">
+    <div id="expandcontent-c5689618843cb628b01b81fa970b12e1" 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>
@@ -216,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">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-1d3324bd122ec6f8856e8a7c0926c733" aria-controls="expandcontent-1d3324bd122ec6f8856e8a7c0926c733" >
-    <label class="expand-label" for="expand-1d3324bd122ec6f8856e8a7c0926c733" >
+    <input type="checkbox" id="expand-78d7883c5f33fa93b76ca61fbb1cb8d7" aria-controls="expandcontent-78d7883c5f33fa93b76ca61fbb1cb8d7" >
+    <label class="expand-label" for="expand-78d7883c5f33fa93b76ca61fbb1cb8d7" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-1d3324bd122ec6f8856e8a7c0926c733" class="expand-content">
+    <div id="expandcontent-78d7883c5f33fa93b76ca61fbb1cb8d7" 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-db0091ed449f7647e85d416149643e45" aria-controls="expandcontent-db0091ed449f7647e85d416149643e45"  checked>
-    <label class="expand-label" for="expand-db0091ed449f7647e85d416149643e45" >
+    <input type="checkbox" id="expand-598c2e1506106d6435950cd450116fa0" aria-controls="expandcontent-598c2e1506106d6435950cd450116fa0"  checked>
+    <label class="expand-label" for="expand-598c2e1506106d6435950cd450116fa0" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-db0091ed449f7647e85d416149643e45" class="expand-content">
+    <div id="expandcontent-598c2e1506106d6435950cd450116fa0" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -256,13 +257,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-6e970d2df6a22a451bb12a69015d0750" aria-controls="expandcontent-6e970d2df6a22a451bb12a69015d0750" >
-    <label class="expand-label" for="expand-6e970d2df6a22a451bb12a69015d0750" >
+    <input type="checkbox" id="expand-c9c6684934bc3fd21cbb985428aece0c" aria-controls="expandcontent-c9c6684934bc3fd21cbb985428aece0c" >
+    <label class="expand-label" for="expand-c9c6684934bc3fd21cbb985428aece0c" >
         <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-6e970d2df6a22a451bb12a69015d0750" class="expand-content">
+    <div id="expandcontent-c9c6684934bc3fd21cbb985428aece0c" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -286,8 +287,8 @@ No need to press you!</div>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/highlight/index.html b/shortcodes/highlight/index.html
index 4cf3d7cbec..571f94f30e 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/highlight/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -92,9 +91,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -103,28 +102,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/highlight/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/expand/index.html" title="Expand (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/expand/index.html" title="Expand (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/icon/index.html" title="Icon (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/icon/index.html" title="Icon (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -135,13 +135,13 @@
 <p>The <code>highlight</code> shortcode renders your code with a syntax highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="9e2b003661d55d87789205809dc964e2">
+<div class="tab-panel" data-tab-group="1d506c5beeb6c29d6fb141ddc0af590c">
   <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('9e2b003661d55d87789205809dc964e2','python')"
+      onclick="switchTab('1d506c5beeb6c29d6fb141ddc0af590c','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -364,13 +364,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="76b381033f5bfc995fd7caefa0101e54">
+<div class="tab-panel" data-tab-group="b5db274b43b2d29422722614a7619b6d">
   <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('76b381033f5bfc995fd7caefa0101e54','python')"
+      onclick="switchTab('b5db274b43b2d29422722614a7619b6d','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -491,12 +491,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -652,13 +652,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/highlight/index.print.html b/shortcodes/highlight/index.print.html
index 893d1f52ef..3388c35abc 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/highlight/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -83,13 +84,13 @@
 <p>The <code>highlight</code> shortcode renders your code with a syntax highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="9e2b003661d55d87789205809dc964e2">
+<div class="tab-panel" data-tab-group="1d506c5beeb6c29d6fb141ddc0af590c">
   <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('9e2b003661d55d87789205809dc964e2','python')"
+      onclick="switchTab('1d506c5beeb6c29d6fb141ddc0af590c','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -312,13 +313,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="76b381033f5bfc995fd7caefa0101e54">
+<div class="tab-panel" data-tab-group="b5db274b43b2d29422722614a7619b6d">
   <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('76b381033f5bfc995fd7caefa0101e54','python')"
+      onclick="switchTab('b5db274b43b2d29422722614a7619b6d','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -361,8 +362,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/icon/index.html b/shortcodes/icon/index.html
index 2731ba45f6..4bc483520b 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/icon/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -86,9 +85,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -97,28 +96,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/icon/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/highlight/index.html" title="Highlight (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/highlight/index.html" title="Highlight (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/include/index.html" title="Include (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/include/index.html" title="Include (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -332,12 +332,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -493,13 +493,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/icon/index.print.html b/shortcodes/icon/index.print.html
index 2e99250006..af4bbabf59 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/icon/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -208,8 +209,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.html b/shortcodes/include/index.html
index 1278c825f7..852c03d641 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/include/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -83,9 +82,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -94,28 +93,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/include/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/icon/index.html" title="Icon (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/icon/index.html" title="Icon (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/math/index.html" title="Math (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/math/index.html" title="Math (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -322,12 +322,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -483,13 +483,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.print.html b/shortcodes/include/index.print.html
index 63c744d9ca..e5abb12e1d 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/include/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -201,8 +202,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.html b/shortcodes/include_me/index.html
index 73df45b1aa..53eb2ed453 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -48,16 +48,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/include_me/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -66,28 +66,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/include_me/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/index.html" title="Shortcodes (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/index.html" title="Shortcodes (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/attachments/index.html" title="Attachments (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/attachments/index.html" title="Attachments (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -201,12 +202,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -362,13 +363,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.print.html b/shortcodes/include_me/index.print.html
index 5b9138a426..4fbe4c59b7 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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
@@ -49,16 +49,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/include_me/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,6 +69,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -104,8 +105,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/index.html b/shortcodes/index.html
index 045f01e949..6b7e7c5187 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../js/url.js?1694640597"></script>
-    <script src="../js/variant.js?1694640597"></script>
+    <link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../js/url.js?1694730287"></script>
+    <script src="../js/variant.js?1694730287"></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
@@ -52,16 +52,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../shortcodes/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,28 +69,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../shortcodes/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../cont/taxonomy/index.html" title="Taxonomy (🡐)">
+              <a class="topbar-button-control" href="../cont/taxonomy/index.html" title="Taxonomy (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../shortcodes/attachments/index.html" title="Attachments (🡒)">
+              <a class="topbar-button-control" href="../shortcodes/attachments/index.html" title="Attachments (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -209,12 +210,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../js/search.js?1694640598" defer></script>
+        <script src="../js/auto-complete.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -370,13 +371,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1694640598"></script>
+          <script async src="../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/index.print.html b/shortcodes/index.print.html
index 843dcaa2af..ddf7bc60d7 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../js/url.js?1694640598"></script>
-    <script src="../js/variant.js?1694640598"></script>
+    <link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../js/url.js?1694730288"></script>
+    <script src="../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../shortcodes/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="chapter">
@@ -1331,13 +1332,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-f6bffa990b5f662b81666956f038bc62" aria-controls="expandcontent-f6bffa990b5f662b81666956f038bc62" >
-    <label class="expand-label" for="expand-f6bffa990b5f662b81666956f038bc62" >
+    <input type="checkbox" id="expand-c5689618843cb628b01b81fa970b12e1" aria-controls="expandcontent-c5689618843cb628b01b81fa970b12e1" >
+    <label class="expand-label" for="expand-c5689618843cb628b01b81fa970b12e1" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-f6bffa990b5f662b81666956f038bc62" class="expand-content">
+    <div id="expandcontent-c5689618843cb628b01b81fa970b12e1" 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>
@@ -1464,26 +1465,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-1d3324bd122ec6f8856e8a7c0926c733" aria-controls="expandcontent-1d3324bd122ec6f8856e8a7c0926c733" >
-    <label class="expand-label" for="expand-1d3324bd122ec6f8856e8a7c0926c733" >
+    <input type="checkbox" id="expand-78d7883c5f33fa93b76ca61fbb1cb8d7" aria-controls="expandcontent-78d7883c5f33fa93b76ca61fbb1cb8d7" >
+    <label class="expand-label" for="expand-78d7883c5f33fa93b76ca61fbb1cb8d7" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-1d3324bd122ec6f8856e8a7c0926c733" class="expand-content">
+    <div id="expandcontent-78d7883c5f33fa93b76ca61fbb1cb8d7" 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-db0091ed449f7647e85d416149643e45" aria-controls="expandcontent-db0091ed449f7647e85d416149643e45"  checked>
-    <label class="expand-label" for="expand-db0091ed449f7647e85d416149643e45" >
+    <input type="checkbox" id="expand-598c2e1506106d6435950cd450116fa0" aria-controls="expandcontent-598c2e1506106d6435950cd450116fa0"  checked>
+    <label class="expand-label" for="expand-598c2e1506106d6435950cd450116fa0" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="expandcontent-db0091ed449f7647e85d416149643e45" class="expand-content">
+    <div id="expandcontent-598c2e1506106d6435950cd450116fa0" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -1504,13 +1505,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-6e970d2df6a22a451bb12a69015d0750" aria-controls="expandcontent-6e970d2df6a22a451bb12a69015d0750" >
-    <label class="expand-label" for="expand-6e970d2df6a22a451bb12a69015d0750" >
+    <input type="checkbox" id="expand-c9c6684934bc3fd21cbb985428aece0c" aria-controls="expandcontent-c9c6684934bc3fd21cbb985428aece0c" >
+    <label class="expand-label" for="expand-c9c6684934bc3fd21cbb985428aece0c" >
         <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-6e970d2df6a22a451bb12a69015d0750" class="expand-content">
+    <div id="expandcontent-c9c6684934bc3fd21cbb985428aece0c" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -1539,13 +1540,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="9e2b003661d55d87789205809dc964e2">
+<div class="tab-panel" data-tab-group="1d506c5beeb6c29d6fb141ddc0af590c">
   <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('9e2b003661d55d87789205809dc964e2','python')"
+      onclick="switchTab('1d506c5beeb6c29d6fb141ddc0af590c','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -1768,13 +1769,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="76b381033f5bfc995fd7caefa0101e54">
+<div class="tab-panel" data-tab-group="b5db274b43b2d29422722614a7619b6d">
   <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('76b381033f5bfc995fd7caefa0101e54','python')"
+      onclick="switchTab('b5db274b43b2d29422722614a7619b6d','python')"
     >
       <div>
         <div class="tab-nav-hidden">python</div>
@@ -3313,7 +3314,7 @@ Electricity grid,H2 conversion,27.14
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-f27f5a5e506e09f0546a87d07b912a3b"
+    id="openapi-b43be8d1607e3f2378085b8c1655981b"
     openapi-url="../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -3419,13 +3420,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="a5bd706429354cd7155f5990426cfdf4">
+<div class="tab-panel" data-tab-group="8bd762e59fc52cc6161b3c10f0940604">
   <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('a5bd706429354cd7155f5990426cfdf4','configtoml')"
+      onclick="switchTab('8bd762e59fc52cc6161b3c10f0940604','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -3461,13 +3462,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="611ba43b0b30fb2dc39efcbc34644d44">
+<div class="tab-panel" data-tab-group="04656f81b71f69aa3737f6815ac13441">
   <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('611ba43b0b30fb2dc39efcbc34644d44','c')"
+      onclick="switchTab('04656f81b71f69aa3737f6815ac13441','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -3581,13 +3582,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="d1ff53cdacba79275e0432098b7999fd">
+<div class="tab-panel" data-tab-group="060097580947647614e35c5ce3f5eb84">
   <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('d1ff53cdacba79275e0432098b7999fd','code')"
+      onclick="switchTab('060097580947647614e35c5ce3f5eb84','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -3612,13 +3613,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="0ee1dba1f80758788a3af78cb92b7652">
+<div class="tab-panel" data-tab-group="48683353b371c6984b1948e463268720">
   <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('0ee1dba1f80758788a3af78cb92b7652','emstrongmixedstrongem')"
+      onclick="switchTab('48683353b371c6984b1948e463268720','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -3666,13 +3667,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="c1971fdd980f3c0e217d8095af158276">
+<div class="tab-panel" data-tab-group="00f7fcf9208967bd554b97b55692a10b">
   <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('c1971fdd980f3c0e217d8095af158276','just-colored-style')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -3682,7 +3683,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('c1971fdd980f3c0e217d8095af158276','just-color')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -3692,7 +3693,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('c1971fdd980f3c0e217d8095af158276','default-style-and-color')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style and color</div>
@@ -3702,7 +3703,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('c1971fdd980f3c0e217d8095af158276','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','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>
@@ -3712,7 +3713,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('c1971fdd980f3c0e217d8095af158276','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','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>
@@ -3783,13 +3784,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="eec3394586535d7b4838457dba843111">
+<div class="tab-panel" data-tab-group="1abdd2f9dac73fc457dba595f1f9402d">
   <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('eec3394586535d7b4838457dba843111','py')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -3799,7 +3800,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('eec3394586535d7b4838457dba843111','sh')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -3809,7 +3810,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('eec3394586535d7b4838457dba843111','c')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -3966,13 +3967,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="c518499c51f782d1fdabfe77290e0834">
+<div class="tab-panel" data-tab-group="1d54df018720cba6919882a6f49a342b">
   <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('c518499c51f782d1fdabfe77290e0834','group-a-tab-view-1')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -3982,7 +3983,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('c518499c51f782d1fdabfe77290e0834','group-a-tab-view-2')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -3992,7 +3993,7 @@ Electricity grid,H2 conversion,27.14
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('c518499c51f782d1fdabfe77290e0834','group-b')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -4391,8 +4392,8 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730288" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -4421,27 +4422,27 @@ Electricity grid,H2 conversion,27.14
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1694640598"></script>
-    <script src="../js/d3/d3-color.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1694640598" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1694640598" defer></script>
-    <script src="../js/js-yaml.min.js?1694640598" defer></script>
-    <script src="../js/mermaid.min.js?1694640598" defer></script>
+    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1694730288"></script>
+    <script src="../js/d3/d3-color.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1694730288" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1694730288" defer></script>
+    <script src="../js/js-yaml.min.js?1694730288" defer></script>
+    <script src="../js/mermaid.min.js?1694730288" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="../js/swagger-ui/swagger-ui-bundle.js?1694640598" defer></script>
-    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1694640598" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-bundle.js?1694730288" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1694730288" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694640598", assetsBuster:  1694640598  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694730288", assetsBuster:  1694730288  };
     </script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/math/index.html b/shortcodes/math/index.html
index 8f01dc2d73..5ba1858c01 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/math/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -92,9 +91,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -103,28 +102,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/math/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/include/index.html" title="Include (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/include/index.html" title="Include (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/mermaid/index.html" title="Mermaid (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/mermaid/index.html" title="Mermaid (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -382,12 +382,12 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -543,13 +543,13 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -578,7 +578,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?1694640597"></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1694730287"></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/math/index.print.html b/shortcodes/math/index.print.html
index ecacddcad9..fcd540df84 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/math/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -252,8 +253,8 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -282,7 +283,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?1694640598"></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1694730288"></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.html b/shortcodes/mermaid/index.html
index 959b235a4c..f468a4f07e 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/mermaid/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -103,9 +102,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -114,28 +113,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/mermaid/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/math/index.html" title="Math (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/math/index.html" title="Math (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/notice/index.html" title="Notice (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/notice/index.html" title="Notice (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -848,12 +848,12 @@ Electricity grid,H2 conversion,27.14
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -1009,27 +1009,27 @@ Electricity grid,H2 conversion,27.14
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694640597" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694640597" defer></script>
-    <script src="../../js/js-yaml.min.js?1694640597" defer></script>
-    <script src="../../js/mermaid.min.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694730287" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694730287" defer></script>
+    <script src="../../js/js-yaml.min.js?1694730287" defer></script>
+    <script src="../../js/mermaid.min.js?1694730287" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.print.html b/shortcodes/mermaid/index.print.html
index abcd6f492e..c8b16e0310 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/mermaid/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -707,22 +708,22 @@ Electricity grid,H2 conversion,27.14
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1694640598" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1694640598" defer></script>
-    <script src="../../js/js-yaml.min.js?1694640598" defer></script>
-    <script src="../../js/mermaid.min.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1694730288" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1694730288" defer></script>
+    <script src="../../js/js-yaml.min.js?1694730288" defer></script>
+    <script src="../../js/mermaid.min.js?1694730288" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.html b/shortcodes/notice/index.html
index b5b3c0e289..3f8aa3e682 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/notice/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -87,9 +86,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -98,28 +97,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/notice/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/mermaid/index.html" title="Mermaid (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/mermaid/index.html" title="Mermaid (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/openapi/index.html" title="OpenAPI (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/openapi/index.html" title="OpenAPI (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -553,12 +553,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -714,13 +714,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.print.html b/shortcodes/notice/index.print.html
index 949c4b6f7e..8d5c6dc6e7 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/notice/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -428,8 +429,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/openapi/index.html b/shortcodes/openapi/index.html
index 044c72681e..e5227cc4e5 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/openapi/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -83,9 +82,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -94,28 +93,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/openapi/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/notice/index.html" title="Notice (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/notice/index.html" title="Notice (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/siteparam/index.html" title="SiteParam (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/siteparam/index.html" title="SiteParam (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -211,7 +211,7 @@
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-f27f5a5e506e09f0546a87d07b912a3b"
+    id="openapi-b43be8d1607e3f2378085b8c1655981b"
     openapi-url="../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -302,12 +302,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -463,19 +463,19 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694640598" defer></script>
-    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694640598" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694730288" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694730288" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694640598", assetsBuster:  1694640598  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694730288", assetsBuster:  1694730288  };
     </script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/openapi/index.print.html b/shortcodes/openapi/index.print.html
index 34942c21cc..0cbc02b8bd 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/openapi/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -168,7 +169,7 @@
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="openapi-f27f5a5e506e09f0546a87d07b912a3b"
+    id="openapi-b43be8d1607e3f2378085b8c1655981b"
     openapi-url="../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -181,14 +182,14 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694640598" defer></script>
-    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694640598" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1694730288" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1694730288" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694640598", assetsBuster:  1694640598  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1694730288", assetsBuster:  1694730288  };
     </script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.html b/shortcodes/siteparam/index.html
index 31c5e1c6fa..efd380480e 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/siteparam/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -84,9 +83,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -95,28 +94,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/siteparam/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/openapi/index.html" title="OpenAPI (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/openapi/index.html" title="OpenAPI (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/tab/index.html" title="Tab (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/tab/index.html" title="Tab (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -215,13 +215,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="a5bd706429354cd7155f5990426cfdf4">
+<div class="tab-panel" data-tab-group="8bd762e59fc52cc6161b3c10f0940604">
   <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('a5bd706429354cd7155f5990426cfdf4','configtoml')"
+      onclick="switchTab('8bd762e59fc52cc6161b3c10f0940604','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -329,12 +329,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -490,13 +490,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.print.html b/shortcodes/siteparam/index.print.html
index eeac0b82de..7f0d392a6f 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/siteparam/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -171,13 +172,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="a5bd706429354cd7155f5990426cfdf4">
+<div class="tab-panel" data-tab-group="8bd762e59fc52cc6161b3c10f0940604">
   <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('a5bd706429354cd7155f5990426cfdf4','configtoml')"
+      onclick="switchTab('8bd762e59fc52cc6161b3c10f0940604','configtoml')"
     >
       <div>
         <div class="tab-nav-hidden">config.toml</div>
@@ -207,8 +208,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tab/index.html b/shortcodes/tab/index.html
index 267918ac38..cefeb7ffaf 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/tab/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -85,9 +84,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -96,28 +95,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/tab/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/siteparam/index.html" title="SiteParam (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/siteparam/index.html" title="SiteParam (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <a href="../../shortcodes/tabs/index.html" title="Tabs (🡒)">
+              <a class="topbar-button-control" href="../../shortcodes/tabs/index.html" title="Tabs (🡒)">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </a>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -129,13 +129,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="611ba43b0b30fb2dc39efcbc34644d44">
+<div class="tab-panel" data-tab-group="04656f81b71f69aa3737f6815ac13441">
   <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('611ba43b0b30fb2dc39efcbc34644d44','c')"
+      onclick="switchTab('04656f81b71f69aa3737f6815ac13441','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -249,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="d1ff53cdacba79275e0432098b7999fd">
+<div class="tab-panel" data-tab-group="060097580947647614e35c5ce3f5eb84">
   <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('d1ff53cdacba79275e0432098b7999fd','code')"
+      onclick="switchTab('060097580947647614e35c5ce3f5eb84','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -280,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="0ee1dba1f80758788a3af78cb92b7652">
+<div class="tab-panel" data-tab-group="48683353b371c6984b1948e463268720">
   <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('0ee1dba1f80758788a3af78cb92b7652','emstrongmixedstrongem')"
+      onclick="switchTab('48683353b371c6984b1948e463268720','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -334,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">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="c1971fdd980f3c0e217d8095af158276">
+<div class="tab-panel" data-tab-group="00f7fcf9208967bd554b97b55692a10b">
   <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('c1971fdd980f3c0e217d8095af158276','just-colored-style')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -350,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('c1971fdd980f3c0e217d8095af158276','just-color')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -360,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('c1971fdd980f3c0e217d8095af158276','default-style-and-color')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style and color</div>
@@ -370,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('c1971fdd980f3c0e217d8095af158276','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','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>
@@ -380,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('c1971fdd980f3c0e217d8095af158276','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','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>
@@ -523,12 +523,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -684,13 +684,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tab/index.print.html b/shortcodes/tab/index.print.html
index b8d7862716..6700928e65 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/tab/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -84,13 +85,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="611ba43b0b30fb2dc39efcbc34644d44">
+<div class="tab-panel" data-tab-group="04656f81b71f69aa3737f6815ac13441">
   <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('611ba43b0b30fb2dc39efcbc34644d44','c')"
+      onclick="switchTab('04656f81b71f69aa3737f6815ac13441','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -204,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="d1ff53cdacba79275e0432098b7999fd">
+<div class="tab-panel" data-tab-group="060097580947647614e35c5ce3f5eb84">
   <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('d1ff53cdacba79275e0432098b7999fd','code')"
+      onclick="switchTab('060097580947647614e35c5ce3f5eb84','code')"
     >
       <div>
         <div class="tab-nav-hidden">Code</div>
@@ -235,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="0ee1dba1f80758788a3af78cb92b7652">
+<div class="tab-panel" data-tab-group="48683353b371c6984b1948e463268720">
   <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('0ee1dba1f80758788a3af78cb92b7652','emstrongmixedstrongem')"
+      onclick="switchTab('48683353b371c6984b1948e463268720','emstrongmixedstrongem')"
     >
       <div>
         <div class="tab-nav-hidden"><em><strong>Mixed</strong></em></div>
@@ -289,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">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="c1971fdd980f3c0e217d8095af158276">
+<div class="tab-panel" data-tab-group="00f7fcf9208967bd554b97b55692a10b">
   <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('c1971fdd980f3c0e217d8095af158276','just-colored-style')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','just-colored-style')"
     >
       <div>
         <div class="tab-nav-hidden">just colored style</div>
@@ -305,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('c1971fdd980f3c0e217d8095af158276','just-color')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','just-color')"
     >
       <div>
         <div class="tab-nav-hidden">just color</div>
@@ -315,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('c1971fdd980f3c0e217d8095af158276','default-style-and-color')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','default-style-and-color')"
     >
       <div>
         <div class="tab-nav-hidden">default style and color</div>
@@ -325,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('c1971fdd980f3c0e217d8095af158276','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','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>
@@ -335,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('c1971fdd980f3c0e217d8095af158276','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('00f7fcf9208967bd554b97b55692a10b','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>
@@ -400,8 +401,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.html b/shortcodes/tabs/index.html
index e8a8bd271f..8dd7dda56b 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -52,24 +52,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../shortcodes/tabs/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#usage">Usage</a>
       <ul>
@@ -84,9 +83,9 @@
     </li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -95,28 +94,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../../shortcodes/tabs/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../../shortcodes/tab/index.html" title="Tab (🡐)">
+              <a class="topbar-button-control" href="../../shortcodes/tab/index.html" title="Tab (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -128,13 +128,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="eec3394586535d7b4838457dba843111">
+<div class="tab-panel" data-tab-group="1abdd2f9dac73fc457dba595f1f9402d">
   <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('eec3394586535d7b4838457dba843111','py')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -144,7 +144,7 @@
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('eec3394586535d7b4838457dba843111','sh')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -154,7 +154,7 @@
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('eec3394586535d7b4838457dba843111','c')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -311,13 +311,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="c518499c51f782d1fdabfe77290e0834">
+<div class="tab-panel" data-tab-group="1d54df018720cba6919882a6f49a342b">
   <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('c518499c51f782d1fdabfe77290e0834','group-a-tab-view-1')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -327,7 +327,7 @@
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('c518499c51f782d1fdabfe77290e0834','group-a-tab-view-2')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -337,7 +337,7 @@
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('c518499c51f782d1fdabfe77290e0834','group-b')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -813,12 +813,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640597" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640597" defer></script>
-        <script src="../../js/search.js?1694640597" defer></script>
+        <script src="../../js/auto-complete.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730287" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730287" defer></script>
+        <script src="../../js/search.js?1694730287" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -974,13 +974,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640597"></script>
+          <script async src="../../js/github-buttons.js?1694730287"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640597" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640597" defer></script>
-    <script src="../../js/theme.js?1694640597" defer></script>
+    <script src="../../js/clipboard.min.js?1694730287" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730287" defer></script>
+    <script src="../../js/theme.js?1694730287" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.print.html b/shortcodes/tabs/index.print.html
index 87fdd9c207..b66c5164de 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../../js/url.js?1694640598"></script>
-    <script src="../../js/variant.js?1694640598"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../../js/url.js?1694730288"></script>
+    <script src="../../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../../shortcodes/tabs/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -73,6 +73,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -84,13 +85,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="eec3394586535d7b4838457dba843111">
+<div class="tab-panel" data-tab-group="1abdd2f9dac73fc457dba595f1f9402d">
   <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('eec3394586535d7b4838457dba843111','py')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','py')"
     >
       <div>
         <div class="tab-nav-hidden">py</div>
@@ -100,7 +101,7 @@
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('eec3394586535d7b4838457dba843111','sh')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','sh')"
     >
       <div>
         <div class="tab-nav-hidden">sh</div>
@@ -110,7 +111,7 @@
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('eec3394586535d7b4838457dba843111','c')"
+      onclick="switchTab('1abdd2f9dac73fc457dba595f1f9402d','c')"
     >
       <div>
         <div class="tab-nav-hidden">c</div>
@@ -267,13 +268,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="c518499c51f782d1fdabfe77290e0834">
+<div class="tab-panel" data-tab-group="1d54df018720cba6919882a6f49a342b">
   <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('c518499c51f782d1fdabfe77290e0834','group-a-tab-view-1')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-a-tab-view-1')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 1</div>
@@ -283,7 +284,7 @@
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('c518499c51f782d1fdabfe77290e0834','group-a-tab-view-2')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-a-tab-view-2')"
     >
       <div>
         <div class="tab-nav-hidden">Group A, Tab View 2</div>
@@ -293,7 +294,7 @@
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('c518499c51f782d1fdabfe77290e0834','group-b')"
+      onclick="switchTab('1d54df018720cba6919882a6f49a342b','group-b')"
     >
       <div>
         <div class="tab-nav-hidden">Group B</div>
@@ -691,8 +692,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/showcase/index.html b/showcase/index.html
index 60b512c82d..4e18b64d67 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../js/url.js?1694640597"></script>
-    <script src="../js/variant.js?1694640597"></script>
+    <link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../js/url.js?1694730287"></script>
+    <script src="../js/variant.js?1694730287"></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
@@ -52,33 +52,32 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../showcase/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#gobolinux-wikihttpswikigobolinuxorg-by-neonsysorg"><a href="https://wiki.gobolinux.org/">GoboLinux Wiki</a> by NEONsys.org</a></li>
     <li><a href="#bitshttpsbits-trainingdetraining-by-dr-lutz-gollan"><a href="https://bits-training.de/training/">BITS</a> by Dr. Lutz Gollan</a></li>
     <li><a href="#pamasol-electricshttpspamasolgithubiode-by-pamasol"><a href="https://pamasol.github.io/de/">Pamasol Electrics</a> by Pamasol</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -86,28 +85,29 @@
           </ol>
           <div class="topbar-right">
             <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)">
+              <a class="topbar-button-control" 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 class="topbar-button topbar-print">
-              <a href="../showcase/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;p)">
+              <a class="topbar-button-control" 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-prev">
-              <a href="../shortcodes/tabs/index.html" title="Tabs (🡐)">
+              <a class="topbar-button-control" href="../shortcodes/tabs/index.html" title="Tabs (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -116,14 +116,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-3f5ce48c837402fc074b978773f32b5d" 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-3f5ce48c837402fc074b978773f32b5d"><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-6141a9893ec9caa8578f433b1a7d9b4e" 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-6141a9893ec9caa8578f433b1a7d9b4e"><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-ca18fc2f61b7ca455c69ec7d4e6930c9" 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-ca18fc2f61b7ca455c69ec7d4e6930c9"><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-b60e5b8dd4d078dee8ce7ade0013732d" 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-b60e5b8dd4d078dee8ce7ade0013732d"><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-6799fe62e261f398d545d8caf0ed9332" 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-6799fe62e261f398d545d8caf0ed9332"><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-a85918a355f2adb6b40fff75b269f8e4" 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-a85918a355f2adb6b40fff75b269f8e4"><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">
 
@@ -211,12 +211,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../js/search.js?1694640598" defer></script>
+        <script src="../js/auto-complete.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -372,13 +372,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1694640598"></script>
+          <script async src="../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/showcase/index.print.html b/showcase/index.print.html
index 84605428f4..c97a395a0d 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640598" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640598" rel="stylesheet">
-    <link href="../css/fonts.css?1694640598" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640598" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640598" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640598" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640598" rel="stylesheet">
-    <link href="../css/print.css?1694640598" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1694640598" rel="stylesheet">
-    <link href="../css/ie.css?1694640598" rel="stylesheet">
-    <script src="../js/url.js?1694640598"></script>
-    <script src="../js/variant.js?1694640598"></script>
+    <link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730288" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730288" rel="stylesheet">
+    <link href="../css/fonts.css?1694730288" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730288" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730288" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730288" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730288" rel="stylesheet">
+    <link href="../css/print.css?1694730288" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1694730288" rel="stylesheet">
+    <link href="../css/ie.css?1694730288" rel="stylesheet">
+    <script src="../js/url.js?1694730288"></script>
+    <script src="../js/variant.js?1694730288"></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,16 +53,16 @@
   </head>
   <body class="mobile-support print disableInlineCopyToClipboard" data-url="../showcase/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -72,6 +72,7 @@
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article class="default">
@@ -80,14 +81,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-3f5ce48c837402fc074b978773f32b5d" 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-3f5ce48c837402fc074b978773f32b5d"><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-6141a9893ec9caa8578f433b1a7d9b4e" 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-6141a9893ec9caa8578f433b1a7d9b4e"><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-ca18fc2f61b7ca455c69ec7d4e6930c9" 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-ca18fc2f61b7ca455c69ec7d4e6930c9"><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-b60e5b8dd4d078dee8ce7ade0013732d" 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-b60e5b8dd4d078dee8ce7ade0013732d"><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-6799fe62e261f398d545d8caf0ed9332" 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-6799fe62e261f398d545d8caf0ed9332"><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-a85918a355f2adb6b40fff75b269f8e4" 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-a85918a355f2adb6b40fff75b269f8e4"><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">
 
@@ -97,8 +98,8 @@
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/tags/children/index.html b/tags/children/index.html
index 836ba1d85c..18322a5142 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../tags/children/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -189,12 +190,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -350,13 +351,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/tags/config/index.html b/tags/config/index.html
index 31df60fa9b..465f6b758c 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../tags/config/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/tags/content/index.html b/tags/content/index.html
index c1e864f0b3..6b21e02b24 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../tags/content/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -175,12 +176,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -336,13 +337,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/tags/documentation/index.html b/tags/documentation/index.html
index 4a8ce8d1d7..512ae69235 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -48,16 +48,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../tags/documentation/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -66,18 +66,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -172,12 +173,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -332,13 +333,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/tags/hidden/index.html b/tags/hidden/index.html
index 82a17e992b..52fbff23b4 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../tags/hidden/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -179,12 +180,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -340,13 +341,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/tags/index.html b/tags/index.html
index a0654dd2aa..f4a8010975 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../js/url.js?1694640597"></script>
-    <script src="../js/variant.js?1694640597"></script>
+    <link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../js/url.js?1694730287"></script>
+    <script src="../js/variant.js?1694730287"></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,24 +51,23 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../tags/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
             <div class="topbar-button topbar-toc">
-              <button onclick="showToc()" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
+              <button class="topbar-button-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL&#43;ALT&#43;t)">
                 <i class="fa-fw fas fa-list-alt"></i>
               </button>
-            </div>
-            <div class="default-animation progress">
-              <div class="toc-wrapper">
-<nav id="TableOfContents">
+              <div class="topbar-button-flyout">
+                <div class="topbar-button-flyout-wrapper">
+<nav class="TableOfContents">
   <ul>
     <li><a href="#c">C</a></li>
     <li><a href="#d">D</a></li>
@@ -77,9 +76,9 @@
     <li><a href="#t">T</a></li>
   </ul>
 </nav>
+                </div>
               </div>
             </div>
-            <div id="toc-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -87,18 +86,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -212,12 +212,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../js/search.js?1694640598" defer></script>
+        <script src="../js/auto-complete.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -373,13 +373,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1694640598"></script>
+          <script async src="../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../js/theme.js?1694640598" defer></script>
+    <script src="../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/tags/non-hidden/index.html b/tags/non-hidden/index.html
index 79423ca3cf..65b072e4b4 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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,16 +51,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../tags/non-hidden/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -69,18 +69,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -183,12 +184,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -344,13 +345,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>
diff --git a/tags/tutorial/index.html b/tags/tutorial/index.html
index 4e521fa4ed..df2af78148 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?1694640597" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1694730287" 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?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1694640597" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1694640597" rel="stylesheet">
-    <link href="../../css/fonts.css?1694640597" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694640597" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1694640597" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1694640597" rel="stylesheet" id="variant-style">
-    <link href="../../css/variant.css?1694640597" rel="stylesheet">
-    <link href="../../css/print.css?1694640597" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1694640597" rel="stylesheet">
-    <script src="../../js/url.js?1694640597"></script>
-    <script src="../../js/variant.js?1694640597"></script>
+    <link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1694730287" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1694730287" rel="stylesheet">
+    <link href="../../css/fonts.css?1694730287" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1694730287" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1694730287" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1694730287" rel="stylesheet" id="variant-style">
+    <link href="../../css/variant.css?1694730287" rel="stylesheet">
+    <link href="../../css/print.css?1694730287" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1694730287" rel="stylesheet">
+    <script src="../../js/url.js?1694730287"></script>
+    <script src="../../js/variant.js?1694730287"></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
@@ -48,16 +48,16 @@
   </head>
   <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../tags/tutorial/index.html">
     <div id="body" class="default-animation">
+      <div id="body-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
           <div class="topbar-left">
             <div class="topbar-button topbar-sidebar">
-              <button onclick="showNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
+              <button class="topbar-button-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)">
                 <i class="fa-fw fas fa-bars"></i>
               </button>
             </div>
-            <div id="sidebar-overlay"></div>
           </div>
           <ol class="topbar-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>
@@ -66,18 +66,19 @@
           </ol>
           <div class="topbar-right">
             <div class="topbar-button topbar-prev">
-              <a href="../../index.html" title="Hugo Relearn Theme (🡐)">
+              <a class="topbar-button-control" href="../../index.html" title="Hugo Relearn Theme (🡐)">
                 <i class="fa-fw fas fa-chevron-left"></i>
               </a>
             </div>
             <div class="topbar-button topbar-next">
-              <span>
+              <span class="topbar-button-control">
                 <i class="fa-fw fas fa-chevron-right"></i>
               </span>
             </div>
           </div>
         </div>
       </nav>
+      <div id="main-overlay"></div>
       <main id="body-inner" class="highlightable default" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
@@ -172,12 +173,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1694640598" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1694640598" defer></script>
-        <script src="../../js/search.js?1694640598" defer></script>
+        <script src="../../js/auto-complete.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1694730288" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1694730288" defer></script>
+        <script src="../../js/search.js?1694730288" defer></script>
       </div>
       <div id="homelinks" class="default-animation">
         <hr class="padding">
@@ -332,13 +333,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1694640598"></script>
+          <script async src="../../js/github-buttons.js?1694730288"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1694640598" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1694640598" defer></script>
-    <script src="../../js/theme.js?1694640598" defer></script>
+    <script src="../../js/clipboard.min.js?1694730288" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1694730288" defer></script>
+    <script src="../../js/theme.js?1694730288" defer></script>
   </body>
 </html>